From 74def61d0dd032036b65c428c470d5d34b758d9e Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Mon, 13 Jul 2020 18:50:35 +1200 Subject: [PATCH 01/23] VIT-3: Better organising of the multiple themes. --- styles/_theme.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/styles/_theme.scss b/styles/_theme.scss index 5edc6a3..83f9a79 100644 --- a/styles/_theme.scss +++ b/styles/_theme.scss @@ -77,14 +77,14 @@ $hegrim-projects-theme-dark: mat-dark-theme($palette-projects-primary, $palet // Include theme styles for core and each component used in your app @include angular-material-theme($hegrim-main-theme-light); // default -.hegrim-main-theme { @include angular-material-theme($hegrim-main-theme-light); } -.hegrim-main-theme-dark { @include angular-material-theme($hegrim-main-theme-dark); } -.hegrim-time-theme { @include angular-material-theme($hegrim-time-theme-light); } -.hegrim-time-theme-dark { @include angular-material-theme($hegrim-time-theme-dark); } -.hegrim-notes-theme { @include angular-material-theme($hegrim-notes-theme-light); } -.hegrim-notes-theme-dark { @include angular-material-theme($hegrim-notes-theme-dark); } -.hegrim-projects-theme { @include angular-material-theme($hegrim-projects-theme-light); } -.hegrim-projects-theme-dark { @include angular-material-theme($hegrim-projects-theme-dark); } +.hegrim-main-theme { @include angular-material-color($hegrim-main-theme-light); } +.hegrim-main-theme-dark { @include angular-material-color($hegrim-main-theme-dark); } +.hegrim-time-theme { @include angular-material-color($hegrim-time-theme-light); } +.hegrim-time-theme-dark { @include angular-material-color($hegrim-time-theme-dark); } +.hegrim-notes-theme { @include angular-material-color($hegrim-notes-theme-light); } +.hegrim-notes-theme-dark { @include angular-material-color($hegrim-notes-theme-dark); } +.hegrim-projects-theme { @include angular-material-color($hegrim-projects-theme-light); } +.hegrim-projects-theme-dark { @include angular-material-color($hegrim-projects-theme-dark); } .hegrim-main-theme-dark, .hegrim-time-theme-dark, .hegrim-notes-theme-dark, .hegrim-projects-theme-dark { background-color: #444; color: $light-primary-text; } -- GitLab From b641c73437f81a606161f1532d0ca0fcdb4c90f8 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Mon, 13 Jul 2020 18:52:18 +1200 Subject: [PATCH 02/23] VIT-3: Re-installed dependencies (was a glitch with the from fields?). --- package-lock.json | 42 +++++++++++++++++++++--------------------- package.json | 1 - 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index e39732d..4217fb7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4622,9 +4622,9 @@ } }, "@rollup/plugin-commonjs": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-13.0.0.tgz", - "integrity": "sha512-Anxc3qgkAi7peAyesTqGYidG5GRim9jtg8xhmykNaZkImtvjA7Wsqep08D2mYsqw1IF7rA3lYfciLgzUSgRoqw==", + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-13.0.1.tgz", + "integrity": "sha512-4G08+lhTIPxp6g5eDGiwD4BKr3Pf467h+Sfhvd7kztSpZyplQv0dAtcWbGqJ9kV0ovgGo/Z6Hhl1d/q6egkl6Q==", "dev": true, "requires": { "@rollup/pluginutils": "^3.0.8", @@ -4646,18 +4646,18 @@ } }, "@rollup/plugin-node-resolve": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-8.1.0.tgz", - "integrity": "sha512-ovq7ZM3JJYUUmEjjO+H8tnUdmQmdQudJB7xruX8LFZ1W2q8jXdPUS6SsIYip8ByOApu4RR7729Am9WhCeCMiHA==", + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-8.4.0.tgz", + "integrity": "sha512-LFqKdRLn0ShtQyf6SBYO69bGE1upV6wUhBX0vFOUnLAyzx5cwp8svA0eHUnu8+YU57XOkrMtfG63QOpQx25pHQ==", "dev": true, "requires": { - "@rollup/pluginutils": "^3.0.8", - "@types/resolve": "0.0.8", + "@rollup/pluginutils": "^3.1.0", + "@types/resolve": "1.17.1", "builtin-modules": "^3.1.0", "deep-freeze": "^0.0.1", "deepmerge": "^4.2.2", "is-module": "^1.0.0", - "resolve": "^1.14.2" + "resolve": "^1.17.0" } }, "@rollup/pluginutils": { @@ -6435,9 +6435,9 @@ } }, "@types/resolve": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", - "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==", + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", + "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==", "dev": true, "requires": { "@types/node": "*" @@ -10088,9 +10088,9 @@ } }, "p-limit": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.0.1.tgz", - "integrity": "sha512-mw/p92EyOzl2MhauKodw54Rx5ZK4624rNfgNaBguFZkHzyUG9WsDzFF5/yQVEJinbJDdP4jEfMN+uBquiGnaLg==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.0.2.tgz", + "integrity": "sha512-iwqZSOoWIW+Ew4kAGUlN16J4M7OB3ysMLSZtnhmqx7njIHFPlxWBX8xo3lVTyFVq6mI/lL9qt2IsN1sHwaxJkg==", "dev": true, "requires": { "p-try": "^2.0.0" @@ -27032,9 +27032,9 @@ "dev": true }, "strip-json-comments": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz", - "integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true }, "style-loader": { @@ -28641,9 +28641,9 @@ } }, "unist-util-visit-parents": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.0.2.tgz", - "integrity": "sha512-yJEfuZtzFpQmg1OSCyS9M5NJRrln/9FbYosH3iW0MG402QbdbaB8ZESwUv9RO6nRfLAKvWcMxCwdLWOov36x/g==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.0.tgz", + "integrity": "sha512-0g4wbluTF93npyPrp/ymd3tCDTMnP0yo2akFD2FIBAYXq/Sga3lwaU1D8OYKbtpioaI6CkDcQ6fsMnmtzt7htw==", "dev": true, "requires": { "@types/unist": "^2.0.0", diff --git a/package.json b/package.json index 87535be..ed9140f 100644 --- a/package.json +++ b/package.json @@ -75,4 +75,3 @@ "not dead" ] } - -- GitLab From 2a89da04d4f8dbd9afb5e045c7d0b398153635d1 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Mon, 13 Jul 2020 18:52:54 +1200 Subject: [PATCH 03/23] VIT-3: Styles in the separate files. Default values right after the Inputs. --- components/vit-input/src/lib/vit-input.scss | 9 +++++++ .../vit-input/src/lib/vit-input.spec.ts | 0 .../vit-input/src/lib/vit-input.theme.scss | 0 components/vit-input/src/lib/vit-input.ts | 24 ++++++++----------- 4 files changed, 19 insertions(+), 14 deletions(-) create mode 100644 components/vit-input/src/lib/vit-input.scss create mode 100644 components/vit-input/src/lib/vit-input.spec.ts create mode 100644 components/vit-input/src/lib/vit-input.theme.scss diff --git a/components/vit-input/src/lib/vit-input.scss b/components/vit-input/src/lib/vit-input.scss new file mode 100644 index 0000000..5b48b59 --- /dev/null +++ b/components/vit-input/src/lib/vit-input.scss @@ -0,0 +1,9 @@ +@import '../../../../styles/_theme'; + +:host { + width: 100%; +} + +.mat-error:first-letter { + text-transform: uppercase; +} diff --git a/components/vit-input/src/lib/vit-input.spec.ts b/components/vit-input/src/lib/vit-input.spec.ts new file mode 100644 index 0000000..e69de29 diff --git a/components/vit-input/src/lib/vit-input.theme.scss b/components/vit-input/src/lib/vit-input.theme.scss new file mode 100644 index 0000000..e69de29 diff --git a/components/vit-input/src/lib/vit-input.ts b/components/vit-input/src/lib/vit-input.ts index bf5e598..cfbc9e6 100644 --- a/components/vit-input/src/lib/vit-input.ts +++ b/components/vit-input/src/lib/vit-input.ts @@ -1,27 +1,23 @@ import { Component, Input } from '@angular/core'; -import { FormGroup } from '@angular/forms'; +import { FormControl, FormGroup } from '@angular/forms'; @Component({ selector: 'vit-input', templateUrl: './vit-input.html', - styles: [':host { width: 100%; } .mat-error:first-letter { text-transform: uppercase; }'] + styleUrls: ['vit-input.scss', 'vit-input.theme.scss'] }) export class VitInputComponent { - @Input() form: FormGroup; // Parent form - @Input() controlName: string; // Control name of the Form Group - @Input() type: string; // text || email || password || number - @Input() label: string; // Placeholder and field's label - @Input() value: string | number; // Defined input value - @Input() hint: string; // Text under the input, supports HTML - @Input() disabled: boolean; // The input is disabled + @Input() form: FormGroup; // Parent form + @Input() controlName: string = 'dummy'; // Control name of the Form Group + @Input() type: string = 'text'; // text || email || password || number + @Input() label: string = ''; // Placeholder and field's label + @Input() value: string | number = ''; // Defined input value + @Input() hint: string; // Text under the input, supports HTML + @Input() disabled: boolean = false; // The input is disabled constructor() { - // Default values - this.form = this.form ? this.form : null; - this.controlName = this.controlName ? this.controlName : null; - this.type = this.type ? this.type : 'text'; - this.value = this.value ? this.value : null; + this.form = this.form ? this.form : new FormGroup({ dummy: new FormControl({ value: ''} ) }); } } -- GitLab From d41f18acf50062fe694fab5c983d5dbf3972ebb0 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 19 Jul 2020 23:39:58 +1200 Subject: [PATCH 04/23] VIT-3 (VitInput): Minor updates to the template and parameters. --- components/vit-input/src/lib/vit-input.html | 4 ++-- components/vit-input/src/lib/vit-input.module.ts | 7 +++++-- components/vit-input/src/lib/vit-input.ts | 9 ++++++--- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.html b/components/vit-input/src/lib/vit-input.html index 4481368..e69ca68 100644 --- a/components/vit-input/src/lib/vit-input.html +++ b/components/vit-input/src/lib/vit-input.html @@ -1,10 +1,10 @@ - + {{label}} - + diff --git a/components/vit-input/src/lib/vit-input.module.ts b/components/vit-input/src/lib/vit-input.module.ts index 38c4bd4..0e93334 100644 --- a/components/vit-input/src/lib/vit-input.module.ts +++ b/components/vit-input/src/lib/vit-input.module.ts @@ -1,12 +1,15 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { VitInputComponent } from './vit-input'; -import { ReactiveFormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; @NgModule({ declarations: [ VitInputComponent ], - imports: [ CommonModule, ReactiveFormsModule, MatFormFieldModule ], + imports: [ + CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule + ], exports: [ VitInputComponent ] }) export class VitInputModule { } diff --git a/components/vit-input/src/lib/vit-input.ts b/components/vit-input/src/lib/vit-input.ts index cfbc9e6..6cb0b1c 100644 --- a/components/vit-input/src/lib/vit-input.ts +++ b/components/vit-input/src/lib/vit-input.ts @@ -1,10 +1,11 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, ViewEncapsulation } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; @Component({ selector: 'vit-input', templateUrl: './vit-input.html', - styleUrls: ['vit-input.scss', 'vit-input.theme.scss'] + styleUrls: [ 'vit-input.scss', 'vit-input.theme.scss' ], + encapsulation: ViewEncapsulation.None }) export class VitInputComponent { @@ -17,7 +18,9 @@ export class VitInputComponent { @Input() disabled: boolean = false; // The input is disabled constructor() { - this.form = this.form ? this.form : new FormGroup({ dummy: new FormControl({ value: ''} ) }); + this.form = this.form ? this.form : new FormGroup({ + dummy: new FormControl({ value: '', disabled: false } ) + }); } } -- GitLab From 14f9f537ac55e09c59f301b6123dbc829d7d91d1 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 19 Jul 2020 23:40:53 +1200 Subject: [PATCH 05/23] VIT-3 (VitInput): Cleaning themes, palettes, parameters. Updating the main theme and styles. --- .storybook/preview-body.html | 5 +- stories/components/input.stories.mdx | 19 +-- styles/_palette.scss | 220 +-------------------------- styles/_theme.scss | 117 ++++++-------- styles/mat-button.scss | 14 -- styles/mat-form-field.scss | 11 -- 6 files changed, 63 insertions(+), 323 deletions(-) diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 3caafbc..139da34 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -11,7 +11,7 @@ html, #docs-root p, #docs-root table, #docs-root ul li, #docs-root ol li { line-height: 1.3; font-family: 'Roboto', sans-serif; font-size: 16px; color: #444; } - body { overflow: hidden; } + body { overflow: hidden; margin: 0; } strong { font-weight: 500; } code { color: #e00168; border-radius: 4px; } @@ -64,3 +64,6 @@ #docs-root iframe { margin-bottom: 15px; } #docs-root .sbdocs-preview > div > div > div { margin-top: 0; } + + + diff --git a/stories/components/input.stories.mdx b/stories/components/input.stories.mdx index 36ae12c..685641f 100644 --- a/stories/components/input.stories.mdx +++ b/stories/components/input.stories.mdx @@ -1,15 +1,17 @@ import { moduleMetadata } from '@storybook/angular'; import { Meta, Preview, Story } from '@storybook/addon-docs/blocks'; -import { VitInputComponent } from '../../components/vit-input/src/lib/vit-input'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatInputModule } from '@angular/material/input'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MatInputModule } from '@angular/material/input'; +import { MatFormFieldModule } from '@angular/material/form-field'; + +import { VitInputComponent } from '../../components/vit-input/src/lib/vit-input'; + @@ -32,16 +34,11 @@ Form input field. ### Examples #### Text -Text input field: no value, with label, with hint, invalid and disabled. +Text input field: no value, with the label and hint, invalid and disabled. {{ - template: `
-
-
-
-
-
` + template: `` }} diff --git a/styles/_palette.scss b/styles/_palette.scss index 6e1cae8..a1f7cf8 100644 --- a/styles/_palette.scss +++ b/styles/_palette.scss @@ -1,224 +1,11 @@ /** * CUSTOM COLOUR PALETTE * - * 1| Hegrim Main - * 2| Hegrim Time - * 3| Hegrim Notes - * 4| Hegrim Projects - * */ -// 1| HEGRIM MAIN - -@function hegrim-gold() { @return ( - 50 : #fbf3e0, - 100 : #f5e2b3, - 200 : #eecf80, - 300 : #e7bb4d, - 400 : #e2ad26, - 500 : #dd9e00, - 600 : #d99600, - 700 : #d48c00, - 800 : #cf8200, - 900 : #c77000, - A100 : #fff7ef, - A200 : #ffdebc, - A400 : #ffc589, - A700 : #ffb86f, - contrast: ( - 50 : $dark-primary-text, - 100 : $dark-primary-text, - 200 : $dark-primary-text, - 300 : $dark-primary-text, - 400 : $dark-primary-text, - 500 : $light-primary-text, - 600 : $light-primary-text, - 700 : $light-primary-text, - 800 : $light-primary-text, - 900 : $light-primary-text, - A100 : $dark-primary-text, - A200 : $dark-primary-text, - A400 : $dark-primary-text, - A700 : $dark-primary-text - ) -)}; - -@function hegrim-emerald() { @return ( - 50 : #e3f1ee, - 100 : #b9ddd5, - 200 : #8ac7b9, - 300 : #5bb09d, - 400 : #379f88, - 500 : #148e73, - 600 : #12866b, - 700 : #0e7b60, - 800 : #0b7156, - 900 : #065f43, - A100 : #91ffd7, - A200 : #5effc5, - A400 : #2bffb3, - A700 : #11ffa9, - contrast: ( - 50 : $dark-primary-text, - 100 : $dark-primary-text, - 200 : $dark-primary-text, - 300 : $dark-primary-text, - 400 : $light-primary-text, - 500 : $light-primary-text, - 600 : $light-primary-text, - 700 : $light-primary-text, - 800 : $light-primary-text, - 900 : $light-primary-text, - A100 : $dark-primary-text, - A200 : $dark-primary-text, - A400 : $dark-primary-text, - A700 : $dark-primary-text - ) -)}; - - -// 2| HEGRIM TIME - -@function hegrim-orange() { @return ( - 50 : #faeae0, - 100 : #f2cab3, - 200 : #eaa780, - 300 : #e2834d, - 400 : #db6926, - 500 : #d54e00, - 600 : #d04700, - 700 : #ca3d00, - 800 : #c43500, - 900 : #ba2500, - A100 : #ffe7e3, - A200 : #ffbab0, - A400 : #ff8e7d, - A700 : #ff7863, - contrast: ( - 50 : $dark-primary-text, - 100 : $dark-primary-text, - 200 : $dark-primary-text, - 300 : $dark-primary-text, - 400 : $dark-primary-text, - 500 : $light-primary-text, - 600 : $light-primary-text, - 700 : $light-primary-text, - 800 : $light-primary-text, - 900 : $light-primary-text, - A100 : $dark-primary-text, - A200 : $dark-primary-text, - A400 : $dark-primary-text, - A700 : $dark-primary-text - ) -)}; - -@function hegrim-purple() { @return ( - 50 : #efe0f5, - 100 : #d6b3e5, - 200 : #bb80d4, - 300 : #9f4dc2, - 400 : #8b26b5, - 500 : #7600a8, - 600 : #6e00a0, - 700 : #630097, - 800 : #59008d, - 900 : #46007d, - A100 : #d4aaff, - A200 : #ba77ff, - A400 : #a044ff, - A700 : #932aff, - contrast: ( - 50 : $dark-primary-text, - 100 : $dark-primary-text, - 200 : $dark-primary-text, - 300 : $light-primary-text, - 400 : $light-primary-text, - 500 : $light-primary-text, - 600 : $light-primary-text, - 700 : $light-primary-text, - 800 : $light-primary-text, - 900 : $light-primary-text, - A100 : $dark-primary-text, - A200 : $dark-primary-text, - A400 : $dark-primary-text, - A700 : $dark-primary-text - ) -)}; - - -// 3| HEGRIM NOTES - -@function hegrim-green() { @return ( - 50 : #f0f5e0, - 100 : #d8e5b3, - 200 : #bfd480, - 300 : #a5c24d, - 400 : #91b526, - 500 : #7ea800, - 600 : #76a000, - 700 : #6b9700, - 800 : #618d00, - 900 : #4e7d00, - A100 : #daffaa, - A200 : #c4ff77, - A400 : #adff44, - A700 : #a2ff2a, - contrast: ( - 50 : $dark-primary-text, - 100 : $dark-primary-text, - 200 : $dark-primary-text, - 300 : $dark-primary-text, - 400 : $dark-primary-text, - 500 : $light-primary-text, - 600 : $light-primary-text, - 700 : $light-primary-text, - 800 : $light-primary-text, - 900 : $light-primary-text, - A100 : $dark-primary-text, - A200 : $dark-primary-text, - A400 : $dark-primary-text, - A700 : $dark-primary-text - ) -)}; - -@function hegrim-vinous() { @return ( - 50 : #f5e5e0, - 100 : #e7beb3, - 200 : #d79380, - 300 : #c6674d, - 400 : #ba4726, - 500 : #ae2600, - 600 : #a72200, - 700 : #9d1c00, - 800 : #941700, - 900 : #840d00, - A100 : #ffb4b1, - A200 : #ff837e, - A400 : #ff524b, - A700 : #ff3a31, - contrast: ( - 50 : $dark-primary-text, - 100 : $dark-primary-text, - 200 : $dark-primary-text, - 300 : $dark-primary-text, - 400 : $light-primary-text, - 500 : $light-primary-text, - 600 : $light-primary-text, - 700 : $light-primary-text, - 800 : $light-primary-text, - 900 : $light-primary-text, - A100 : $dark-primary-text, - A200 : $dark-primary-text, - A400 : $dark-primary-text, - A700 : $light-primary-text - ) -)}; - - -// 4| HEGRIM PROJECTS - -@function hegrim-blue() { @return ( +// Primary +@function primary-blue() { @return ( 50 : #e0ecf5, 100 : #b3d0e5, 200 : #80b1d4, @@ -251,7 +38,8 @@ ) )}; -@function hegrim-magenta() { @return ( +// Accent +@function accent-magenta() { @return ( 50 : #f5e0f5, 100 : #e7b3e7, 200 : #d780d7, diff --git a/styles/_theme.scss b/styles/_theme.scss index 83f9a79..95e31f9 100644 --- a/styles/_theme.scss +++ b/styles/_theme.scss @@ -18,85 +18,62 @@ * 1| PALETTE and COLORS */ +// Palettes @import "palette"; - -// Hegrim Main -$palette-main-primary: mat-palette(hegrim-gold()); -$palette-main-accent: mat-palette(hegrim-emerald()); -$color-main-primary: mat-color($palette-main-primary, 500); -$color-main-accent: mat-color($palette-main-accent, 500); - -// Hegrim Time -$palette-time-primary: mat-palette(hegrim-orange()); -$palette-time-accent: mat-palette(hegrim-purple()); -$color-time-primary: mat-color($palette-time-primary, 500); -$color-time-accent: mat-color($palette-time-accent, 500); - -// Hegrim Notes -$palette-notes-primary: mat-palette(hegrim-green()); -$palette-notes-accent: mat-palette(hegrim-vinous()); -$color-notes-primary: mat-color($palette-notes-primary, 500); -$color-notes-accent: mat-color($palette-notes-accent, 500); - -// Hegrim Sites -$palette-projects-primary: mat-palette(hegrim-blue()); -$palette-projects-accent: mat-palette(hegrim-magenta()); -$color-projects-primary: mat-color($palette-projects-primary, 500); -$color-projects-accent: mat-color($palette-projects-accent, 500); - -// Common -$palette-warn: mat-palette($mat-red); -$color-gray: #44444a; -$color-gray-light: #d1d1d1; - -// Shade colours -$color-background: #f5f5f5; -$color-text: #444; -$color-panel-dark: #808080; -$color-panel-light: #fff; +$palette-primary: mat-palette(primary-blue()); +$palette-accent: mat-palette(accent-magenta()); +$palette-warn: mat-palette($mat-red); + +// Main colors +$color-primary: mat-color($palette-primary, 500); +$color-accent: mat-color($palette-accent, 500); + +// Background and text +$color-background: hsl(0, 0%, 100%); +$color-text: hsl(0, 0%, 27%); +$color-panel: hsl(240, 13%, 91%); +$color-panel-block: hsl(240, 18%, 89%); +// Night +$color-background-night: hsl(228, 4%, 23%); +$color-text-night: hsl(0, 0%, 100%); +$color-panel-night: hsl(225, 3%, 29%); +$color-panel-block-night: hsl(225, 3%, 27%); + +// Shades +$color-gray: hsl(240, 4%, 28%); +$color-gray-light: hsl(0, 0%, 82%); // Action colours -$color-success: #86b200; -$color-warning: #f03900; +$color-success: hsl(75, 100%, 35%); +$color-warning: hsl(14, 100%, 47%); $color-failure: mat-color($palette-warn, 500); -$color-disabled: #d1d1d1; +$color-disabled: hsl(0, 0%, 82%); /** * 2| THEMES */ -$hegrim-main-theme-light: mat-light-theme($palette-main-primary, $palette-main-accent, $palette-warn); -$hegrim-main-theme-dark: mat-dark-theme($palette-main-primary, $palette-main-accent, $palette-warn); -$hegrim-time-theme-light: mat-light-theme($palette-time-primary, $palette-time-accent, $palette-warn); -$hegrim-time-theme-dark: mat-dark-theme($palette-time-primary, $palette-time-accent, $palette-warn); -$hegrim-notes-theme-light: mat-light-theme($palette-notes-primary, $palette-notes-accent, $palette-warn); -$hegrim-notes-theme-dark: mat-dark-theme($palette-notes-primary, $palette-notes-accent, $palette-warn); -$hegrim-projects-theme-light: mat-light-theme($palette-projects-primary, $palette-projects-accent, $palette-warn); -$hegrim-projects-theme-dark: mat-dark-theme($palette-projects-primary, $palette-projects-accent, $palette-warn); +$theme-light: mat-light-theme($palette-primary, $palette-accent, $palette-warn); +$theme-dark: mat-dark-theme($palette-primary, $palette-accent, $palette-warn); + +// TODO: Check why doesn't work +// Include custom background +$background: map-get($theme-light, background); +$background: map_merge($background, (background: $color-background)); +$theme: map_merge($theme-light, (background: $background)); + +// Include custom night background +$background-night: map-get($theme-dark, background); +$background-night: map_merge($background-night, (background: $color-background-night)); +$theme: map_merge($theme-dark, (background: $background-night)); // Include theme styles for core and each component used in your app -@include angular-material-theme($hegrim-main-theme-light); // default -.hegrim-main-theme { @include angular-material-color($hegrim-main-theme-light); } -.hegrim-main-theme-dark { @include angular-material-color($hegrim-main-theme-dark); } -.hegrim-time-theme { @include angular-material-color($hegrim-time-theme-light); } -.hegrim-time-theme-dark { @include angular-material-color($hegrim-time-theme-dark); } -.hegrim-notes-theme { @include angular-material-color($hegrim-notes-theme-light); } -.hegrim-notes-theme-dark { @include angular-material-color($hegrim-notes-theme-dark); } -.hegrim-projects-theme { @include angular-material-color($hegrim-projects-theme-light); } -.hegrim-projects-theme-dark { @include angular-material-color($hegrim-projects-theme-dark); } -.hegrim-main-theme-dark, .hegrim-time-theme-dark, .hegrim-notes-theme-dark, .hegrim-projects-theme-dark { - background-color: #444; color: $light-primary-text; +@include angular-material-theme($theme-light); // default +.night { + @include angular-material-color($theme-dark); } -// Array of theme objects -$themes: ( - ( main #dd9e00 #148e73 ) - ( time #d54e00 #7600a8 ) - ( notes #7ea800 #ae2600 ) - ( projects #0062a8 #ae00ae ) -); - /** * 3| FONTS @@ -116,11 +93,11 @@ $hegrim-typography: mat-typography-config( /* * 4| DEVICE BREAKPOINTS */ -@mixin for-phone-only { @media (max-width: 600px) { @content; } } -@mixin for-tablet-portrait-up { @media (min-width: 600px) { @content; } } -@mixin for-tablet-landscape-up { @media (min-width: 900px) { @content; } } -@mixin for-desktop-up { @media (min-width: 1200px) { @content; } } -@mixin for-big-desktop-up { @media (min-width: 1800px) { @content; } } +@mixin for-phone-only { @media (max-width: 600px) { @content; } } +@mixin for-tablet-portrait-up { @media (min-width: 600px) { @content; } } +@mixin for-tablet-landscape-up { @media (min-width: 900px) { @content; } } +@mixin for-desktop-up { @media (min-width: 1200px) { @content; } } +@mixin for-big-desktop-up { @media (min-width: 1800px) { @content; } } /** diff --git a/styles/mat-button.scss b/styles/mat-button.scss index 09f511d..715ae35 100644 --- a/styles/mat-button.scss +++ b/styles/mat-button.scss @@ -21,20 +21,6 @@ button { // Loading .mat-button-base.loading .mat-button-wrapper { opacity: 0; } -/* - * Disabled button color - */ -/* -@each $name, $color-primary in $themes { - .hegrim-name-theme, .hegrim-name-theme-dark { - .mat-primary.mat-flat-button[disabled][disabled] { - background-color: transparentize($color-primary,.8); - color: $light-primary-text; - } - } -} -*/ - /* * Dark background */ diff --git a/styles/mat-form-field.scss b/styles/mat-form-field.scss index cec606a..52a857b 100644 --- a/styles/mat-form-field.scss +++ b/styles/mat-form-field.scss @@ -43,14 +43,3 @@ } } - -/* - * Focused input color based on the current theme - */ -@each $name, $color-primary in $themes { - .hegrim-#{$name}-theme, .hegrim-#{$name}-theme-dark { - .mat-form-field.mat-focused .mat-form-field-flex { - background-color: transparentize($color-primary,.9); - } - } -} -- GitLab From deb33fc7310f97d4442f1f35eb4ec6f2b5407d1c Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 2 Aug 2020 11:58:10 +1200 Subject: [PATCH 06/23] VIT-3 (VitInput): Specified the custom background everywhere. --- .storybook/preview-body.html | 18 ++++++++++++++---- stories/components/logo.stories.mdx | 2 +- styles/_theme.scss | 5 ++--- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 139da34..c7bc24f 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -39,10 +39,18 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #docs-root h4 { color: #444; font-size: 22px; font-weight: 500; } - #docs-root .sbdocs-content > p + h2:first-of-type, #docs-root .sbdocs-content > p + h3:first-of-type, #docs-root .sbdocs-content > p + h4:first-of-type, - #docs-root .sbdocs-content > ol + h2:first-of-type, #docs-root .sbdocs-content > ol + h3:first-of-type, #docs-root .sbdocs-content > ol + h4:first-of-type, - #docs-root .sbdocs-content > ul + h2:first-of-type, #docs-root .sbdocs-content > ul + h3:first-of-type, #docs-root .sbdocs-content > ul + h4:first-of-type, - #docs-root .sbdocs-content > table + #docs-root .sbdocs-content > h2:first-of-type, #docs-root .sbdocs-content > table + h3:first-of-type, #docs-root .sbdocs-content > table + h4:first-of-type { + #docs-root .sbdocs-content > p + h2:first-of-type, + #docs-root .sbdocs-content > p + h3:first-of-type, + #docs-root .sbdocs-content > p + h4:first-of-type, + #docs-root .sbdocs-content > ol + h2:first-of-type, + #docs-root .sbdocs-content > ol + h3:first-of-type, + #docs-root .sbdocs-content > ol + h4:first-of-type, + #docs-root .sbdocs-content > ul + h2:first-of-type, + #docs-root .sbdocs-content > ul + h3:first-of-type, + #docs-root .sbdocs-content > ul + h4:first-of-type, + #docs-root .sbdocs-content > table + #docs-root .sbdocs-content > h2:first-of-type, + #docs-root .sbdocs-content > table + h3:first-of-type, + #docs-root .sbdocs-content > table + h4:first-of-type { margin-top: 60px; } @@ -62,7 +70,9 @@ /* Components preview */ #docs-root iframe { margin-bottom: 15px; } + #docs-root .sbdocs-preview > div > div { padding: 0; } #docs-root .sbdocs-preview > div > div > div { margin-top: 0; } + #root { padding: 5px 15px; } diff --git a/stories/components/logo.stories.mdx b/stories/components/logo.stories.mdx index e1bf6db..7ff15d3 100644 --- a/stories/components/logo.stories.mdx +++ b/stories/components/logo.stories.mdx @@ -34,7 +34,7 @@ Interactive logo. Behaves like a light button. #### Full size Default full-size logo. Min size: 400px. Max size: 50% of the screen. - + {{ template: `` diff --git a/styles/_theme.scss b/styles/_theme.scss index 95e31f9..569b433 100644 --- a/styles/_theme.scss +++ b/styles/_theme.scss @@ -57,16 +57,15 @@ $color-disabled: hsl(0, 0%, 82%); $theme-light: mat-light-theme($palette-primary, $palette-accent, $palette-warn); $theme-dark: mat-dark-theme($palette-primary, $palette-accent, $palette-warn); -// TODO: Check why doesn't work // Include custom background $background: map-get($theme-light, background); $background: map_merge($background, (background: $color-background)); -$theme: map_merge($theme-light, (background: $background)); +$theme-light: map_merge($theme-light, (background: $background)); // Include custom night background $background-night: map-get($theme-dark, background); $background-night: map_merge($background-night, (background: $color-background-night)); -$theme: map_merge($theme-dark, (background: $background-night)); +$theme-dark: map_merge($theme-dark, (background: $background-night)); // Include theme styles for core and each component used in your app @include angular-material-theme($theme-light); // default -- GitLab From 92a0b6d431ed0302950f243300eda15559c0e8f7 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Tue, 4 Aug 2020 22:11:06 +1200 Subject: [PATCH 07/23] VIT-3 (VitInput): Removed the custom form field styles as a part of the theme. --- styles/_theme.scss | 5 ++--- styles/mat-form-field.scss | 45 -------------------------------------- 2 files changed, 2 insertions(+), 48 deletions(-) delete mode 100644 styles/mat-form-field.scss diff --git a/styles/_theme.scss b/styles/_theme.scss index 569b433..0ed05e7 100644 --- a/styles/_theme.scss +++ b/styles/_theme.scss @@ -6,7 +6,7 @@ * 3| Fonts * 4| Device breakpoints * 5| Main parameters - * 6| Form elements + * 6| Custom elements * */ @@ -115,9 +115,8 @@ $animationBouncing: cubic-bezier(.5,-.5,.5,1.5); /** - * 6| FORM ELEMENTS + * 6| CUSTOM ELEMENTS */ @import 'mat-button'; -@import 'mat-form-field'; @import 'scrollbar'; diff --git a/styles/mat-form-field.scss b/styles/mat-form-field.scss deleted file mode 100644 index 52a857b..0000000 --- a/styles/mat-form-field.scss +++ /dev/null @@ -1,45 +0,0 @@ -/** - * ANGULAR MATERIAL - FORM FIELD - * - */ - -.mat-form-field { - margin: .9em .5em 0 0; width: 100%; - &:last-child { margin-right: 0; } - &.mat-form-field-appearance-fill { - - // Focused - &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { - transform: translateY(-1.6em) scale(.75); - } - - // Error - &.mat-form-field-invalid { - .mat-form-field-flex { background-color: transparentize($color-warning,.9); } - } - - .mat-form-field-label-wrapper { - top: -1em; padding-top: 1.2em; - .mat-form-field-label { - top: initial; margin: .3em 0 0 .25em; - } - } - .mat-form-field-flex { - padding: .1em .75em 0 .75em; border-radius: 18px; transition: background-color .1s ease-in-out; - .mat-form-field-infix { - padding: .6em .25em .7em; border-top: 0.1em solid transparent; - } - } - .mat-form-field-underline { display: none; } - - // Hints and Errors - .mat-form-field-wrapper { - padding-bottom: 1em; transition: padding-bottom .2s ease-in-out; - .mat-form-field-subscript-wrapper { margin-top: .5em; text-align: right; - .mat-hint, .mat-error { margin-top: 3px; } - .mat-hint { width: calc(100% + 1em); margin-right: -1em; } - } - } - - } -} -- GitLab From 6eb170b8533d340534e0f5218bca4710d86a06a1 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Tue, 4 Aug 2020 22:33:03 +1200 Subject: [PATCH 08/23] VIT-3 (VitInput): Updated inputs, story, styles. --- components/vit-input/src/lib/vit-input.html | 7 +-- components/vit-input/src/lib/vit-input.scss | 54 ++++++++++++++++++++- components/vit-input/src/lib/vit-input.ts | 18 ++++--- stories/components/input.stories.mdx | 5 +- 4 files changed, 71 insertions(+), 13 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.html b/components/vit-input/src/lib/vit-input.html index e69ca68..53fa361 100644 --- a/components/vit-input/src/lib/vit-input.html +++ b/components/vit-input/src/lib/vit-input.html @@ -1,4 +1,4 @@ - + {{label}} @@ -10,7 +10,8 @@ - {{type}} is required - Invalid {{type}} + {{type}} is required + Invalid {{type}} + {{errorText}} diff --git a/components/vit-input/src/lib/vit-input.scss b/components/vit-input/src/lib/vit-input.scss index 5b48b59..e2b3142 100644 --- a/components/vit-input/src/lib/vit-input.scss +++ b/components/vit-input/src/lib/vit-input.scss @@ -1,7 +1,57 @@ @import '../../../../styles/_theme'; -:host { - width: 100%; +:host, vit-input { + display: inline-block; margin: $paddingMain $paddingMain 0 0; +} + +.mat-form-field { + width: 200px; + &.mat-form-field-appearance-fill { + + .mat-form-field-label-wrapper { + top: -1em; padding-top: 1.2em; + .mat-form-field-label { + top: initial; margin: .3em 0 0 .25em; + } + } + .mat-form-field-flex { + padding: .1em .75em 0 .75em; border-radius: 18px; + background-color: transparentize($color-primary, .9); + transition: background-color .1s ease-in-out; + .mat-form-field-infix { + padding: .6em .25em .7em; border-top: 0.1em solid transparent; + } + } + .mat-form-field-underline { display: none; } + + // Hover + &:hover .mat-form-field-flex { + background-color: transparentize($color-primary, .88); + } + + // Focused + &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { + transform: translateY(-1.6em) scale(.75); + } + &.mat-focused .mat-form-field-flex { + background-color: transparentize($color-primary, .8); + } + + // Hints and Errors + .mat-form-field-wrapper { + padding-bottom: 1em; transition: padding-bottom .2s ease-in-out; + .mat-form-field-subscript-wrapper { margin-top: .5em; text-align: right; + .mat-hint, .mat-error { margin-top: 3px; } + .mat-hint { width: calc(100% + 1em); margin-right: -1em; } + } + } + + // Error + &.mat-form-field-invalid { + .mat-form-field-flex { background-color: transparentize($color-warning,.9); } + } + + } } .mat-error:first-letter { diff --git a/components/vit-input/src/lib/vit-input.ts b/components/vit-input/src/lib/vit-input.ts index 6cb0b1c..600a759 100644 --- a/components/vit-input/src/lib/vit-input.ts +++ b/components/vit-input/src/lib/vit-input.ts @@ -1,4 +1,4 @@ -import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { Component, Input, OnChanges, ViewEncapsulation } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; @Component({ @@ -7,20 +7,26 @@ import { FormControl, FormGroup } from '@angular/forms'; styleUrls: [ 'vit-input.scss', 'vit-input.theme.scss' ], encapsulation: ViewEncapsulation.None }) -export class VitInputComponent { +export class VitInputComponent implements OnChanges { - @Input() form: FormGroup; // Parent form + @Input() formGroup: FormGroup; // Parent form @Input() controlName: string = 'dummy'; // Control name of the Form Group @Input() type: string = 'text'; // text || email || password || number @Input() label: string = ''; // Placeholder and field's label @Input() value: string | number = ''; // Defined input value @Input() hint: string; // Text under the input, supports HTML + @Input() errorText: string; // Custom error message instead of standard ones @Input() disabled: boolean = false; // The input is disabled + @Input() setWidth: string; // Specify the custom width - constructor() { - this.form = this.form ? this.form : new FormGroup({ - dummy: new FormControl({ value: '', disabled: false } ) + constructor() { } + + ngOnChanges() { + this.formGroup = this.formGroup ? this.formGroup : new FormGroup({ + dummy: new FormControl({ value: '', disabled: false }) }); + this.controlName = this.controlName ? this.controlName : 'dummy'; + console.log('formGroup:', this.formGroup); } } diff --git a/stories/components/input.stories.mdx b/stories/components/input.stories.mdx index 685641f..d3d3b8b 100644 --- a/stories/components/input.stories.mdx +++ b/stories/components/input.stories.mdx @@ -36,9 +36,10 @@ Form input field. #### Text Text input field: no value, with the label and hint, invalid and disabled. - + {{ - template: `` + template: ` + ` }} -- GitLab From 9801672d2399800f7f59680eed6a95283ad7b7e6 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 9 Aug 2020 20:22:27 +1200 Subject: [PATCH 09/23] VIT-3 (VitInput): Added notification global colour. --- components/vit-input/src/lib/vit-input.module.ts | 7 +++++-- styles/_theme.scss | 1 + 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.module.ts b/components/vit-input/src/lib/vit-input.module.ts index 0e93334..b60148f 100644 --- a/components/vit-input/src/lib/vit-input.module.ts +++ b/components/vit-input/src/lib/vit-input.module.ts @@ -2,13 +2,16 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { VitInputComponent } from './vit-input'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatInputModule } from '@angular/material/input'; +import { MatButtonModule } from '@angular/material/button'; import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; @NgModule({ declarations: [ VitInputComponent ], imports: [ - CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule + CommonModule, FormsModule, ReactiveFormsModule, + MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule ], exports: [ VitInputComponent ] }) diff --git a/styles/_theme.scss b/styles/_theme.scss index 0ed05e7..1fe42e8 100644 --- a/styles/_theme.scss +++ b/styles/_theme.scss @@ -45,6 +45,7 @@ $color-gray-light: hsl(0, 0%, 82%); // Action colours $color-success: hsl(75, 100%, 35%); +$color-notify: hsl(46, 100%, 48%); $color-warning: hsl(14, 100%, 47%); $color-failure: mat-color($palette-warn, 500); $color-disabled: hsl(0, 0%, 82%); -- GitLab From 9f8c9dd79a1f2f27d68eeb95451e674274641623 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 9 Aug 2020 20:22:46 +1200 Subject: [PATCH 10/23] VIT-3 (VitInput): Refactored and updated styles. --- components/vit-input/src/lib/vit-input.scss | 97 +++++++++++++++------ 1 file changed, 71 insertions(+), 26 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.scss b/components/vit-input/src/lib/vit-input.scss index e2b3142..c61aa4f 100644 --- a/components/vit-input/src/lib/vit-input.scss +++ b/components/vit-input/src/lib/vit-input.scss @@ -1,13 +1,15 @@ @import '../../../../styles/_theme'; +// Root wrapper :host, vit-input { display: inline-block; margin: $paddingMain $paddingMain 0 0; } +// Main styles .mat-form-field { width: 200px; + // Overriding the default styles &.mat-form-field-appearance-fill { - .mat-form-field-label-wrapper { top: -1em; padding-top: 1.2em; .mat-form-field-label { @@ -23,37 +25,80 @@ } } .mat-form-field-underline { display: none; } + } +} - // Hover - &:hover .mat-form-field-flex { - background-color: transparentize($color-primary, .88); - } - - // Focused - &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { - transform: translateY(-1.6em) scale(.75); - } - &.mat-focused .mat-form-field-flex { - background-color: transparentize($color-primary, .8); - } +// Hover and focus +.mat-form-field.mat-form-field-appearance-fill { + // Hover + &:hover .mat-form-field-flex { + background-color: transparentize($color-primary, .88); + } + // Focused + &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { + font-weight: 500; transform: translateY(-1.6em) scale(.75); + } + &.mat-focused .mat-form-field-flex { + background-color: transparentize($color-primary, .8); + } +} - // Hints and Errors - .mat-form-field-wrapper { - padding-bottom: 1em; transition: padding-bottom .2s ease-in-out; - .mat-form-field-subscript-wrapper { margin-top: .5em; text-align: right; - .mat-hint, .mat-error { margin-top: 3px; } - .mat-hint { width: calc(100% + 1em); margin-right: -1em; } - } - } +// Disabled +.mat-form-field.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex { + background-color: transparentize($color-primary, .95); +} - // Error - &.mat-form-field-invalid { - .mat-form-field-flex { background-color: transparentize($color-warning,.9); } +// Hints and Errors +.mat-form-field.mat-form-field-appearance-fill { + .mat-form-field-wrapper { + padding-bottom: 1em; transition: padding-bottom .2s ease-in-out; + .mat-form-field-subscript-wrapper { margin-top: .5em; text-align: right; + .mat-hint, .mat-error { margin-top: 3px; } + .mat-hint { width: calc(100% + 1em); margin-right: -1em; } } - + } + // Error + &.mat-form-field-invalid { + .mat-form-field-flex { background-color: transparentize($color-warning,.9); } } } - .mat-error:first-letter { text-transform: uppercase; } + +// Suffix +.mat-form-field-suffix { + margin-top: -15px; +} + +// Clear button +.reset { + transform: scale(.75) translateY(8px); +} + +// Autocomplete +.mat-form-field-autofilled .mat-form-field-flex { + box-shadow: 0 0 2px 2px transparentize($color-notify, .7) inset; +} +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus { + transition: background-color 5000s ease-in-out 0s; +} + +// Textarea +textarea { + @extend .scrollbar-container; +} + +// Color selector +.mat-form-field.mat-form-field-appearance-fill .mat-input-element { + position: relative; height: 30px; + margin-bottom: -11px; top: -6px; +} -- GitLab From fb34dbf0e5f41cd26b20933ccbaf1f371e138615 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 9 Aug 2020 20:23:17 +1200 Subject: [PATCH 11/23] VIT-3 (VitInput): Added textarea. Added other input types. Added clear button. --- components/vit-input/src/lib/vit-input.html | 20 +++++-- components/vit-input/src/lib/vit-input.ts | 62 ++++++++++++++++++--- 2 files changed, 70 insertions(+), 12 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.html b/components/vit-input/src/lib/vit-input.html index 53fa361..97e1b06 100644 --- a/components/vit-input/src/lib/vit-input.html +++ b/components/vit-input/src/lib/vit-input.html @@ -1,17 +1,29 @@ - + {{label}} - + + + + + + + - {{type}} is required - Invalid {{type}} + {{type}} is required + Invalid {{type}} {{errorText}} diff --git a/components/vit-input/src/lib/vit-input.ts b/components/vit-input/src/lib/vit-input.ts index 600a759..1ed97d4 100644 --- a/components/vit-input/src/lib/vit-input.ts +++ b/components/vit-input/src/lib/vit-input.ts @@ -1,5 +1,5 @@ -import { Component, Input, OnChanges, ViewEncapsulation } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; +import { Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'vit-input', @@ -7,7 +7,7 @@ import { FormControl, FormGroup } from '@angular/forms'; styleUrls: [ 'vit-input.scss', 'vit-input.theme.scss' ], encapsulation: ViewEncapsulation.None }) -export class VitInputComponent implements OnChanges { +export class VitInputComponent implements OnInit, OnChanges { @Input() formGroup: FormGroup; // Parent form @Input() controlName: string = 'dummy'; // Control name of the Form Group @@ -16,17 +16,63 @@ export class VitInputComponent implements OnChanges { @Input() value: string | number = ''; // Defined input value @Input() hint: string; // Text under the input, supports HTML @Input() errorText: string; // Custom error message instead of standard ones + @Input() required: boolean = false; // The input is required @Input() disabled: boolean = false; // The input is disabled + @Input() clearButton: boolean = false; // Show the clear button to reset the entered value @Input() setWidth: string; // Specify the custom width + @Input() autosize: boolean = true; // Autosize for the textarea + @Input() minRows: number = 1; // Minimal number of rows for the textarea + @Input() maxRows: number = 5; // Maximum number of rows for the textarea - constructor() { } - - ngOnChanges() { + constructor() { + // Generate a dummy form if not defined this.formGroup = this.formGroup ? this.formGroup : new FormGroup({ - dummy: new FormControl({ value: '', disabled: false }) + dummy: new FormControl({ value: '', disabled: this.disabled }) }); this.controlName = this.controlName ? this.controlName : 'dummy'; - console.log('formGroup:', this.formGroup); + } + + ngOnInit() { + // Rules for the various field types + if (this.type === 'email') { + this.formGroup.get('dummy').setValidators([ Validators.email ]); + } + else if (this.type === 'url') { + const urlRegex: string = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?'; + this.formGroup.get('dummy').setValidators([ Validators.pattern(urlRegex) ]); + } + else if (this.type === 'search') { + this.clearButton = true; + } + else if (this.type === 'date' && !this.setWidth) { + this.setWidth = '180px'; + } + else if (this.type === 'time' && !this.setWidth) { + this.setWidth = '105px'; + } + else if (this.type === 'color' && !this.setWidth) { + this.setWidth = '80px'; + } + else if (this.type === 'textarea' && !this.setWidth) { + this.setWidth = '400px'; + } + } + + ngOnChanges() { + console.log(this.value); + console.log(this.clearButton); + // Disabled + if (this.disabled) { + this.formGroup.get('dummy').disable(); + } + // Required + if (this.required) { + this.formGroup.get('dummy').setValidators([ Validators.required ]); + } + // Clear button + if (this.value && this.clearButton) { + this.clearButton = true; + } } } -- GitLab From b9ea065b3635850312f4abd00ef96be74787bc9e Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 9 Aug 2020 20:23:34 +1200 Subject: [PATCH 12/23] VIT-3 (VitInput): Added simple base unit-tests. --- .../vit-input/src/lib/vit-input.spec.ts | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/components/vit-input/src/lib/vit-input.spec.ts b/components/vit-input/src/lib/vit-input.spec.ts index e69de29..6a0c964 100644 --- a/components/vit-input/src/lib/vit-input.spec.ts +++ b/components/vit-input/src/lib/vit-input.spec.ts @@ -0,0 +1,61 @@ +import { createComponentFactory, Spectator, SpectatorFactory } from '@ngneat/spectator/jest'; +import { VitInputComponent } from './vit-input'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { CommonModule } from '@angular/common'; +import { MatInputModule } from '@angular/material/input'; + +describe('VitMenuComponent', () => { + let spectator: Spectator; + const createComponent: SpectatorFactory = createComponentFactory({ + component: VitInputComponent, + imports: [ CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule ] + }); + + beforeEach(() => spectator = createComponent()); + + it('A1| should create the Form Field Input', () => { + expect(spectator).toBeTruthy(); + }); + + // Input types + it('B1| should have default input type "text"', () => { + expect(spectator).toBeTruthy(); + }); + it('B2| should have custom input type "number"', () => { + expect(spectator).toBeTruthy(); + }); + + // Label + it('C1| should have no label by default', () => { + expect(spectator).toBeTruthy(); + }); + it('C2| should have custom label', () => { + expect(spectator).toBeTruthy(); + }); + + // Value + it('D1| should have no value by default', () => { + expect(spectator).toBeTruthy(); + }); + it('D2| should have custom value', () => { + expect(spectator).toBeTruthy(); + }); + + // Hint + it('E1| should have no hint by default', () => { + expect(spectator).toBeTruthy(); + }); + it('E2| should have custom hint', () => { + expect(spectator).toBeTruthy(); + }); + + // Disabled + it('F1| should not been disabled by default', () => { + expect(spectator).toBeTruthy(); + }); + it('F2| should be disabled if specified', () => { + expect(spectator).toBeTruthy(); + }); + +}); -- GitLab From 69b887b0a90b5b4ce50d937ca2bf9d3ca0c8ed51 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 9 Aug 2020 20:23:52 +1200 Subject: [PATCH 13/23] VIT-3 (VitInput): More input examples in stories. --- stories/components/input.stories.mdx | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/stories/components/input.stories.mdx b/stories/components/input.stories.mdx index d3d3b8b..eaeff8a 100644 --- a/stories/components/input.stories.mdx +++ b/stories/components/input.stories.mdx @@ -2,8 +2,10 @@ import { moduleMetadata } from '@storybook/angular'; import { Meta, Preview, Story } from '@storybook/addon-docs/blocks'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatInputModule } from '@angular/material/input'; +import { MatButtonModule } from '@angular/material/button'; import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; import { VitInputComponent } from '../../components/vit-input/src/lib/vit-input'; @@ -11,7 +13,9 @@ import { VitInputComponent } from '../../components/vit-input/src/lib/vit-input' @@ -39,7 +43,21 @@ Text input field: no value, with the label and hint, invalid and disabled. {{ template: ` - ` + + + + + + + + + + + + + ` }} -- GitLab From d16209b3807ef6ca19cec86d24317c0013004405 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 9 Aug 2020 21:58:41 +1200 Subject: [PATCH 14/23] VIT-3 (VitInput): Updated styles for the label. --- components/vit-input/src/lib/vit-input.html | 2 +- components/vit-input/src/lib/vit-input.scss | 22 +++++++++++++++------ components/vit-input/src/lib/vit-input.ts | 2 -- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.html b/components/vit-input/src/lib/vit-input.html index 97e1b06..765f460 100644 --- a/components/vit-input/src/lib/vit-input.html +++ b/components/vit-input/src/lib/vit-input.html @@ -4,7 +4,7 @@ {{label}} - diff --git a/components/vit-input/src/lib/vit-input.scss b/components/vit-input/src/lib/vit-input.scss index c61aa4f..d6a481b 100644 --- a/components/vit-input/src/lib/vit-input.scss +++ b/components/vit-input/src/lib/vit-input.scss @@ -2,7 +2,7 @@ // Root wrapper :host, vit-input { - display: inline-block; margin: $paddingMain $paddingMain 0 0; + display: inline-block; margin: calc(#{$paddingMain} + 5) $paddingMain 0 0; } // Main styles @@ -10,12 +10,17 @@ width: 200px; // Overriding the default styles &.mat-form-field-appearance-fill { + // Label .mat-form-field-label-wrapper { - top: -1em; padding-top: 1.2em; + top: -1.2em; padding-top: 1.4em; .mat-form-field-label { - top: initial; margin: .3em 0 0 .25em; + top: initial; margin: .4em 0 0 .25em; } } + &:not(.mat-focused) .mat-form-field-label { + opacity: .8; + } + // Value .mat-form-field-flex { padding: .1em .75em 0 .75em; border-radius: 18px; background-color: transparentize($color-primary, .9); @@ -36,7 +41,7 @@ } // Focused &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { - font-weight: 500; transform: translateY(-1.6em) scale(.75); + margin: .2em 0 0 .25em; font-weight: 500; transform: translateY(-1.7em) scale(.9); } &.mat-focused .mat-form-field-flex { background-color: transparentize($color-primary, .8); @@ -93,12 +98,17 @@ select:-webkit-autofill:focus { } // Textarea -textarea { +.mat-form-field textarea { @extend .scrollbar-container; } +// Number +.mat-form-field input[type=number]::-webkit-inner-spin-button { + -webkit-appearance: none; +} + // Color selector -.mat-form-field.mat-form-field-appearance-fill .mat-input-element { +.mat-form-field input[type=color] { position: relative; height: 30px; margin-bottom: -11px; top: -6px; } diff --git a/components/vit-input/src/lib/vit-input.ts b/components/vit-input/src/lib/vit-input.ts index 1ed97d4..a834ede 100644 --- a/components/vit-input/src/lib/vit-input.ts +++ b/components/vit-input/src/lib/vit-input.ts @@ -59,8 +59,6 @@ export class VitInputComponent implements OnInit, OnChanges { } ngOnChanges() { - console.log(this.value); - console.log(this.clearButton); // Disabled if (this.disabled) { this.formGroup.get('dummy').disable(); -- GitLab From ab6427d1fb7ff16afa726493a7aff5eba43d737c Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 9 Aug 2020 22:21:48 +1200 Subject: [PATCH 15/23] VIT-3 (VitInput): Stories split into groups. --- components/vit-input/src/lib/vit-input.scss | 2 +- stories/components/input.stories.mdx | 68 ++++++++++++++++++--- 2 files changed, 59 insertions(+), 11 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.scss b/components/vit-input/src/lib/vit-input.scss index d6a481b..0d4bc0a 100644 --- a/components/vit-input/src/lib/vit-input.scss +++ b/components/vit-input/src/lib/vit-input.scss @@ -2,7 +2,7 @@ // Root wrapper :host, vit-input { - display: inline-block; margin: calc(#{$paddingMain} + 5) $paddingMain 0 0; + display: inline-block; margin: calc(#{$paddingMain} + 5px) $paddingMain 0 0; } // Main styles diff --git a/stories/components/input.stories.mdx b/stories/components/input.stories.mdx index eaeff8a..d85a1a1 100644 --- a/stories/components/input.stories.mdx +++ b/stories/components/input.stories.mdx @@ -37,22 +37,70 @@ Form input field. ### Examples -#### Text +#### Text and number Text input field: no value, with the label and hint, invalid and disabled. {{ - template: ` + template: ` - - - - + ` + }} + + + +#### Email and URL +Text input field: no value, with the label and hint, invalid and disabled. + + + {{ + template: ` + ` + }} + + + +#### Date and time +Text input field: no value, with the label and hint, invalid and disabled. + + + {{ + template: ` + + - - - - ` + }} + + + +#### Search +Text input field: no value, with the label and hint, invalid and disabled. + + + {{ + template: `` + }} + + + +#### Other specific +Text input field: no value, with the label and hint, invalid and disabled. + + + {{ + template: ` + ` + }} + + + +#### Textarea +Text input field: no value, with the label and hint, invalid and disabled. + + + {{ + template: ` -- GitLab From 38e1432a2e353de13b5ee458eed50b8d170bf955 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Mon, 10 Aug 2020 22:49:49 +1200 Subject: [PATCH 16/23] VIT-3 (VitInput): Added styles for the required field state. --- components/vit-input/src/lib/vit-input.html | 3 ++- components/vit-input/src/lib/vit-input.scss | 8 +++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.html b/components/vit-input/src/lib/vit-input.html index 765f460..9145c52 100644 --- a/components/vit-input/src/lib/vit-input.html +++ b/components/vit-input/src/lib/vit-input.html @@ -1,4 +1,5 @@ - + {{label}} diff --git a/components/vit-input/src/lib/vit-input.scss b/components/vit-input/src/lib/vit-input.scss index 0d4bc0a..237bd1f 100644 --- a/components/vit-input/src/lib/vit-input.scss +++ b/components/vit-input/src/lib/vit-input.scss @@ -44,10 +44,16 @@ margin: .2em 0 0 .25em; font-weight: 500; transform: translateY(-1.7em) scale(.9); } &.mat-focused .mat-form-field-flex { - background-color: transparentize($color-primary, .8); + background-color: transparentize($color-primary, .85); } } +// Required +.mat-form-field-required .mat-form-field-flex:after { + position: absolute; right: -5px; top: -5px; + content: '*'; font-size: 130%; font-weight: 600; color: $color-notify; +} + // Disabled .mat-form-field.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex { background-color: transparentize($color-primary, .95); -- GitLab From f2e2cee4c824141f4ee88ad17ebcfed9e7e24463 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Mon, 10 Aug 2020 22:50:06 +1200 Subject: [PATCH 17/23] VIT-3 (VitInput): Updated the stories description. --- components/vit-input/package.json | 2 +- components/vit-input/src/lib/vit-input.ts | 15 ++++--- stories/components/input.stories.mdx | 49 ++++++++++++++++------- 3 files changed, 45 insertions(+), 21 deletions(-) diff --git a/components/vit-input/package.json b/components/vit-input/package.json index d8d9966..390a0ab 100644 --- a/components/vit-input/package.json +++ b/components/vit-input/package.json @@ -1,6 +1,6 @@ { "name": "vit-input", - "version": "0.8.0", + "version": "1.0.0", "description": "Common input field element", "contributors": [ "Alex Rudol " diff --git a/components/vit-input/src/lib/vit-input.ts b/components/vit-input/src/lib/vit-input.ts index a834ede..6d7ff2c 100644 --- a/components/vit-input/src/lib/vit-input.ts +++ b/components/vit-input/src/lib/vit-input.ts @@ -9,17 +9,22 @@ import { FormControl, FormGroup, Validators } from '@angular/forms'; }) export class VitInputComponent implements OnInit, OnChanges { - @Input() formGroup: FormGroup; // Parent form + // Form + @Input() formGroup: FormGroup; // The form (FormGroup) which the input belongs to @Input() controlName: string = 'dummy'; // Control name of the Form Group - @Input() type: string = 'text'; // text || email || password || number + // Standard attributes + @Input() type: string = 'text'; // Type of the input field @Input() label: string = ''; // Placeholder and field's label @Input() value: string | number = ''; // Defined input value + @Input() setWidth: string; // Specify the custom width + // Suffix and underline @Input() hint: string; // Text under the input, supports HTML - @Input() errorText: string; // Custom error message instead of standard ones + @Input() errorText: string; // Custom error message instead of standard one + @Input() clearButton: boolean = false; // Show the clear button to reset the entered value + // State @Input() required: boolean = false; // The input is required @Input() disabled: boolean = false; // The input is disabled - @Input() clearButton: boolean = false; // Show the clear button to reset the entered value - @Input() setWidth: string; // Specify the custom width + // Textarea @Input() autosize: boolean = true; // Autosize for the textarea @Input() minRows: number = 1; // Minimal number of rows for the textarea @Input() maxRows: number = 5; // Maximum number of rows for the textarea diff --git a/stories/components/input.stories.mdx b/stories/components/input.stories.mdx index d85a1a1..48e1e23 100644 --- a/stories/components/input.stories.mdx +++ b/stories/components/input.stories.mdx @@ -9,6 +9,8 @@ import { MatInputModule } from '@angular/material/input'; import { VitInputComponent } from '../../components/vit-input/src/lib/vit-input'; +import { version } from '../../components/vit-input/package.json'; +export const componentVersion = version; v {componentVersion}

+ +Form input field. Standard input based on the Angular Components' MatFormField +with the standard UI for the date, month, week, time and color fields pre-defined by a browser. ### Inputs | Name | Type | Values | Description | | ---- | ---- | ------ | ----------- | -| **form** | `FormGroup` | *null* | The form (FormGroup) which the input belongs to. | -| **controlName** | `string` | *null* | Unique name of the form field. | -| **type** | `string` | *text* number password search | Type of the input field to prevent entering invalid characters or adjust the input value. | -| **label** | `string` | *null* | Placeholder and field's label. | -| **value** | `string` `numeric` | *null* | Defined input value. | -| **hint** | `string` | *null* | Text under the input, supports HTML. | +| **FORM** | +| **formGroup** | `FormGroup` | *null* | The form (FormGroup) which the input belongs to | +| **controlName** | `string` | *null* | Control name of the Form Group | +| **STANDARD** | +| **type** | `string` | *text* | Type of the input field. Values: text, number, password, search, email, url, date, month, week, time, datetime-local, color. | +| **label** | `string` | *empty* | Placeholder and field's label | +| **value** | `string` `numeric` | *empty* | Defined input value | +| **setWidth** | `string` `numeric` | *null* | Specify the custom width (defined as 200px in styles) | +| **SUFFIX AND UNDERLINE** | +| **hint** | `string` | *null* | Text under the input, supports HTML | +| **errorText** | `string` | *null* | Custom error message instead of standard one | +| **clearButton** | `boolean` | *false* | Show the clear button to reset the entered value | +| **STATE** | +| **required** | `boolean` | *false* | The input is required | +| **disabled** | `boolean` | *false* | The input is disabled | +| **TEXTAREA** | +| **autosize** | `boolean` | *true* | Autosize for the textarea | +| **minRows** | `number` | *1* | Minimal number of rows for the textarea | +| **maxRows** | `number` | *5* | Maximum number of rows for the textarea | ### Examples #### Text and number -Text input field: no value, with the label and hint, invalid and disabled. +Input field of the text and number type. With defined label, value, required and disabled. - + {{ template: ` @@ -50,7 +68,7 @@ Text input field: no value, with the label and hint, invalid and disabled. #### Email and URL -Text input field: no value, with the label and hint, invalid and disabled. +Input field of the email and URL type. With defined hint and email/URL validation. {{ @@ -61,9 +79,9 @@ Text input field: no value, with the label and hint, invalid and disabled. #### Date and time -Text input field: no value, with the label and hint, invalid and disabled. +Input field types: date, month, week, time and composite (date and time). - + {{ template: ` @@ -75,7 +93,7 @@ Text input field: no value, with the label and hint, invalid and disabled. #### Search -Text input field: no value, with the label and hint, invalid and disabled. +Search field input type with clear button to reset the keyword. {{ @@ -85,7 +103,7 @@ Text input field: no value, with the label and hint, invalid and disabled. #### Other specific -Text input field: no value, with the label and hint, invalid and disabled. +Password field input type and the color input type with pre-defined values. {{ @@ -96,7 +114,8 @@ Text input field: no value, with the label and hint, invalid and disabled. #### Textarea -Text input field: no value, with the label and hint, invalid and disabled. +Textarea examples: with no autosize, with default autosize (1 row min and 5 rows max) and +with defined autosize (2 rows min and 3 rows max). {{ -- GitLab From f5a5da87094c93aebfe45e3fbac020ddbf32678c Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Tue, 11 Aug 2020 23:27:47 +1200 Subject: [PATCH 18/23] VIT-3 (VitInput): Unit-tests - added dummy test cases for all parameters. --- .../vit-input/src/lib/vit-input.spec.ts | 110 ++++++++++++++++-- stories/components/input.stories.mdx | 10 +- 2 files changed, 104 insertions(+), 16 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.spec.ts b/components/vit-input/src/lib/vit-input.spec.ts index 6a0c964..21bf25c 100644 --- a/components/vit-input/src/lib/vit-input.spec.ts +++ b/components/vit-input/src/lib/vit-input.spec.ts @@ -14,47 +14,135 @@ describe('VitMenuComponent', () => { beforeEach(() => spectator = createComponent()); - it('A1| should create the Form Field Input', () => { + it('A1| Form Field input component', () => { expect(spectator).toBeTruthy(); }); + + // FORM + + // Form Group and Control name + it('B1| default Form Group with dummy control', () => { + expect(spectator).toBeTruthy(); + }); + it('B2| Form Group specified', () => { + expect(spectator).toBeTruthy(); + }); + it('B3| Form control name specified', () => { + expect(spectator).toBeTruthy(); + }); + + + // STANDARD ATTRIBUTES + // Input types - it('B1| should have default input type "text"', () => { + it('C1| default input type "text"', () => { expect(spectator).toBeTruthy(); }); - it('B2| should have custom input type "number"', () => { + it('C2| custom input type "number"', () => { expect(spectator).toBeTruthy(); }); // Label - it('C1| should have no label by default', () => { + it('D1| no label by default', () => { expect(spectator).toBeTruthy(); }); - it('C2| should have custom label', () => { + it('D2| custom label', () => { expect(spectator).toBeTruthy(); }); // Value - it('D1| should have no value by default', () => { + it('E1| no value by default', () => { + expect(spectator).toBeTruthy(); + }); + it('E2| custom value', () => { + expect(spectator).toBeTruthy(); + }); + + // Width + it('F1| default input width', () => { expect(spectator).toBeTruthy(); }); - it('D2| should have custom value', () => { + it('F2| custom input width', () => { expect(spectator).toBeTruthy(); }); + + // SUFFIX AND UNDERLINE + // Hint - it('E1| should have no hint by default', () => { + it('G1| no hint by default', () => { + expect(spectator).toBeTruthy(); + }); + it('G2| custom hint', () => { + expect(spectator).toBeTruthy(); + }); + + // Error Text + it('H1| error text if field is required', () => { + expect(spectator).toBeTruthy(); + }); + it('H2| error text if the value is invalid', () => { + expect(spectator).toBeTruthy(); + }); + it('H3| custom error text', () => { + expect(spectator).toBeTruthy(); + }); + + // Clear button + it('I1| no clear button by default', () => { + expect(spectator).toBeTruthy(); + }); + it('I2| clear button for the search field', () => { + expect(spectator).toBeTruthy(); + }); + it('I2| clear button if enabled', () => { + expect(spectator).toBeTruthy(); + }); + + + // STATE + + // Required + it('J1| not required by default', () => { expect(spectator).toBeTruthy(); }); - it('E2| should have custom hint', () => { + it('J2| required if specified', () => { expect(spectator).toBeTruthy(); }); // Disabled - it('F1| should not been disabled by default', () => { + it('K1| not disabled by default', () => { + expect(spectator).toBeTruthy(); + }); + it('K2| disabled if specified', () => { + expect(spectator).toBeTruthy(); + }); + + + // TEXTAREA + + // Autosize + it('L1| autosize is enabled by default', () => { + expect(spectator).toBeTruthy(); + }); + it('L2| autosize is disabled if specified', () => { + expect(spectator).toBeTruthy(); + }); + + // Minimal number of rows + it('M1| minimum 1 row is by default', () => { + expect(spectator).toBeTruthy(); + }); + it('M2| custom minimal number of rows', () => { + expect(spectator).toBeTruthy(); + }); + + // Maximum number of rows + it('N1| maximum 5 rows are by default', () => { expect(spectator).toBeTruthy(); }); - it('F2| should be disabled if specified', () => { + it('N2| custom maximum number of rows', () => { expect(spectator).toBeTruthy(); }); diff --git a/stories/components/input.stories.mdx b/stories/components/input.stories.mdx index 48e1e23..a6ba2a6 100644 --- a/stories/components/input.stories.mdx +++ b/stories/components/input.stories.mdx @@ -32,22 +32,22 @@ with the standard UI for the date, month, week, time and color fields pre-define | Name | Type | Values | Description | | ---- | ---- | ------ | ----------- | -| **FORM** | +| **FORM** | ————— | ————— | —————————— | | **formGroup** | `FormGroup` | *null* | The form (FormGroup) which the input belongs to | | **controlName** | `string` | *null* | Control name of the Form Group | -| **STANDARD** | +| **STANDARD** | ————— | ————— | —————————— | | **type** | `string` | *text* | Type of the input field. Values: text, number, password, search, email, url, date, month, week, time, datetime-local, color. | | **label** | `string` | *empty* | Placeholder and field's label | | **value** | `string` `numeric` | *empty* | Defined input value | | **setWidth** | `string` `numeric` | *null* | Specify the custom width (defined as 200px in styles) | -| **SUFFIX AND UNDERLINE** | +| **SUFFIX AND UNDERLINE** | ————— | ————— | —————————— | | **hint** | `string` | *null* | Text under the input, supports HTML | | **errorText** | `string` | *null* | Custom error message instead of standard one | | **clearButton** | `boolean` | *false* | Show the clear button to reset the entered value | -| **STATE** | +| **STATE** | ————— | ————— | —————————— | | **required** | `boolean` | *false* | The input is required | | **disabled** | `boolean` | *false* | The input is disabled | -| **TEXTAREA** | +| **TEXTAREA** | ————— | ————— | —————————— | | **autosize** | `boolean` | *true* | Autosize for the textarea | | **minRows** | `number` | *1* | Minimal number of rows for the textarea | | **maxRows** | `number` | *5* | Maximum number of rows for the textarea | -- GitLab From e91b30825d26fc88ee41022c26a97456ae1e25c0 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 16 Aug 2020 14:03:10 +1200 Subject: [PATCH 19/23] VIT-3 (VitInput): Refactored component - new way to set and reset values. Added class based on the field type. --- components/vit-input/src/lib/vit-input.html | 12 ++-- components/vit-input/src/lib/vit-input.scss | 9 +++ components/vit-input/src/lib/vit-input.ts | 62 ++++++++++----------- 3 files changed, 46 insertions(+), 37 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.html b/components/vit-input/src/lib/vit-input.html index 9145c52..82545e5 100644 --- a/components/vit-input/src/lib/vit-input.html +++ b/components/vit-input/src/lib/vit-input.html @@ -5,8 +5,8 @@ {{label}} - + - @@ -23,8 +23,8 @@ - {{type}} is required - Invalid {{type}} + {{type}} is required + Invalid {{type}} {{errorText}} diff --git a/components/vit-input/src/lib/vit-input.scss b/components/vit-input/src/lib/vit-input.scss index 237bd1f..7edfac4 100644 --- a/components/vit-input/src/lib/vit-input.scss +++ b/components/vit-input/src/lib/vit-input.scss @@ -33,6 +33,15 @@ } } +// Width +:host, vit-input { + &.text .mat-form-field { width: 200px; } + &.date .mat-form-field { width: 180px; } + &.time .mat-form-field { width: 105px; } + &.color .mat-form-field { width: 80px; } + &.textarea .mat-form-field { width: 400px; } +} + // Hover and focus .mat-form-field.mat-form-field-appearance-fill { // Hover diff --git a/components/vit-input/src/lib/vit-input.ts b/components/vit-input/src/lib/vit-input.ts index 6d7ff2c..cf04713 100644 --- a/components/vit-input/src/lib/vit-input.ts +++ b/components/vit-input/src/lib/vit-input.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ @@ -7,7 +7,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms'; styleUrls: [ 'vit-input.scss', 'vit-input.theme.scss' ], encapsulation: ViewEncapsulation.None }) -export class VitInputComponent implements OnInit, OnChanges { +export class VitInputComponent implements OnInit { // Form @Input() formGroup: FormGroup; // The form (FormGroup) which the input belongs to @@ -29,15 +29,32 @@ export class VitInputComponent implements OnInit, OnChanges { @Input() minRows: number = 1; // Minimal number of rows for the textarea @Input() maxRows: number = 5; // Maximum number of rows for the textarea - constructor() { + // Apply host classes based on the input type + @HostBinding('class') + get classes(): string { + return this.type; + } + + constructor() { } + + ngOnInit() { + // Generate a dummy form if not defined this.formGroup = this.formGroup ? this.formGroup : new FormGroup({ - dummy: new FormControl({ value: '', disabled: this.disabled }) + dummy: new FormControl({ value: this.value, disabled: this.disabled }) }); + // Use a dummy form control name or use defined one this.controlName = this.controlName ? this.controlName : 'dummy'; - } + // Set the initial value based on the value in the form control (if defined) + if (this.formGroup?.controls[this.controlName]?.value) { + this.value = this.formGroup.controls[this.controlName].value; + } + + // Required + if (this.required) { + this.formGroup.get(this.controlName).setValidators([ Validators.required ]); + } - ngOnInit() { // Rules for the various field types if (this.type === 'email') { this.formGroup.get('dummy').setValidators([ Validators.email ]); @@ -49,33 +66,16 @@ export class VitInputComponent implements OnInit, OnChanges { else if (this.type === 'search') { this.clearButton = true; } - else if (this.type === 'date' && !this.setWidth) { - this.setWidth = '180px'; - } - else if (this.type === 'time' && !this.setWidth) { - this.setWidth = '105px'; - } - else if (this.type === 'color' && !this.setWidth) { - this.setWidth = '80px'; - } - else if (this.type === 'textarea' && !this.setWidth) { - this.setWidth = '400px'; - } } - ngOnChanges() { - // Disabled - if (this.disabled) { - this.formGroup.get('dummy').disable(); - } - // Required - if (this.required) { - this.formGroup.get('dummy').setValidators([ Validators.required ]); - } - // Clear button - if (this.value && this.clearButton) { - this.clearButton = true; - } + // Get the input value based on the current Form Control value + get inputValue(): string | number { + return this.formGroup?.get(this.controlName).value; + } + + // Reset the Form Control value + resetInputValue(): void { + this.formGroup.get(this.controlName).reset(); } } -- GitLab From 8166cec22bc50f3a2900b784d943c599bd6ab9bb Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sun, 13 Sep 2020 21:25:53 +1200 Subject: [PATCH 20/23] VIT-3 (VitInput): Updated unit-tests. --- .../vit-input/src/lib/vit-input.spec.ts | 87 +++++++++++-------- components/vit-input/src/lib/vit-input.ts | 2 +- 2 files changed, 51 insertions(+), 38 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.spec.ts b/components/vit-input/src/lib/vit-input.spec.ts index 21bf25c..4461572 100644 --- a/components/vit-input/src/lib/vit-input.spec.ts +++ b/components/vit-input/src/lib/vit-input.spec.ts @@ -1,20 +1,26 @@ import { createComponentFactory, Spectator, SpectatorFactory } from '@ngneat/spectator/jest'; import { VitInputComponent } from './vit-input'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatFormFieldModule } from '@angular/material/form-field'; +import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; import { CommonModule } from '@angular/common'; +import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; +import { fakeAsync } from '@angular/core/testing'; describe('VitMenuComponent', () => { let spectator: Spectator; const createComponent: SpectatorFactory = createComponentFactory({ component: VitInputComponent, - imports: [ CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule ] + imports: [ CommonModule, ReactiveFormsModule, FormsModule, MatIconModule, MatInputModule ] + }); + + // Mock a test form group + const sampleForm: FormGroup = new FormGroup({ + sampleInput: new FormControl('Sample value', [ Validators.required ]) }); beforeEach(() => spectator = createComponent()); - it('A1| Form Field input component', () => { + xit('A1| Form Field input component', () => { expect(spectator).toBeTruthy(); }); @@ -22,14 +28,16 @@ describe('VitMenuComponent', () => { // FORM // Form Group and Control name - it('B1| default Form Group with dummy control', () => { - expect(spectator).toBeTruthy(); + xit('B1| default Form with dummy input', () => { + expect(spectator.query('input').getAttribute('ng-reflect-name')) + .toBe('dummy'); + expect(spectator.query('input').getAttribute('ng-reflect-value')) + .toBeFalsy(); }); - it('B2| Form Group specified', () => { - expect(spectator).toBeTruthy(); - }); - it('B3| Form control name specified', () => { - expect(spectator).toBeTruthy(); + xit('B2| Form specified with custom value', () => { + spectator.setInput('formGroup', sampleForm); + expect(JSON.stringify(spectator.component.formGroup.value)) + .toBe('{"sampleInput":"Sample value"}'); }); @@ -37,33 +45,38 @@ describe('VitMenuComponent', () => { // Input types it('C1| default input type "text"', () => { - expect(spectator).toBeTruthy(); + const sampleForm: FormGroup = new FormGroup({ + sampleInput: new FormControl('Sample value', [ Validators.required ]) + }); + console.log('!!!', spectator.component.formGroup.value); + expect(spectator.component.inputValue) + .toBe('Text sample value'); }); - it('C2| custom input type "number"', () => { + xit('C2| custom input type "number"', () => { expect(spectator).toBeTruthy(); }); // Label - it('D1| no label by default', () => { + xit('D1| no label by default', () => { expect(spectator).toBeTruthy(); }); - it('D2| custom label', () => { + xit('D2| custom label', () => { expect(spectator).toBeTruthy(); }); // Value - it('E1| no value by default', () => { + xit('E1| no value by default', () => { expect(spectator).toBeTruthy(); }); - it('E2| custom value', () => { + xit('E2| custom value', () => { expect(spectator).toBeTruthy(); }); // Width - it('F1| default input width', () => { + xit('F1| default input width', () => { expect(spectator).toBeTruthy(); }); - it('F2| custom input width', () => { + xit('F2| custom input width', () => { expect(spectator).toBeTruthy(); }); @@ -71,32 +84,32 @@ describe('VitMenuComponent', () => { // SUFFIX AND UNDERLINE // Hint - it('G1| no hint by default', () => { + xit('G1| no hint by default', () => { expect(spectator).toBeTruthy(); }); - it('G2| custom hint', () => { + xit('G2| custom hint', () => { expect(spectator).toBeTruthy(); }); // Error Text - it('H1| error text if field is required', () => { + xit('H1| error text if field is required', () => { expect(spectator).toBeTruthy(); }); - it('H2| error text if the value is invalid', () => { + xit('H2| error text if the value is invalid', () => { expect(spectator).toBeTruthy(); }); - it('H3| custom error text', () => { + xit('H3| custom error text', () => { expect(spectator).toBeTruthy(); }); // Clear button - it('I1| no clear button by default', () => { + xit('I1| no clear button by default', () => { expect(spectator).toBeTruthy(); }); - it('I2| clear button for the search field', () => { + xit('I2| clear button for the search field', () => { expect(spectator).toBeTruthy(); }); - it('I2| clear button if enabled', () => { + xit('I2| clear button if enabled', () => { expect(spectator).toBeTruthy(); }); @@ -104,18 +117,18 @@ describe('VitMenuComponent', () => { // STATE // Required - it('J1| not required by default', () => { + xit('J1| not required by default', () => { expect(spectator).toBeTruthy(); }); - it('J2| required if specified', () => { + xit('J2| required if specified', () => { expect(spectator).toBeTruthy(); }); // Disabled - it('K1| not disabled by default', () => { + xit('K1| not disabled by default', () => { expect(spectator).toBeTruthy(); }); - it('K2| disabled if specified', () => { + xit('K2| disabled if specified', () => { expect(spectator).toBeTruthy(); }); @@ -123,26 +136,26 @@ describe('VitMenuComponent', () => { // TEXTAREA // Autosize - it('L1| autosize is enabled by default', () => { + xit('L1| autosize is enabled by default', () => { expect(spectator).toBeTruthy(); }); - it('L2| autosize is disabled if specified', () => { + xit('L2| autosize is disabled if specified', () => { expect(spectator).toBeTruthy(); }); // Minimal number of rows - it('M1| minimum 1 row is by default', () => { + xit('M1| minimum 1 row is by default', () => { expect(spectator).toBeTruthy(); }); - it('M2| custom minimal number of rows', () => { + xit('M2| custom minimal number of rows', () => { expect(spectator).toBeTruthy(); }); // Maximum number of rows - it('N1| maximum 5 rows are by default', () => { + xit('N1| maximum 5 rows are by default', () => { expect(spectator).toBeTruthy(); }); - it('N2| custom maximum number of rows', () => { + xit('N2| custom maximum number of rows', () => { expect(spectator).toBeTruthy(); }); diff --git a/components/vit-input/src/lib/vit-input.ts b/components/vit-input/src/lib/vit-input.ts index cf04713..32d0e58 100644 --- a/components/vit-input/src/lib/vit-input.ts +++ b/components/vit-input/src/lib/vit-input.ts @@ -70,7 +70,7 @@ export class VitInputComponent implements OnInit { // Get the input value based on the current Form Control value get inputValue(): string | number { - return this.formGroup?.get(this.controlName).value; + return this.formGroup?.get(this.controlName)?.value; } // Reset the Form Control value -- GitLab From f6d9809f56493b496aaed70abd0f5d853989d2f5 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sat, 19 Sep 2020 14:41:17 +1200 Subject: [PATCH 21/23] VIT-3 (VitInput): Fixed the logical issue in the constructor. --- components/vit-input/src/lib/vit-input.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.ts b/components/vit-input/src/lib/vit-input.ts index 32d0e58..098b77b 100644 --- a/components/vit-input/src/lib/vit-input.ts +++ b/components/vit-input/src/lib/vit-input.ts @@ -3,7 +3,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'vit-input', - templateUrl: './vit-input.html', + templateUrl: 'vit-input.html', styleUrls: [ 'vit-input.scss', 'vit-input.theme.scss' ], encapsulation: ViewEncapsulation.None }) @@ -39,16 +39,18 @@ export class VitInputComponent implements OnInit { ngOnInit() { + // Use a dummy form control name or use defined one if the formGroup is specified (!) + this.controlName = (this.formGroup && this.controlName) ? this.controlName : 'dummy'; + + // Set the value if defined and there is a custom formGroup + if (this.formGroup && this.value) { + this.formGroup.get(this.controlName).setValue(this.value); + } + // Generate a dummy form if not defined this.formGroup = this.formGroup ? this.formGroup : new FormGroup({ dummy: new FormControl({ value: this.value, disabled: this.disabled }) }); - // Use a dummy form control name or use defined one - this.controlName = this.controlName ? this.controlName : 'dummy'; - // Set the initial value based on the value in the form control (if defined) - if (this.formGroup?.controls[this.controlName]?.value) { - this.value = this.formGroup.controls[this.controlName].value; - } // Required if (this.required) { -- GitLab From 317397a3afe8c9bdc59e2f983cd486e1ad643f58 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sat, 19 Sep 2020 14:41:42 +1200 Subject: [PATCH 22/23] VIT-3 (VitInput): Updated unit-tests - base, formGroup and the field types. --- .../vit-input/src/lib/vit-input.spec.ts | 39 ++++++++++++------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.spec.ts b/components/vit-input/src/lib/vit-input.spec.ts index 4461572..4e7d1bf 100644 --- a/components/vit-input/src/lib/vit-input.spec.ts +++ b/components/vit-input/src/lib/vit-input.spec.ts @@ -15,12 +15,12 @@ describe('VitMenuComponent', () => { // Mock a test form group const sampleForm: FormGroup = new FormGroup({ - sampleInput: new FormControl('Sample value', [ Validators.required ]) + sampleInput: new FormControl( { value: 'Sample value' }, [ Validators.required ] ) }); beforeEach(() => spectator = createComponent()); - xit('A1| Form Field input component', () => { + it('A1| Form Field input component', () => { expect(spectator).toBeTruthy(); }); @@ -28,16 +28,19 @@ describe('VitMenuComponent', () => { // FORM // Form Group and Control name - xit('B1| default Form with dummy input', () => { + it('B1| default Form with dummy input', () => { expect(spectator.query('input').getAttribute('ng-reflect-name')) .toBe('dummy'); expect(spectator.query('input').getAttribute('ng-reflect-value')) .toBeFalsy(); }); - xit('B2| Form specified with custom value', () => { + it('B2| custom Form with custom field', () => { + spectator.setInput('controlName', 'sampleInput'); spectator.setInput('formGroup', sampleForm); - expect(JSON.stringify(spectator.component.formGroup.value)) - .toBe('{"sampleInput":"Sample value"}'); + expect(spectator.query('input').getAttribute('ng-reflect-name')) + .toBe('sampleInput'); + expect(spectator.component.formGroup.controls.sampleInput.value.value) + .toBe('Sample value'); }); @@ -45,15 +48,21 @@ describe('VitMenuComponent', () => { // Input types it('C1| default input type "text"', () => { - const sampleForm: FormGroup = new FormGroup({ - sampleInput: new FormControl('Sample value', [ Validators.required ]) - }); - console.log('!!!', spectator.component.formGroup.value); - expect(spectator.component.inputValue) - .toBe('Text sample value'); - }); - xit('C2| custom input type "number"', () => { - expect(spectator).toBeTruthy(); + spectator.setInput('value', 'Sample text value'); + expect(spectator.query('input').getAttribute('type')) + .toBe('text'); + spectator.component.ngOnInit(); + expect(spectator.component.formGroup.value.dummy) + .toBe('Sample text value'); + }); + it('C2| custom input type "number"', () => { + spectator.setInput('type', 'number'); + spectator.setInput('value', '123456'); + expect(spectator.query('input').getAttribute('type')) + .toBe('number'); + spectator.component.ngOnInit(); + expect(spectator.component.formGroup.value.dummy) + .toBe('123456'); }); // Label -- GitLab From f0b2c8bd0326351c86b83db07233bd1b3a58e218 Mon Sep 17 00:00:00 2001 From: Alex Rudol Date: Sat, 19 Sep 2020 22:45:36 +1200 Subject: [PATCH 23/23] VIT-3 (VitInput): More unit-tests. --- .../vit-input/src/lib/vit-input.spec.ts | 73 ++++++++++--------- 1 file changed, 37 insertions(+), 36 deletions(-) diff --git a/components/vit-input/src/lib/vit-input.spec.ts b/components/vit-input/src/lib/vit-input.spec.ts index 4e7d1bf..fc795a0 100644 --- a/components/vit-input/src/lib/vit-input.spec.ts +++ b/components/vit-input/src/lib/vit-input.spec.ts @@ -31,16 +31,12 @@ describe('VitMenuComponent', () => { it('B1| default Form with dummy input', () => { expect(spectator.query('input').getAttribute('ng-reflect-name')) .toBe('dummy'); - expect(spectator.query('input').getAttribute('ng-reflect-value')) - .toBeFalsy(); }); it('B2| custom Form with custom field', () => { spectator.setInput('controlName', 'sampleInput'); spectator.setInput('formGroup', sampleForm); expect(spectator.query('input').getAttribute('ng-reflect-name')) .toBe('sampleInput'); - expect(spectator.component.formGroup.controls.sampleInput.value.value) - .toBe('Sample value'); }); @@ -66,60 +62,75 @@ describe('VitMenuComponent', () => { }); // Label - xit('D1| no label by default', () => { - expect(spectator).toBeTruthy(); + it('D1| no label by default', () => { + expect(spectator.query('label mat-label').innerHTML) + .toBe(''); }); - xit('D2| custom label', () => { - expect(spectator).toBeTruthy(); + it('D2| custom label', () => { + spectator.setInput('label', 'Custom label'); + expect(spectator.query('label mat-label').innerHTML) + .toBe('Custom label'); }); // Value - xit('E1| no value by default', () => { - expect(spectator).toBeTruthy(); + it('E1| no value by default', () => { + expect(spectator.query('input').getAttribute('ng-reflect-value')) + .toBeFalsy(); }); - xit('E2| custom value', () => { - expect(spectator).toBeTruthy(); + it('E2| custom value', () => { + spectator.setInput('value', 'Sample text value'); + spectator.component.ngOnInit(); + expect(spectator.component.formGroup.value.dummy) + .toBe('Sample text value'); }); // Width - xit('F1| default input width', () => { - expect(spectator).toBeTruthy(); + it('F1| default input width', () => { + expect(spectator.query('mat-form-field').getAttribute('style')) + .toBeFalsy(); }); - xit('F2| custom input width', () => { - expect(spectator).toBeTruthy(); + it('F2| custom input width', () => { + spectator.setInput('setWidth', '256px'); + expect(spectator.query('mat-form-field').getAttribute('style')) + .toMatch(/width: 256px;/); }); // SUFFIX AND UNDERLINE // Hint - xit('G1| no hint by default', () => { - expect(spectator).toBeTruthy(); + it('G1| no hint by default', () => { + expect(spectator.query('mat-hint')) + .toBeFalsy(); }); - xit('G2| custom hint', () => { - expect(spectator).toBeTruthy(); + it('G2| custom hint', () => { + spectator.setInput('hint', 'Sample hint text'); + expect(spectator.query('mat-hint').innerHTML) + .toBe('Sample hint text'); }); // Error Text xit('H1| error text if field is required', () => { - expect(spectator).toBeTruthy(); + spectator.setInput('required', true); + expect(spectator.query('mat-form-field').getAttribute('class')) + .toMatch(/ mat-form-field-required /); + spectator.focus(spectator.query('input')); + spectator.typeInElement('a', spectator.query('input')); + expect(spectator.query('input').innerHTML) + .toBe('123'); }); xit('H2| error text if the value is invalid', () => { - expect(spectator).toBeTruthy(); + spectator.setInput('type', 'email'); }); xit('H3| custom error text', () => { - expect(spectator).toBeTruthy(); }); // Clear button xit('I1| no clear button by default', () => { - expect(spectator).toBeTruthy(); }); xit('I2| clear button for the search field', () => { - expect(spectator).toBeTruthy(); }); xit('I2| clear button if enabled', () => { - expect(spectator).toBeTruthy(); }); @@ -127,18 +138,14 @@ describe('VitMenuComponent', () => { // Required xit('J1| not required by default', () => { - expect(spectator).toBeTruthy(); }); xit('J2| required if specified', () => { - expect(spectator).toBeTruthy(); }); // Disabled xit('K1| not disabled by default', () => { - expect(spectator).toBeTruthy(); }); xit('K2| disabled if specified', () => { - expect(spectator).toBeTruthy(); }); @@ -146,26 +153,20 @@ describe('VitMenuComponent', () => { // Autosize xit('L1| autosize is enabled by default', () => { - expect(spectator).toBeTruthy(); }); xit('L2| autosize is disabled if specified', () => { - expect(spectator).toBeTruthy(); }); // Minimal number of rows xit('M1| minimum 1 row is by default', () => { - expect(spectator).toBeTruthy(); }); xit('M2| custom minimal number of rows', () => { - expect(spectator).toBeTruthy(); }); // Maximum number of rows xit('N1| maximum 5 rows are by default', () => { - expect(spectator).toBeTruthy(); }); xit('N2| custom maximum number of rows', () => { - expect(spectator).toBeTruthy(); }); }); -- GitLab