@norwegian/core-components 6.24.0 → 6.24.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -114,11 +114,11 @@ export class InputComponent extends NasComponentBase {
|
|
|
114
114
|
this.blur.emit(value);
|
|
115
115
|
}
|
|
116
116
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
117
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: InputComponent, selector: "nas-input", inputs: { id: "id", model: "model", error: "error", disabled: "disabled", spaceless: "spaceless", loading: "loading", label: "label", labelInside: "labelInside", errorMessage: "errorMessage", placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", info: "info", icon: "icon", type: "type", readonly: "readonly", name: "name", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], required: "required", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", min: "min", max: "max", line: "line", pattern: "pattern" }, outputs: { modelChange: "modelChange", blur: "blur" }, viewQueries: [{ propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }, { propertyName: "inputNotReactive", first: true, predicate: ["inputNotReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"\n [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputReactive [formControlName]=\"nasFormControlName\"\n [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"/>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__text{position:relative;margin-bottom:3px}.nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input__text[disabled]{opacity:.5}.nas-input__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-input__info{display:block;margin-top:9px;margin-bottom:24px}.nas-input--error .nas-input__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-input--error .nas-input__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-input--error .nas-input__line{background-color:#e5212d}.nas-input--error .nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input--disabled{color:#909090}.nas-input--disabled .nas-input__text{opacity:.5}.nas-input--loading .nas-input__line{background-color:#003251;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-input--spaceless{margin-bottom:0}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__controls{margin-bottom:0}.nas-input__controls--label-inside{background:#fff}.nas-input__controls--label-inside .nas-input__label{padding-top:9px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside .nas-input__text{padding:0 16px 9px}.nas-input__controls--label-inside .nas-input__icon{top:22px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
117
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: InputComponent, selector: "nas-input", inputs: { id: "id", model: "model", error: "error", disabled: "disabled", spaceless: "spaceless", loading: "loading", label: "label", labelInside: "labelInside", errorMessage: "errorMessage", placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", info: "info", icon: "icon", type: "type", readonly: "readonly", name: "name", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], required: "required", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", min: "min", max: "max", line: "line", pattern: "pattern" }, outputs: { modelChange: "modelChange", blur: "blur" }, viewQueries: [{ propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }, { propertyName: "inputNotReactive", first: true, predicate: ["inputNotReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"\n [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputReactive [formControlName]=\"nasFormControlName\"\n [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"/>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__text{border:0;position:relative;margin-bottom:3px}.nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input__text[disabled]{opacity:.5}.nas-input__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-input__info{display:block;margin-top:9px;margin-bottom:24px}.nas-input--error .nas-input__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-input--error .nas-input__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-input--error .nas-input__line{background-color:#e5212d}.nas-input--error .nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input--disabled{color:#909090}.nas-input--disabled .nas-input__text{opacity:.5}.nas-input--loading .nas-input__line{background-color:#003251;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-input--spaceless{margin-bottom:0}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__controls{margin-bottom:0}.nas-input__controls--label-inside{background:#fff}.nas-input__controls--label-inside .nas-input__label{padding-top:9px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside .nas-input__text{padding:0 16px 9px}.nas-input__controls--label-inside .nas-input__icon{top:22px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
118
118
|
}
|
|
119
119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InputComponent, decorators: [{
|
|
120
120
|
type: Component,
|
|
121
|
-
args: [{ selector: 'nas-input', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"\n [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputReactive [formControlName]=\"nasFormControlName\"\n [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"/>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__text{position:relative;margin-bottom:3px}.nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input__text[disabled]{opacity:.5}.nas-input__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-input__info{display:block;margin-top:9px;margin-bottom:24px}.nas-input--error .nas-input__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-input--error .nas-input__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-input--error .nas-input__line{background-color:#e5212d}.nas-input--error .nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input--disabled{color:#909090}.nas-input--disabled .nas-input__text{opacity:.5}.nas-input--loading .nas-input__line{background-color:#003251;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-input--spaceless{margin-bottom:0}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__controls{margin-bottom:0}.nas-input__controls--label-inside{background:#fff}.nas-input__controls--label-inside .nas-input__label{padding-top:9px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside .nas-input__text{padding:0 16px 9px}.nas-input__controls--label-inside .nas-input__icon{top:22px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"] }]
|
|
121
|
+
args: [{ selector: 'nas-input', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"\n [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputReactive [formControlName]=\"nasFormControlName\"\n [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"/>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__text{border:0;position:relative;margin-bottom:3px}.nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input__text[disabled]{opacity:.5}.nas-input__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-input__info{display:block;margin-top:9px;margin-bottom:24px}.nas-input--error .nas-input__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-input--error .nas-input__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-input--error .nas-input__line{background-color:#e5212d}.nas-input--error .nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input--disabled{color:#909090}.nas-input--disabled .nas-input__text{opacity:.5}.nas-input--loading .nas-input__line{background-color:#003251;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-input--spaceless{margin-bottom:0}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__controls{margin-bottom:0}.nas-input__controls--label-inside{background:#fff}.nas-input__controls--label-inside .nas-input__label{padding-top:9px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside .nas-input__text{padding:0 16px 9px}.nas-input__controls--label-inside .nas-input__icon{top:22px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"] }]
|
|
122
122
|
}], ctorParameters: function () { return []; }, propDecorators: { inputReactive: [{
|
|
123
123
|
type: ViewChild,
|
|
124
124
|
args: ['inputReactive']
|
|
@@ -8108,11 +8108,11 @@ class InputComponent extends NasComponentBase {
|
|
|
8108
8108
|
this.blur.emit(value);
|
|
8109
8109
|
}
|
|
8110
8110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: InputComponent, selector: "nas-input", inputs: { id: "id", model: "model", error: "error", disabled: "disabled", spaceless: "spaceless", loading: "loading", label: "label", labelInside: "labelInside", errorMessage: "errorMessage", placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", info: "info", icon: "icon", type: "type", readonly: "readonly", name: "name", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], required: "required", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", min: "min", max: "max", line: "line", pattern: "pattern" }, outputs: { modelChange: "modelChange", blur: "blur" }, viewQueries: [{ propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }, { propertyName: "inputNotReactive", first: true, predicate: ["inputNotReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"\n [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputReactive [formControlName]=\"nasFormControlName\"\n [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"/>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__text{position:relative;margin-bottom:3px}.nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input__text[disabled]{opacity:.5}.nas-input__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-input__info{display:block;margin-top:9px;margin-bottom:24px}.nas-input--error .nas-input__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-input--error .nas-input__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-input--error .nas-input__line{background-color:#e5212d}.nas-input--error .nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input--disabled{color:#909090}.nas-input--disabled .nas-input__text{opacity:.5}.nas-input--loading .nas-input__line{background-color:#003251;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-input--spaceless{margin-bottom:0}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__controls{margin-bottom:0}.nas-input__controls--label-inside{background:#fff}.nas-input__controls--label-inside .nas-input__label{padding-top:9px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside .nas-input__text{padding:0 16px 9px}.nas-input__controls--label-inside .nas-input__icon{top:22px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: InputComponent, selector: "nas-input", inputs: { id: "id", model: "model", error: "error", disabled: "disabled", spaceless: "spaceless", loading: "loading", label: "label", labelInside: "labelInside", errorMessage: "errorMessage", placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", info: "info", icon: "icon", type: "type", readonly: "readonly", name: "name", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], required: "required", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", min: "min", max: "max", line: "line", pattern: "pattern" }, outputs: { modelChange: "modelChange", blur: "blur" }, viewQueries: [{ propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }, { propertyName: "inputNotReactive", first: true, predicate: ["inputNotReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"\n [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputReactive [formControlName]=\"nasFormControlName\"\n [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"/>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__text{border:0;position:relative;margin-bottom:3px}.nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input__text[disabled]{opacity:.5}.nas-input__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-input__info{display:block;margin-top:9px;margin-bottom:24px}.nas-input--error .nas-input__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-input--error .nas-input__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-input--error .nas-input__line{background-color:#e5212d}.nas-input--error .nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input--disabled{color:#909090}.nas-input--disabled .nas-input__text{opacity:.5}.nas-input--loading .nas-input__line{background-color:#003251;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-input--spaceless{margin-bottom:0}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__controls{margin-bottom:0}.nas-input__controls--label-inside{background:#fff}.nas-input__controls--label-inside .nas-input__label{padding-top:9px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside .nas-input__text{padding:0 16px 9px}.nas-input__controls--label-inside .nas-input__icon{top:22px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8112
8112
|
}
|
|
8113
8113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InputComponent, decorators: [{
|
|
8114
8114
|
type: Component,
|
|
8115
|
-
args: [{ selector: 'nas-input', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"\n [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputReactive [formControlName]=\"nasFormControlName\"\n [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"/>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__text{position:relative;margin-bottom:3px}.nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input__text[disabled]{opacity:.5}.nas-input__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-input__info{display:block;margin-top:9px;margin-bottom:24px}.nas-input--error .nas-input__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-input--error .nas-input__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-input--error .nas-input__line{background-color:#e5212d}.nas-input--error .nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input--disabled{color:#909090}.nas-input--disabled .nas-input__text{opacity:.5}.nas-input--loading .nas-input__line{background-color:#003251;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-input--spaceless{margin-bottom:0}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__controls{margin-bottom:0}.nas-input__controls--label-inside{background:#fff}.nas-input__controls--label-inside .nas-input__label{padding-top:9px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside .nas-input__text{padding:0 16px 9px}.nas-input__controls--label-inside .nas-input__icon{top:22px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"] }]
|
|
8115
|
+
args: [{ selector: 'nas-input', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"\n [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputReactive [formControlName]=\"nasFormControlName\"\n [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"/>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\" [id]=\"errorId\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__text{border:0;position:relative;margin-bottom:3px}.nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input__text[disabled]{opacity:.5}.nas-input__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-input__info{display:block;margin-top:9px;margin-bottom:24px}.nas-input--error .nas-input__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-input--error .nas-input__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-input--error .nas-input__line{background-color:#e5212d}.nas-input--error .nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input--disabled{color:#909090}.nas-input--disabled .nas-input__text{opacity:.5}.nas-input--loading .nas-input__line{background-color:#003251;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-input--spaceless{margin-bottom:0}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__controls{margin-bottom:0}.nas-input__controls--label-inside{background:#fff}.nas-input__controls--label-inside .nas-input__label{padding-top:9px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside .nas-input__text{padding:0 16px 9px}.nas-input__controls--label-inside .nas-input__icon{top:22px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"] }]
|
|
8116
8116
|
}], ctorParameters: function () { return []; }, propDecorators: { inputReactive: [{
|
|
8117
8117
|
type: ViewChild,
|
|
8118
8118
|
args: ['inputReactive']
|