added a TODO module element

README.md

@@ -1,25 +1,14 @@
-# nnArt
-
-Based on https://deeplearnjs.org/demos/nn-art/
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.4.
+## Simple Angular Element 
+- usable whichever f/w as a web-component
+- based on `https://github.com/CarmenPopoviciu/ng-elements`
+- added a TODO element ina ddition to `https://github.com/CarmenPopoviciu/ng-elements` art element
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Run `yarn serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
-## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+## TODOs
+- [ ] Add a better packaging mechanism for individual elements
+- [ ] Try bazel build
+- [ ] Upgrade to ng 7 (is non-breaking)

package.json

@@ -26,10 +26,12 @@
     "@angular/router": "6.0.2",
     "core-js": "2.5.6",
     "deeplearn": "0.4.2",
+    "document-register-element": "^1.7.2",
+    "node-sass": "^4.11.0",
     "rxjs": "6.1.0",
     "rxjs-compat": "6.1.0",
-    "zone.js": "0.8.26",
-    "document-register-element": "^1.7.2"
+    "sass-loader": "^7.1.0",
+    "zone.js": "0.8.26"
   },
   "devDependencies": {
     "@angular/cli": "6.0.3",
@@ -53,4 +55,4 @@
     "typescript": "~2.7.2",
     "@angular-devkit/build-angular": "0.6.3"
   }
-}
+}

src/app/elements.module.ts

@@ -15,25 +15,31 @@ import { NNMnistComponent } from './elements/nn-mnist/nn-mnist.component';
 import { SideNavComponent } from './elements/side-nav/side-nav.component';
 import { PaintCanvasComponent } from './elements/paint-canvas/paint-canvas.component';
 
+import { TodoModule } from './elements/todo/todo.module';
+import { MyTodo } from './elements/todo/my-todo.component';
+
+
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     MatSliderModule,
-    MatIconModule
+    MatIconModule,
+    TodoModule,
   ],
   declarations: [
     NNArtComponent,
     NNMnistComponent,
     SideNavComponent,
-    PaintCanvasComponent
+    PaintCanvasComponent,
   ],
   entryComponents: [
     NNArtComponent,
     NNMnistComponent,
     SideNavComponent,
     MatSlider,
-    MatIcon
+    MatIcon,
+    MyTodo
   ]
 })
 export class ElementsModule {
@@ -53,11 +59,15 @@ export class ElementsModule {
       injector: this.injector
     });
     const matIconEl = createCustomElement(MatIcon, { injector: this.injector });
+    const todosEl = createCustomElement(MyTodo, {
+      injector: this.injector
+    });
 
     customElements.define('nn-art', nnArtEl);
     customElements.define('nn-mnist', nnMnistEl);
     customElements.define('side-nav', sideNavEl);
     customElements.define('mat-slider', matSliderEl);
     customElements.define('mat-icon', matIconEl);
+    customElements.define('my-todos', todosEl);
   }
 }

src/app/elements.ts

@@ -4,7 +4,7 @@ import { NNArtComponent } from './elements/nn-art/nn-art.component';
 import { SideNavComponent } from './elements/side-nav/side-nav.component';
 import { PaintCanvasComponent } from './elements/paint-canvas/paint-canvas.component';
 import { NNMnistComponent } from './elements/nn-mnist/nn-mnist.component';
-
+import { MyTodo } from './elements/todo/my-todo.component';
 export const DECLARATIONS = [
   NNArtComponent,
   NNMnistComponent,
@@ -17,5 +17,6 @@ export const ENTRY_COMPONENTS = [
   NNMnistComponent,
   SideNavComponent,
   MatSlider,
-  MatIcon
+  MatIcon,
+  MyTodo
 ];

src/app/elements/todo/my-todo.component.html

@@ -0,0 +1,3 @@
+<p>
+  nn-todo works!
+</p>

src/app/elements/todo/my-todo.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyTodo } from './my-todo.component';
+
+describe('NnTodoComponent', () => {
+  let component: MyTodo;
+  let fixture: ComponentFixture<MyTodo>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MyTodo ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyTodo);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/elements/todo/my-todo.component.ts

@@ -0,0 +1,71 @@
+import {
+    Component,
+    ViewEncapsulation,
+} from '@angular/core';
+
+interface TodoItem {
+    text: string;
+    checked: boolean;
+}
+
+@Component({
+    selector: 'my-todo',
+    template: `
+        <h1>Todos Angular Elements</h1>
+        <section>
+            <todo-input (onTodoInputSubmit)="todoInputSubmiHandler($event)"></todo-input>
+            <todo-item
+                *ngFor="let item of list; let i = index"
+                [checked]="item.checked"
+                [text]="item.text"
+                [index]="i"
+                (onTodoItemChecked)="todoItemCheckedHandler($event, i)"
+                (onTodoItemRemove)="todoItemRemoveHandler($event, i)"
+            ></todo-item>
+        </section>
+    `,
+    styles: [`
+        h1 {
+            font-size: 55px;
+            font-weight: 100;
+            text-align: center;
+            color: rgba(175, 47, 47, 0.15);
+        }
+
+        section {
+            background: #fff;
+            margin: 30px 0 40px 0;
+            position: relative;
+            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+        }
+
+        #list-container {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            border-top: 1px solid #e6e6e6;
+        }
+    `],
+    encapsulation: ViewEncapsulation.Native
+})
+export class MyTodo {
+    list: TodoItem[] = [
+        { text: 'my initial todo', checked: false },
+        { text: 'Learn about Web Components', checked: true }
+    ];
+
+    todoInputSubmiHandler(e) {
+        this.list = [...this.list, { text: e, checked: false, }];
+    }
+
+    todoItemCheckedHandler(e, i) {
+        const list = [...this.list];
+        const item = list[i];
+        list[i] = Object.assign({}, item, { checked: !item.checked });
+        this.list = list;
+    }
+
+    todoItemRemoveHandler(e, i) {
+        this.list = [...this.list.slice(0, i), ...this.list.slice(i + 1)];
+    }
+}

src/app/elements/todo/todo-input.component.ts

@@ -0,0 +1,69 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+    ViewEncapsulation
+} from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+    selector: 'todo-input',
+    template: `
+        <form [formGroup]="inputForm" (ngSubmit)="handleOnSubmit($event)">
+            <input
+                type="text"
+                placeholder="What needs to be done?"
+                formControlName="text"
+            />
+        </form>
+    `,
+    styles: [`
+        :host {
+            display: block;
+        }
+        form {
+            position: relative;
+            font-size: 24px;
+            border-bottom: 1px solid #ededed;
+        }
+        input {
+            padding: 16px 16px 16px 60px;
+            border: none;
+            background: rgba(0, 0, 0, 0.003);
+            position: relative;
+            margin: 0;
+            width: 100%;
+            font-size: 24px;
+            font-family: inherit;
+            font-weight: inherit;
+            line-height: 1.4em;
+            border: 0;
+            outline: none;
+            color: inherit;
+            padding: 6px;
+            border: 1px solid #CCC;
+            box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+            box-sizing: border-box;
+        }
+    `],
+    encapsulation: ViewEncapsulation.Native
+})
+export class TodoInput {
+    @Output() onTodoInputSubmit = new EventEmitter<string>();
+    inputForm: FormGroup;
+
+    constructor(
+        private formBuilder: FormBuilder,
+    ) {
+        this.inputForm = this.formBuilder.group({
+            'text': ['', Validators.required],
+        });
+    }
+
+    handleOnSubmit(e) {
+        if (!this.inputForm.value.text) return;
+        this.onTodoInputSubmit.emit(this.inputForm.value.text);
+        this.inputForm.reset();
+    }
+}