@norwegian/core-components 6.22.1 → 6.22.2
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.
- package/esm2022/lib/components/input-text/input-text.component.mjs +2 -2
- package/esm2022/lib/components/page-header/page-header.component.mjs +3 -3
- package/esm2022/lib/components/page-header/search/search.component.mjs +3 -3
- package/fesm2022/norwegian-core-components.mjs +6 -6
- package/fesm2022/norwegian-core-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -158,11 +158,11 @@ export class InputTextComponent extends NasComponentBase {
|
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
160
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
161
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: InputTextComponent, selector: "nas-input-text", inputs: { id: "id", model: "model", error: "error", disabled: "disabled", active: "active", spaceless: "spaceless", 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 }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\" #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\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')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\"\n [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}</p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\" [formGroup]=\"nasFormGroup\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\" #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputReactive [nasClass]=\"getClass('text')\"\n [formControlName]=\"nasFormControlName\"\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')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\"\n [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\">{{ errorMessage }}</p>\n </span>\n <span [nasClass]=\"getClass('info')\" *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-text{display:block;margin-bottom:16px;position:relative}.nas-input-text__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-text__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input-text__label~.nas-input-text__icon{top:45px}.nas-input-text__info{display:block;right:12px;margin-bottom:24px}.nas-input-text__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input-text__message{margin-top:2px;display:flex;gap:8px}.nas-input-text__message--icon{transform:scale(.9)}.nas-input-text__message--text{color:#cc3a19;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-input-text__input{position:relative}.nas-input-text__input .nas-input-text__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input-text__input input[type=text]{border:2px solid #15273f;padding:12px 16px}.nas-input-text__input input[type=text]:placeholder-shown{border-color:#6f6f6f}.nas-input-text__input input[type=text] not:placeholder-shown{border-color:#6f6f6f}.nas-input-text__input--error input[type=text]{background-color:#fff5f3;border:2px solid #CC3A19;color:#15273f}.nas-input-text__input--disabled input[type=text]{background-color:#e3e3e3;border:0;color:#6f6f6f}.nas-input-text__input--active input[type=text]{border:2px solid #15273f;color:#15273f;background-color:#ebf4ff}.nas-input-text__input--spaceless input[type=text]{margin-bottom:0}.nas-input-text__input--active input[type=text]:hover,.nas-input-text__input--active input[type=text]:focus{outline:2px solid #0978e8;outline-offset:2px}.nas-input-text__input--active input[type=text]:hover ::placeholder,.nas-input-text__input--active input[type=text]:focus ::placeholder{color:#6f6f6f}.nas-input-text__controls{margin-bottom:0;position:relative}.nas-input-text__controls--label-inside{background-color:#fff;border:2px solid #6f6f6f}.nas-input-text__controls--label-inside .nas-input-text__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input-text__controls--label-inside--error{background-color:#fff5f3;border:2px solid #CC3A19}.nas-input-text__controls--label-inside--disabled{background-color:#e3e3e3;border:0}.nas-input-text__controls--label-inside--active{border:2px solid #15273f;background-color:#ebf4ff}.nas-input-text__controls--label-inside--error input[type=text],.nas-input-text__controls--label-inside--disabled input[type=text],.nas-input-text__controls--label-inside--active input[type=text],.nas-input-text__controls--label-inside input[type=text]{border:0}.nas-input-text__controls--label-inside--error .nas-input-text__label,.nas-input-text__controls--label-inside--disabled .nas-input-text__label,.nas-input-text__controls--label-inside .nas-input-text__label{padding-top:12px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input-text__controls--label-inside--error .nas-input-text__text,.nas-input-text__controls--label-inside--disabled .nas-input-text__text,.nas-input-text__controls--label-inside .nas-input-text__text{padding-top:0!important;padding-left:16px;padding-right:16px;padding-bottom:9px}.nas-input-text__controls--label-inside--error .nas-input-text__icon,.nas-input-text__controls--label-inside--disabled .nas-input-text__icon,.nas-input-text__controls--label-inside .nas-input-text__icon{top:-11px}@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 }); }
|
|
161
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: InputTextComponent, selector: "nas-input-text", inputs: { id: "id", model: "model", error: "error", disabled: "disabled", active: "active", spaceless: "spaceless", 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 }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\" #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\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')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\"\n [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}</p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\" [formGroup]=\"nasFormGroup\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\" #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputReactive [nasClass]=\"getClass('text')\"\n [formControlName]=\"nasFormControlName\"\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')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\"\n [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\">{{ errorMessage }}</p>\n </span>\n <span [nasClass]=\"getClass('info')\" *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-text{display:block;margin-bottom:16px;position:relative}.nas-input-text__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-text__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input-text__label~.nas-input-text__icon{top:45px}.nas-input-text__info{display:block;right:12px;margin-bottom:24px}.nas-input-text__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input-text__message{margin-top:2px;display:flex;gap:8px}.nas-input-text__message--icon{transform:scale(.9)}.nas-input-text__message--text{color:#cc3a19;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-input-text__input{position:relative}.nas-input-text__input .nas-input-text__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input-text__input input[type=text]{border:2px solid #15273f;padding:12px 16px}.nas-input-text__input input[type=text]:placeholder-shown{border-color:#6f6f6f}.nas-input-text__input input[type=text] not:placeholder-shown{border-color:#6f6f6f}.nas-input-text__input--error input[type=text]{background-color:#fff5f3;border:2px solid #CC3A19;color:#15273f}.nas-input-text__input--disabled input[type=text]{background-color:#e3e3e3;border:0;color:#6f6f6f}.nas-input-text__input--active input[type=text]{border:2px solid #15273f;color:#15273f;background-color:#ebf4ff}.nas-input-text__input--spaceless input[type=text]{margin-bottom:0}.nas-input-text__input--active input[type=text]:focus-visible{outline:2px solid #0978e8;outline-offset:2px}.nas-input-text__input--active input[type=text]:focus-visible ::placeholder{color:#6f6f6f}.nas-input-text__controls{margin-bottom:0;position:relative}.nas-input-text__controls--label-inside{background-color:#fff;border:2px solid #6f6f6f}.nas-input-text__controls--label-inside .nas-input-text__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input-text__controls--label-inside--error{background-color:#fff5f3;border:2px solid #CC3A19}.nas-input-text__controls--label-inside--disabled{background-color:#e3e3e3;border:0}.nas-input-text__controls--label-inside--active{border:2px solid #15273f;background-color:#ebf4ff}.nas-input-text__controls--label-inside--error input[type=text],.nas-input-text__controls--label-inside--disabled input[type=text],.nas-input-text__controls--label-inside--active input[type=text],.nas-input-text__controls--label-inside input[type=text]{border:0}.nas-input-text__controls--label-inside--error .nas-input-text__label,.nas-input-text__controls--label-inside--disabled .nas-input-text__label,.nas-input-text__controls--label-inside .nas-input-text__label{padding-top:12px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input-text__controls--label-inside--error .nas-input-text__text,.nas-input-text__controls--label-inside--disabled .nas-input-text__text,.nas-input-text__controls--label-inside .nas-input-text__text{padding-top:0!important;padding-left:16px;padding-right:16px;padding-bottom:9px}.nas-input-text__controls--label-inside--error .nas-input-text__icon,.nas-input-text__controls--label-inside--disabled .nas-input-text__icon,.nas-input-text__controls--label-inside .nas-input-text__icon{top:-11px}@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 }); }
|
|
162
162
|
}
|
|
163
163
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
164
164
|
type: Component,
|
|
165
|
-
args: [{ selector: 'nas-input-text', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\" #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\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')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\"\n [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}</p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\" [formGroup]=\"nasFormGroup\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\" #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputReactive [nasClass]=\"getClass('text')\"\n [formControlName]=\"nasFormControlName\"\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')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\"\n [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\">{{ errorMessage }}</p>\n </span>\n <span [nasClass]=\"getClass('info')\" *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-text{display:block;margin-bottom:16px;position:relative}.nas-input-text__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-text__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input-text__label~.nas-input-text__icon{top:45px}.nas-input-text__info{display:block;right:12px;margin-bottom:24px}.nas-input-text__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input-text__message{margin-top:2px;display:flex;gap:8px}.nas-input-text__message--icon{transform:scale(.9)}.nas-input-text__message--text{color:#cc3a19;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-input-text__input{position:relative}.nas-input-text__input .nas-input-text__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input-text__input input[type=text]{border:2px solid #15273f;padding:12px 16px}.nas-input-text__input input[type=text]:placeholder-shown{border-color:#6f6f6f}.nas-input-text__input input[type=text] not:placeholder-shown{border-color:#6f6f6f}.nas-input-text__input--error input[type=text]{background-color:#fff5f3;border:2px solid #CC3A19;color:#15273f}.nas-input-text__input--disabled input[type=text]{background-color:#e3e3e3;border:0;color:#6f6f6f}.nas-input-text__input--active input[type=text]{border:2px solid #15273f;color:#15273f;background-color:#ebf4ff}.nas-input-text__input--spaceless input[type=text]{margin-bottom:0}.nas-input-text__input--active input[type=text]:
|
|
165
|
+
args: [{ selector: 'nas-input-text', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\" #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\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')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\"\n [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}</p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\" [formGroup]=\"nasFormGroup\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\" #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputReactive [nasClass]=\"getClass('text')\"\n [formControlName]=\"nasFormControlName\"\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')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\"\n [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\">{{ errorMessage }}</p>\n </span>\n <span [nasClass]=\"getClass('info')\" *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-text{display:block;margin-bottom:16px;position:relative}.nas-input-text__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-text__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input-text__label~.nas-input-text__icon{top:45px}.nas-input-text__info{display:block;right:12px;margin-bottom:24px}.nas-input-text__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input-text__message{margin-top:2px;display:flex;gap:8px}.nas-input-text__message--icon{transform:scale(.9)}.nas-input-text__message--text{color:#cc3a19;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-input-text__input{position:relative}.nas-input-text__input .nas-input-text__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input-text__input input[type=text]{border:2px solid #15273f;padding:12px 16px}.nas-input-text__input input[type=text]:placeholder-shown{border-color:#6f6f6f}.nas-input-text__input input[type=text] not:placeholder-shown{border-color:#6f6f6f}.nas-input-text__input--error input[type=text]{background-color:#fff5f3;border:2px solid #CC3A19;color:#15273f}.nas-input-text__input--disabled input[type=text]{background-color:#e3e3e3;border:0;color:#6f6f6f}.nas-input-text__input--active input[type=text]{border:2px solid #15273f;color:#15273f;background-color:#ebf4ff}.nas-input-text__input--spaceless input[type=text]{margin-bottom:0}.nas-input-text__input--active input[type=text]:focus-visible{outline:2px solid #0978e8;outline-offset:2px}.nas-input-text__input--active input[type=text]:focus-visible ::placeholder{color:#6f6f6f}.nas-input-text__controls{margin-bottom:0;position:relative}.nas-input-text__controls--label-inside{background-color:#fff;border:2px solid #6f6f6f}.nas-input-text__controls--label-inside .nas-input-text__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input-text__controls--label-inside--error{background-color:#fff5f3;border:2px solid #CC3A19}.nas-input-text__controls--label-inside--disabled{background-color:#e3e3e3;border:0}.nas-input-text__controls--label-inside--active{border:2px solid #15273f;background-color:#ebf4ff}.nas-input-text__controls--label-inside--error input[type=text],.nas-input-text__controls--label-inside--disabled input[type=text],.nas-input-text__controls--label-inside--active input[type=text],.nas-input-text__controls--label-inside input[type=text]{border:0}.nas-input-text__controls--label-inside--error .nas-input-text__label,.nas-input-text__controls--label-inside--disabled .nas-input-text__label,.nas-input-text__controls--label-inside .nas-input-text__label{padding-top:12px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input-text__controls--label-inside--error .nas-input-text__text,.nas-input-text__controls--label-inside--disabled .nas-input-text__text,.nas-input-text__controls--label-inside .nas-input-text__text{padding-top:0!important;padding-left:16px;padding-right:16px;padding-bottom:9px}.nas-input-text__controls--label-inside--error .nas-input-text__icon,.nas-input-text__controls--label-inside--disabled .nas-input-text__icon,.nas-input-text__controls--label-inside .nas-input-text__icon{top:-11px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"] }]
|
|
166
166
|
}], ctorParameters: function () { return []; }, propDecorators: { inputReactive: [{
|
|
167
167
|
type: ViewChild,
|
|
168
168
|
args: ['inputReactive']
|