Merge pull request #29 from RocketCommunicationsInc/ASTRO-2065-value-…

…acessor

Astro 2065 value acessor

packages/angular/DEVELOPMENT.md

@@ -0,0 +1,73 @@
+### Build web-components library
+1. Inside `web-components` package run `npm install`.
+2. Run `npm run build`.
+3. Run `sudo npm link`.
+
+### Build angular module
+1. Inside `angular` package run `npm install`.
+2. Run `npm link @astrouxds/astro-web-components` 
+3. Run `npm run build`
+
+### Link everything to angular-test project
+1. Inside your angular testing project run `npm install`
+2. Run `npm link @astrouxds/astro-web-components @astrouxds/angular`
+4. Declare `AstroComponentsModule` in desired module
+
+```js
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { AstroComponentsModule } from '@astrouxds/angular';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AstroComponentsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+5. If you have angular version 9 or higher add the following to `tsconfig.json` -> `compilerOptions`
+
+```json
+ "paths": {
+    "@angular/*": ["./node_modules/@angular/*"]
+  }
+```
+
+6. Update `angular.json` file to projects to run `aot` compiiler
+
+```json
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "projects": {
+    "angular-test-project": {
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "aot": true, // <----- this one here
+            "assets": ["src/favicon.ico", "src/assets"],
+            "scripts": []
+          },
+        }
+      }
+    }
+  },
+}
+```
+
+7. Run `ng serve` 
+
+* Note if you wish to use `ngModule` or `formControl` name directives you will need to import assosiated angular modules 
+
+* Note `angular` project has a `reboot` script that helps dealing with removal of `__ivy_ngcc__` related code and reinstallation of the project which is necessary if `angular-test` project throws errors along the lines `AstroComponentsModule was not properly processed by ngcc`
+

packages/angular/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Ionic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/angular/README.md

@@ -0,0 +1,78 @@
+# Installation
+
+`npm i @astrouxds/angular`
+
+## Import and Usage
+
+First, import the css into your `angular.json`
+
+```json
+{
+  "architect": {
+    "build": {
+      "builder": "@angular-devkit/build-angular:browser",
+      "options": {
+        "assets": ["src/favicon.ico", "src/assets"],
+        "styles": [
+          "./node_modules/@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css",
+          "styles.scss"
+        ],
+        "scripts": []
+      }
+    }
+  }
+}
+```
+
+Next, Import `AstroComponentsModule` into module where you would want to use the components.
+
+```js
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+
+import { AppComponent } from "./app.component";
+import { AstroComponentsModule } from "@astrouxds/angular";
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, AstroComponentsModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [],
+})
+export class AppModule {}
+```
+
+You can now use astro-components as regular Angular components.
+
+```html
+<section>
+  <rux-input name="myInput"></rux-progress>
+</section>
+```
+
+## Astro Stencil Components Docs
+
+Docs for all components can be found at our [Astro Stencil Storybook.](https://astro-stencil.netlify.app/)
+
+### This repo is currently in devlopement.
+
+This repo will be updated frequently with the [Astro components in Stencil repo](https://github.com/RocketCommunicationsInc/astro-components-stencil).
+
+### Known Issues
+
+- Angular versions 9 and higher may through an error `ɵɵInjectorDeclaration`. To solve that issue you'll need to add the following to your `tsconfig.json` `compilerOptions`
+
+```json
+  "paths": {
+      "@angular/*": ["./node_modules/@angular/*"]
+  }
+```
+
+- Presently all components work with an exception of `rux-checkbox`, `rux-switch`, and `rux-input` which presently do not support native `ngModel` and `formControl` integration
+
+- This version bundles all components (no tree-shaking) in order to avoid having to use `defineCustomElements` each time you want to use an astro component. Because of this, the bundle size is larger.
+
+- CSS custom properties for our angular-wrapped components are undefined out of the box, thus the necessity for the CSS import.
+
+#### Currently using @astrouxds/astro-web-components version 0.0.16