ngwr 0.1.0 → 0.1.1

package/fesm2020/ngwr.mjs

@@ -3,11 +3,11 @@ import * as i0 from '@angular/core';
 import { Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Injectable, Optional, Inject, Input, NgModule, EventEmitter, forwardRef, ViewChild, Output } from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
 import * as i1$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 
@@ -1016,20 +1016,85 @@ class WrInputComponent extends BaseComponent {
         this.elRef = elRef;
         this.focusMonitor = focusMonitor;
         this.ngZone = ngZone;
-        this.value = null;
-        this.type = 'text';
-        this.autocomplete = 'on';
-        this.inputmode = 'text';
-        this.disabled = false;
-        this.readonly = false;
-        this.autofocus = false;
-        this.passwordIcons = false;
-        this.placeholder = undefined;
+        this.placeholder = '';
         this.prefix = null;
         this.suffix = null;
+        this.passwordIcons = false;
         this.eyeOn = true;
-        this.onChange = () => { };
-        this.onTouch = () => { };
+        this._value = '';
+        this._disabled = false;
+        this._readonly = false;
+        this._required = false;
+        this._autofocus = false;
+        this._focused = false;
+        this._autocomplete = 'off';
+        this._type = 'text';
+        this._mode = 'text';
+        this.onChangeCallback = () => { };
+        this.onTouchedCallback = () => { };
+    }
+    get type() {
+        return this._type;
+    }
+    set type(type) {
+        this._type = type;
+    }
+    get inputmode() {
+        return this._mode;
+    }
+    set inputmode(mode) {
+        this._mode = mode;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(disabled) {
+        this._disabled = coerceBooleanProperty(disabled);
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(readonly) {
+        this._readonly = coerceBooleanProperty(readonly);
+    }
+    get required() {
+        return this._required;
+    }
+    set required(required) {
+        this._required = coerceBooleanProperty(required);
+    }
+    get autofocus() {
+        return this._autofocus;
+    }
+    set autofocus(autofocus) {
+        this._autofocus = coerceBooleanProperty(autofocus);
+    }
+    get autocomplete() {
+        return this._autocomplete;
+    }
+    set autocomplete(autofocus) {
+        this._autocomplete = autofocus;
+    }
+    get value() {
+        return this.type === 'number' ? this.valueAsNumber : this._value;
+    }
+    set value(val) {
+        if (val !== this._value) {
+            this._value = val;
+            this.onChangeCallback(this.value);
+        }
+    }
+    get valueAsString() {
+        if (this._value == null || typeof this._value === 'undefined')
+            return '';
+        return String(this._value);
+    }
+    get valueAsNumber() {
+        return coerceNumberProperty(this._value);
+    }
+    get isBadInput() {
+        const validity = this.inputElement?.nativeElement?.validity;
+        return validity && validity.badInput;
     }
     get elClasses() {
         return {
@@ -1046,7 +1111,7 @@ class WrInputComponent extends BaseComponent {
                 .pipe(takeUntil(this.ngUnsubscribe))
                 .subscribe(event => {
                 event.preventDefault();
-                this.focus();
+                this.onFocus();
                 if (this.disabled) {
                     event.stopImmediatePropagation();
                     return;
@@ -1059,62 +1124,68 @@ class WrInputComponent extends BaseComponent {
     }
     ngAfterViewInit() {
         if (this.autofocus) {
-            this.focus();
+            this.onFocus();
+            this.cdr.markForCheck();
         }
     }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.focusMonitor.stopMonitoring(this.elRef);
     }
-    writeValue(value) {
-        this.value = value;
-        this.cdr.markForCheck();
+    onFocus(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this._focused = true;
+        this.focusMonitor.focusVia(this.inputElement, 'keyboard');
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    onBlur(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this._focused = false;
+        // this.inputElement.nativeElement.blur();
+        this.onTouchedCallback();
     }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
+    validate(control) {
+        return {
+            ...(this.isBadInput ? { badInput: true } : null)
+        };
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    writeValue(value) {
+        if (value !== this._value) {
+            this._value = value;
+        }
         this.cdr.markForCheck();
     }
-    focus() {
-        this.focusMonitor.focusVia(this.inputElement, 'keyboard');
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
     }
-    blur() {
-        this.inputElement.nativeElement.blur();
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
     }
-    onPasswordVisibilityChange(event) {
-        event.stopPropagation();
+    onPasswordVisibilityChange() {
         this.type === 'password' ? (this.type = 'text') : (this.type = 'password');
         this.eyeOn = !this.eyeOn;
+        this.onFocus();
     }
-    onModelChange(value) {
-        if (!this.disabled) {
-            this.value = value;
-            this.onChange(this.value);
-        }
+    setDisabledState(isDisabled) {
+        this.disabled = coerceBooleanProperty(isDisabled);
     }
 }
 WrInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WrInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-WrInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrInputComponent, selector: "wr-input", inputs: { value: "value", type: "type", autocomplete: "autocomplete", inputmode: "inputmode", disabled: "disabled", readonly: "readonly", autofocus: "autofocus", passwordIcons: "passwordIcons", placeholder: "placeholder", prefix: "prefix", suffix: "suffix" }, host: { properties: { "class": "this.elClasses" } }, providers: [
+WrInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WrInputComponent, selector: "wr-input", inputs: { placeholder: "placeholder", prefix: "prefix", suffix: "suffix", passwordIcons: "passwordIcons", type: "type", inputmode: "inputmode", disabled: "disabled", readonly: "readonly", required: "required", autofocus: "autofocus", autocomplete: "autocomplete", value: "value" }, host: { properties: { "class": "this.elClasses" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => WrInputComponent),
             multi: true
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => WrInputComponent),
+            multi: true
         }
-    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], exportAs: ["wrInput"], usesInheritance: true, ngImport: i0, template: "<div class=\"wr-input-prefix\" *ngIf=\"prefix\">\n  <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n</div>\n<div class=\"wr-input-el\">\n  <div\n    *ngIf=\"passwordIcons\"\n    class=\"wr-input-el-icon\"\n    (click)=\"onPasswordVisibilityChange($event)\"\n  >\n    <wr-icon class=\"wr-input-el-icon__icon\" [name]=\"eyeOn ? 'eye' : 'eye-off'\"></wr-icon>\n  </div>\n  <input\n    #inputElement\n    class=\"wr-input-el__native\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder ? placeholder : ''\"\n    [attr.readonly]=\"readonly ? 'readonly' : null\"\n    [attr.autofocus]=\"autofocus ? 'autofocus' : null\"\n    [attr.disabled]=\"disabled ? 'disabled' : null\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onModelChange(value)\"\n  />\n</div>\n<div class=\"wr-input-suffix\" *ngIf=\"suffix\">\n  <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: WrIconComponent, selector: "wr-icon[name]", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-__decorate([
-    InputBoolean()
-], WrInputComponent.prototype, "disabled", void 0);
-__decorate([
-    InputBoolean()
-], WrInputComponent.prototype, "readonly", void 0);
-__decorate([
-    InputBoolean()
-], WrInputComponent.prototype, "autofocus", void 0);
+    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], exportAs: ["wrInput"], usesInheritance: true, ngImport: i0, template: "<div class=\"wr-input-prefix\" *ngIf=\"prefix\">\n  <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n</div>\n<div class=\"wr-input-el\">\n  <div *ngIf=\"passwordIcons\" class=\"wr-input-el-icon\" (click)=\"onPasswordVisibilityChange()\">\n    <wr-icon class=\"wr-input-el-icon__icon\" [name]=\"eyeOn ? 'eye' : 'eye-off'\"></wr-icon>\n  </div>\n  <input\n    #inputElement\n    class=\"wr-input-el__native\"\n    [ngModel]=\"valueAsString\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [type]=\"type\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (ngModelChange)=\"value = $event\"\n  />\n</div>\n<div class=\"wr-input-suffix\" *ngIf=\"suffix\">\n  <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: WrIconComponent, selector: "wr-icon[name]", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     InputBoolean()
 ], WrInputComponent.prototype, "passwordIcons", void 0);
@@ -1125,13 +1196,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => WrInputComponent),
                             multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => WrInputComponent),
+                            multi: true
                         }
-                    ], template: "<div class=\"wr-input-prefix\" *ngIf=\"prefix\">\n  <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n</div>\n<div class=\"wr-input-el\">\n  <div\n    *ngIf=\"passwordIcons\"\n    class=\"wr-input-el-icon\"\n    (click)=\"onPasswordVisibilityChange($event)\"\n  >\n    <wr-icon class=\"wr-input-el-icon__icon\" [name]=\"eyeOn ? 'eye' : 'eye-off'\"></wr-icon>\n  </div>\n  <input\n    #inputElement\n    class=\"wr-input-el__native\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder ? placeholder : ''\"\n    [attr.readonly]=\"readonly ? 'readonly' : null\"\n    [attr.autofocus]=\"autofocus ? 'autofocus' : null\"\n    [attr.disabled]=\"disabled ? 'disabled' : null\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onModelChange(value)\"\n  />\n</div>\n<div class=\"wr-input-suffix\" *ngIf=\"suffix\">\n  <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: i0.NgZone }]; }, propDecorators: { value: [{
+                    ], template: "<div class=\"wr-input-prefix\" *ngIf=\"prefix\">\n  <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n</div>\n<div class=\"wr-input-el\">\n  <div *ngIf=\"passwordIcons\" class=\"wr-input-el-icon\" (click)=\"onPasswordVisibilityChange()\">\n    <wr-icon class=\"wr-input-el-icon__icon\" [name]=\"eyeOn ? 'eye' : 'eye-off'\"></wr-icon>\n  </div>\n  <input\n    #inputElement\n    class=\"wr-input-el__native\"\n    [ngModel]=\"valueAsString\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [type]=\"type\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (ngModelChange)=\"value = $event\"\n  />\n</div>\n<div class=\"wr-input-suffix\" *ngIf=\"suffix\">\n  <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: i0.NgZone }]; }, propDecorators: { placeholder: [{
                 type: Input
-            }], type: [{
+            }], prefix: [{
                 type: Input
-            }], autocomplete: [{
+            }], suffix: [{
+                type: Input
+            }], passwordIcons: [{
+                type: Input
+            }], type: [{
                 type: Input
             }], inputmode: [{
                 type: Input
@@ -1139,15 +1219,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], readonly: [{
                 type: Input
-            }], autofocus: [{
-                type: Input
-            }], passwordIcons: [{
+            }], required: [{
                 type: Input
-            }], placeholder: [{
+            }], autofocus: [{
                 type: Input
-            }], prefix: [{
+            }], autocomplete: [{
                 type: Input
-            }], suffix: [{
+            }], value: [{
                 type: Input
             }], inputElement: [{
                 type: ViewChild,