@kms-ngx-ui/presentational 0.0.17 → 0.0.18

package/README.md

@@ -1,24 +1,28 @@
-# KmsUiPresentational
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project kms-ngx-ui-presentational` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project kms-ngx-ui-presentational`.
-> Note: Don't forget to add `--project kms-ngx-ui-presentational` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build kms-ngx-ui-presentational` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build kms-ngx-ui-presentational`, go to the dist folder `cd dist/kms-ngx-ui-presentational` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test kms-ngx-ui-presentational` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# KmsUiPresentational
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project kms-ngx-ui-presentational` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project kms-ngx-ui-presentational`.
+> Note: Don't forget to add `--project kms-ngx-ui-presentational` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build kms-ngx-ui-presentational` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build kms-ngx-ui-presentational`, go to the dist folder `cd dist/kms-ngx-ui-presentational` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test kms-ngx-ui-presentational` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running Storybook
+
+Run `npm run storybook` to start Storybook.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/bundles/kms-ngx-ui-presentational.umd.js

@@ -664,12 +664,12 @@
             this.form = this.formBuilder.group({
                 color: '',
             });
+            _super.prototype.ngOnInit.call(this);
             this.formInitialized = true;
             this.form.valueChanges.subscribe(function (value) {
                 _this.internalValue = value.color;
                 _this.onChange(value.color);
             });
-            _super.prototype.ngOnInit.call(this);
         };
         ColorInputComponent.prototype.validate = function (_) {
             // TODO fix to validate complete form
@@ -686,12 +686,18 @@
             }
             return false;
         };
+        ColorInputComponent.prototype.updateSelectedColor = function (value) {
+            var color = value.target.value;
+            this.value = color;
+            this.internalValue = color;
+            this.change(color);
+        };
         return ColorInputComponent;
     }(FormControlParentComponent));
     ColorInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-color-input',
-                    template: "\n<form [formGroup]=\"form\" *ngIf=\"formInitialized\">\n    <div>\n        <mat-form-field class=\"colorInput\">\n            <kms-tooltip-icon [tooltipText]=\"tooltipText\" *ngIf=\"tooltipText\"></kms-tooltip-icon>\n            <mat-label>{{ label }}</mat-label>\n            <input type=\"text\" [value]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n            <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" formControlName=\"color\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        </mat-form-field>\n    </div>\n</form>",
+                    template: "\n<form [formGroup]=\"form\" *ngIf=\"formInitialized\">\n    <div>\n        <mat-form-field class=\"colorInput\">\n            <kms-tooltip-icon [tooltipText]=\"tooltipText\" *ngIf=\"tooltipText\"></kms-tooltip-icon>\n            <mat-label>{{ label }}</mat-label>\n            <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n            <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        </mat-form-field>\n    </div>\n</form>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,