From c95054d9f6162c21287bef0fadcf950db63856cb Mon Sep 17 00:00:00 2001 From: Saurabh S Date: Tue, 12 Mar 2019 12:27:12 +0530 Subject: [PATCH 1/3] stable version --- package.json | 8 +- src/app/elements.module.ts | 16 +- src/app/elements.ts | 5 +- src/app/elements/todo/my-todo.component.html | 3 + src/app/elements/todo/my-todo.component.scss | 0 .../elements/todo/my-todo.component.spec.ts | 25 +++ src/app/elements/todo/my-todo.component.ts | 71 +++++++ src/app/elements/todo/todo-input.component.ts | 69 +++++++ src/app/elements/todo/todo-item.component.ts | 113 +++++++++++ src/app/elements/todo/todo.module.ts | 24 +++ src/index.html | 1 + src/main.ts | 30 +-- yarn.lock | 177 ++++++++++++++++++ 13 files changed, 519 insertions(+), 23 deletions(-) create mode 100644 src/app/elements/todo/my-todo.component.html create mode 100644 src/app/elements/todo/my-todo.component.scss create mode 100644 src/app/elements/todo/my-todo.component.spec.ts create mode 100644 src/app/elements/todo/my-todo.component.ts create mode 100644 src/app/elements/todo/todo-input.component.ts create mode 100644 src/app/elements/todo/todo-item.component.ts create mode 100644 src/app/elements/todo/todo.module.ts diff --git a/package.json b/package.json index 6075198..8954611 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/app/elements.module.ts b/src/app/elements.module.ts index 5c0172e..1a3f371 100644 --- a/src/app/elements.module.ts +++ b/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); } } diff --git a/src/app/elements.ts b/src/app/elements.ts index 7f9c643..77b288e 100644 --- a/src/app/elements.ts +++ b/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 ]; diff --git a/src/app/elements/todo/my-todo.component.html b/src/app/elements/todo/my-todo.component.html new file mode 100644 index 0000000..b6f2c75 --- /dev/null +++ b/src/app/elements/todo/my-todo.component.html @@ -0,0 +1,3 @@ +

+ nn-todo works! +

diff --git a/src/app/elements/todo/my-todo.component.scss b/src/app/elements/todo/my-todo.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/elements/todo/my-todo.component.spec.ts b/src/app/elements/todo/my-todo.component.spec.ts new file mode 100644 index 0000000..fba8ecb --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MyTodo ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MyTodo); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/elements/todo/my-todo.component.ts b/src/app/elements/todo/my-todo.component.ts new file mode 100644 index 0000000..b68c78c --- /dev/null +++ b/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: ` +

Todos Angular Elements

+
+ + +
+ `, + 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)]; + } +} diff --git a/src/app/elements/todo/todo-input.component.ts b/src/app/elements/todo/todo-input.component.ts new file mode 100644 index 0000000..c3d1e6d --- /dev/null +++ b/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: ` +
+ +
+ `, + 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(); + 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(); + } +} diff --git a/src/app/elements/todo/todo-item.component.ts b/src/app/elements/todo/todo-item.component.ts new file mode 100644 index 0000000..5dca303 --- /dev/null +++ b/src/app/elements/todo/todo-item.component.ts @@ -0,0 +1,113 @@ +import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'todo-item', + template: ` +
  • + + + +
    • + `, + styles: [` + :host { + display: block; + } + + li.item { + font-size: 24px; + display: block; + position: relative; + border-bottom: 1px solid #ededed; + } + + li.item input { + text-align: center; + width: 40px; + /* auto, since non-WebKit browsers doesn't support input styling */ + height: auto; + position: absolute; + top: 9px; + bottom: 0; + margin: auto 0; + border: none; + /* Mobile Safari */ + -webkit-appearance: none; + appearance: none; + } + + li.item input:after { + content: url('data:image/svg+xml;utf8,'); + } + + li.item input:checked:after { + content: url('data:image/svg+xml;utf8,'); + } + + li.item label { + white-space: pre; + word-break: break-word; + padding: 15px 60px 15px 15px; + margin-left: 45px; + display: block; + line-height: 1.2; + transition: color 0.4s; + } + + li.item.completed label { + color: #d9d9d9; + text-decoration: line-through; + } + + li.item button, + li.item input[type="checkbox"] { + outline: none; + } + + li.item button { + margin: 0; + padding: 0; + border: 0; + background: none; + font-size: 100%; + vertical-align: baseline; + font-family: inherit; + font-weight: inherit; + color: inherit; + -webkit-appearance: none; + appearance: none; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + font-smoothing: antialiased; + } + + li.item .destroy { + position: absolute; + top: 0; + right: 10px; + bottom: 0; + width: 40px; + height: 40px; + margin: auto 0; + font-size: 30px; + color: #cc9a9a; + margin-bottom: 11px; + transition: color 0.2s ease-out; + } + + li.item .destroy:hover { + color: #af5b5e; + } + `], + encapsulation: ViewEncapsulation.Native +}) +export class TodoItem { + @Input() checked: boolean; + @Input() text: string; + @Input() index: number; + @Output() onTodoItemChecked = new EventEmitter(); + @Output() onTodoItemRemove = new EventEmitter(); + + handleOnRemove = () => this.onTodoItemRemove.emit(this.index); + handleOnChecked = () => this.onTodoItemChecked.emit(this.index); +} diff --git a/src/app/elements/todo/todo.module.ts b/src/app/elements/todo/todo.module.ts new file mode 100644 index 0000000..3507f23 --- /dev/null +++ b/src/app/elements/todo/todo.module.ts @@ -0,0 +1,24 @@ + +import { NgModule, Injector } from '@angular/core'; +import { createCustomElement } from '@angular/elements'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { MyTodo } from './my-todo.component'; +import { TodoInput } from './todo-input.component'; +import { TodoItem } from './todo-item.component'; + +@NgModule({ + imports: [BrowserModule, FormsModule, ReactiveFormsModule], + declarations: [MyTodo, TodoInput, TodoItem], + entryComponents: [MyTodo], +}) +export class TodoModule { + constructor(private injector: Injector) {} + ngDoBootstrap() { + // const todosEl = createCustomElement(MyTodo, { + // injector: this.injector + // }); + + // customElements.define('my-todos', todosEl); + } +} diff --git a/src/index.html b/src/index.html index 22e19b6..cb8eeaa 100644 --- a/src/index.html +++ b/src/index.html @@ -13,6 +13,7 @@
    +
    diff --git a/src/main.ts b/src/main.ts index d1135a9..3c38af5 100644 --- a/src/main.ts +++ b/src/main.ts @@ -17,22 +17,22 @@ if (environment.production) { platformBrowserDynamic() .bootstrapModule(ElementsModule) .then(_ => { - const nnArt = document.querySelector('nn-art'); - const slider = document.querySelector('mat-slider'); - const input = document.querySelector('input'); - const mnist = document.querySelector('nn-mnist'); + // const nnArt = document.querySelector('nn-art'); + // const slider = document.querySelector('mat-slider'); + // const input = document.querySelector('input'); + // const mnist = document.querySelector('nn-mnist'); - slider.addEventListener('change', (ev: CustomEvent) => { - nnArt.setAttribute('num-layers', ev.detail.value); - }); - input.addEventListener('input', (ev: Event) => { - nnArt.setAttribute('activation-fn', ev.target['value']); - }); + // slider.addEventListener('change', (ev: CustomEvent) => { + // nnArt.setAttribute('num-layers', ev.detail.value); + // }); + // input.addEventListener('input', (ev: Event) => { + // nnArt.setAttribute('activation-fn', ev.target['value']); + // }); - mnist.addEventListener('predicted', (ev: CustomEvent) => { - const value = ev.detail.predicted; - nnArt.setAttribute('num-layers', value); - slider.setAttribute('value', value); - }); + // mnist.addEventListener('predicted', (ev: CustomEvent) => { + // const value = ev.detail.predicted; + // nnArt.setAttribute('num-layers', value); + // slider.setAttribute('value', value); + // }); }) .catch(err => console.log(err)); diff --git a/yarn.lock b/yarn.lock index 0095a64..3a1f0f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -467,6 +467,16 @@ ajv@^6.1.0: json-schema-traverse "^0.3.0" uri-js "^4.2.1" +ajv@^6.5.5: + version "6.10.0" + resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.0.tgz#90d0d54439da587cd7e843bfb7045f50bd22bdf1" + integrity sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg== + dependencies: + fast-deep-equal "^2.0.1" + fast-json-stable-stringify "^2.0.0" + json-schema-traverse "^0.4.1" + uri-js "^4.2.2" + ajv@~6.4.0: version "6.4.0" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.4.0.tgz#d3aff78e9277549771daf0164cff48482b754fc6" @@ -739,6 +749,11 @@ aws4@^1.2.1, aws4@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e" +aws4@^1.8.0: + version "1.8.0" + resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" + integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ== + axios@^0.15.3: version "0.15.3" resolved "https://registry.yarnpkg.com/axios/-/axios-0.15.3.tgz#2c9d638b2e191a08ea1d6cc988eadd6ba5bdc053" @@ -1477,6 +1492,13 @@ combined-stream@^1.0.5, combined-stream@~1.0.5: dependencies: delayed-stream "~1.0.0" +combined-stream@^1.0.6, combined-stream@~1.0.6: + version "1.0.7" + resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828" + integrity sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w== + dependencies: + delayed-stream "~1.0.0" + commander@2.15.x, commander@~2.15.0: version "2.15.1" resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f" @@ -2457,6 +2479,11 @@ extend@3, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444" +extend@~3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" + integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== + extglob@^0.3.1: version "0.3.2" resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1" @@ -2673,6 +2700,15 @@ form-data@~2.3.1: combined-stream "^1.0.5" mime-types "^2.1.12" +form-data@~2.3.2: + version "2.3.3" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6" + integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.6" + mime-types "^2.1.12" + forwarded@~0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84" @@ -2978,6 +3014,14 @@ har-validator@~5.0.3: ajv "^5.1.0" har-schema "^2.0.0" +har-validator@~5.1.0: + version "5.1.3" + resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080" + integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g== + dependencies: + ajv "^6.5.5" + har-schema "^2.0.0" + has-ansi@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" @@ -3838,6 +3882,11 @@ json-schema-traverse@^0.3.0: version "0.3.1" resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340" +json-schema-traverse@^0.4.1: + version "0.4.1" + resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660" + integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg== + json-schema@0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13" @@ -4373,6 +4422,11 @@ mime-db@~1.30.0: version "1.30.0" resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01" +mime-db@~1.38.0: + version "1.38.0" + resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.38.0.tgz#1a2aab16da9eb167b49c6e4df2d9c68d63d8e2ad" + integrity sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg== + mime-types@^2.1.11, mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.17, mime-types@~2.1.7: version "2.1.17" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a" @@ -4385,6 +4439,13 @@ mime-types@~2.1.18: dependencies: mime-db "~1.33.0" +mime-types@~2.1.19: + version "2.1.22" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.22.tgz#fe6b355a190926ab7698c9a0556a11199b2199bd" + integrity sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog== + dependencies: + mime-db "~1.38.0" + mime@1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6" @@ -4609,6 +4670,24 @@ node-gyp@^3.3.1: tar "^2.0.0" which "1" +node-gyp@^3.8.0: + version "3.8.0" + resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c" + integrity sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA== + dependencies: + fstream "^1.0.0" + glob "^7.0.3" + graceful-fs "^4.1.2" + mkdirp "^0.5.0" + nopt "2 || 3" + npmlog "0 || 1 || 2 || 3 || 4" + osenv "0" + request "^2.87.0" + rimraf "2" + semver "~5.3.0" + tar "^2.0.0" + which "1" + node-libs-browser@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.1.0.tgz#5f94263d404f6e44767d726901fff05478d600df" @@ -4668,6 +4747,31 @@ node-pre-gyp@^0.6.39: tar "^2.2.1" tar-pack "^3.4.0" +node-sass@^4.11.0: + version "4.11.0" + resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.11.0.tgz#183faec398e9cbe93ba43362e2768ca988a6369a" + integrity sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA== + dependencies: + async-foreach "^0.1.3" + chalk "^1.1.1" + cross-spawn "^3.0.0" + gaze "^1.0.0" + get-stdin "^4.0.1" + glob "^7.0.3" + in-publish "^2.0.0" + lodash.assign "^4.2.0" + lodash.clonedeep "^4.3.2" + lodash.mergewith "^4.6.0" + meow "^3.7.0" + mkdirp "^0.5.1" + nan "^2.10.0" + node-gyp "^3.8.0" + npmlog "^4.0.0" + request "^2.88.0" + sass-graph "^2.2.4" + stdout-stream "^1.4.0" + "true-case-path" "^1.0.2" + node-sass@^4.9.0: version "4.9.0" resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.9.0.tgz#d1b8aa855d98ed684d6848db929a20771cc2ae52" @@ -4852,6 +4956,11 @@ oauth-sign@~0.8.1, oauth-sign@~0.8.2: version "0.8.2" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43" +oauth-sign@~0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455" + integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ== + object-assign@^4.0.1, object-assign@^4.1.0: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -5386,6 +5495,11 @@ pseudomap@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" +psl@^1.1.24: + version "1.1.31" + resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.31.tgz#e9aa86d0101b5b105cbe93ac6b784cd547276184" + integrity sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw== + public-encrypt@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6" @@ -5451,6 +5565,11 @@ qs@~6.4.0: version "6.4.0" resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" +qs@~6.5.2: + version "6.5.2" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" + integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== + querystring-es3@^0.2.0, querystring-es3@~0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -5806,6 +5925,32 @@ request@^2.0.0, request@^2.74.0, request@^2.78.0: tunnel-agent "^0.6.0" uuid "^3.1.0" +request@^2.87.0, request@^2.88.0: + version "2.88.0" + resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" + integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg== + dependencies: + aws-sign2 "~0.7.0" + aws4 "^1.8.0" + caseless "~0.12.0" + combined-stream "~1.0.6" + extend "~3.0.2" + forever-agent "~0.6.1" + form-data "~2.3.2" + har-validator "~5.1.0" + http-signature "~1.2.0" + is-typedarray "~1.0.0" + isstream "~0.1.2" + json-stringify-safe "~5.0.1" + mime-types "~2.1.19" + oauth-sign "~0.9.0" + performance-now "^2.1.0" + qs "~6.5.2" + safe-buffer "^5.1.2" + tough-cookie "~2.4.3" + tunnel-agent "^0.6.0" + uuid "^3.3.2" + request@~2.79.0: version "2.79.0" resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de" @@ -5966,6 +6111,18 @@ sass-loader@^7.0.1: neo-async "^2.5.0" pify "^3.0.0" +sass-loader@^7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.1.0.tgz#16fd5138cb8b424bf8a759528a1972d72aad069d" + integrity sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w== + dependencies: + clone-deep "^2.0.1" + loader-utils "^1.0.1" + lodash.tail "^4.1.1" + neo-async "^2.5.0" + pify "^3.0.0" + semver "^5.5.0" + saucelabs@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d" @@ -6825,6 +6982,14 @@ tough-cookie@~2.3.0, tough-cookie@~2.3.3: dependencies: punycode "^1.4.1" +tough-cookie@~2.4.3: + version "2.4.3" + resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781" + integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ== + dependencies: + psl "^1.1.24" + punycode "^1.4.1" + tree-kill@^1.0.0, tree-kill@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.0.tgz#5846786237b4239014f05db156b643212d4c6f36" @@ -7058,6 +7223,13 @@ uri-js@^4.2.1: dependencies: punycode "^2.1.0" +uri-js@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0" + integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ== + dependencies: + punycode "^2.1.0" + urix@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72" @@ -7138,6 +7310,11 @@ uuid@^3.0.1: version "3.2.1" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14" +uuid@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131" + integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA== + uws@~0.14.4: version "0.14.5" resolved "https://registry.yarnpkg.com/uws/-/uws-0.14.5.tgz#67aaf33c46b2a587a5f6666d00f7691328f149dc" From f2d77844bdca492871393f130b9acb97ef5e1eba Mon Sep 17 00:00:00 2001 From: Saurabh S Date: Tue, 12 Mar 2019 12:32:53 +0530 Subject: [PATCH 2/3] update Readme to reflect the contents correctly --- README.md | 29 ++++------------------------- 1 file changed, 4 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index f41e342..43a0866 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,4 @@ -# 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. - -## 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/). - -## 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). +## Simple Todo Element +- usable whichever f/w as a web-component +- based on `https://github.com/CarmenPopoviciu/ng-elements` +- From 93cce2181bb9e01149c9ae8db6feee0b9d4e1770 Mon Sep 17 00:00:00 2001 From: Saurabh S Date: Tue, 12 Mar 2019 12:47:18 +0530 Subject: [PATCH 3/3] changes to bring original art element back --- README.md | 2 +- src/main.ts | 30 +++++++++++++++--------------- src/styles.scss | 6 ++++++ 3 files changed, 22 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index f41e342..8394f8f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# nnArt +# ng-elements Based on https://deeplearnjs.org/demos/nn-art/ diff --git a/src/main.ts b/src/main.ts index 3c38af5..d1135a9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -17,22 +17,22 @@ if (environment.production) { platformBrowserDynamic() .bootstrapModule(ElementsModule) .then(_ => { - // const nnArt = document.querySelector('nn-art'); - // const slider = document.querySelector('mat-slider'); - // const input = document.querySelector('input'); - // const mnist = document.querySelector('nn-mnist'); + const nnArt = document.querySelector('nn-art'); + const slider = document.querySelector('mat-slider'); + const input = document.querySelector('input'); + const mnist = document.querySelector('nn-mnist'); - // slider.addEventListener('change', (ev: CustomEvent) => { - // nnArt.setAttribute('num-layers', ev.detail.value); - // }); - // input.addEventListener('input', (ev: Event) => { - // nnArt.setAttribute('activation-fn', ev.target['value']); - // }); + slider.addEventListener('change', (ev: CustomEvent) => { + nnArt.setAttribute('num-layers', ev.detail.value); + }); + input.addEventListener('input', (ev: Event) => { + nnArt.setAttribute('activation-fn', ev.target['value']); + }); - // mnist.addEventListener('predicted', (ev: CustomEvent) => { - // const value = ev.detail.predicted; - // nnArt.setAttribute('num-layers', value); - // slider.setAttribute('value', value); - // }); + mnist.addEventListener('predicted', (ev: CustomEvent) => { + const value = ev.detail.predicted; + nnArt.setAttribute('num-layers', value); + slider.setAttribute('value', value); + }); }) .catch(err => console.log(err)); diff --git a/src/styles.scss b/src/styles.scss index f63ca4d..7636c97 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -28,6 +28,12 @@ mat-slider { padding: 300px 0; font-size: 2em; text-align: center; +} + +my-todos { + position: absolute; + top: 0; + z-index: 11; } /** Generic */