@norwegian/core-components 7.12.2 → 7.12.4
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/input.component.mjs +6 -4
- package/esm2022/lib/components/tooltip/tooltip.component.mjs +54 -17
- package/fesm2022/norwegian-core-components.mjs +58 -19
- package/fesm2022/norwegian-core-components.mjs.map +1 -1
- package/lib/components/input/input.component.d.ts +9 -3
- package/lib/components/tooltip/tooltip.component.d.ts +5 -0
- package/package.json +1 -1
|
@@ -8448,11 +8448,11 @@ class InputComponent extends NasComponentBase {
|
|
|
8448
8448
|
this.lastWasTab = false;
|
|
8449
8449
|
}
|
|
8450
8450
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8451
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputComponent, selector: "nas-input", inputs: { id: "id", model: "model", error: "error", disabled: "disabled", spaceless: "spaceless", label: "label", labelInside: "labelInside", errorMessage: "errorMessage", placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", info: "info", icon: "icon", numeric: "numeric", 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" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, 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 <label [nasClass]=\"mainClass()\">\n <div #controls [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\" (keydown)=\"onKeyDown()\"\n (focusin)=\"setActiveInput(true)\" (focusout)=\"setActiveInput(false)\">\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\" [attr.id]=\"inputId\" [attr.type]=\"type\" [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\" [attr.max]=\"max\"\n [attr.pattern]=\"pattern\" [attr.inputmode]=\"exists(numeric) ? 'numeric' : null\" autocomplete=\"one-time-code\" (blur)=\"onBlur($event.target.value)\" [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\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')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\" [formGroup]=\"nasFormGroup\">\n <div #controls [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\" \n (focusin)=\"setActiveInput(true)\" (focusout)=\"setActiveInput(false)\" (keydown)=\"onKeyDown()\">\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <input #inputReactive [nasClass]=\"getClass('text')\" [formControlName]=\"nasFormControlName\" [attr.id]=\"inputId\"\n [attr.type]=\"type\" [attr.name]=\"name\" [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\"\n [required]=\"required\" [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\" [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\"\n [attr.max]=\"max\" [attr.pattern]=\"pattern\" [attr.inputmode]=\"numeric ? 'numeric' : null\" autocomplete=\"one-time-code\" (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 <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')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\">{{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n </label>\n</ng-template>", 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 input{padding:12px 16px;border:2px solid #6F6F6F}.nas-input input:placeholder-shown{border-color:#6f6f6f}.nas-input input:not:placeholder-shown{border-color:#6f6f6f}.nas-input--error input{border:2px solid #E5212D!important;background-color:#fff5f3;color:#15273f}.nas-input--error .nas-input__controls--label-inside{background-color:#fff5f3;border:2px solid #E5212D!important}.nas-input--disabled input{background-color:#e9e7e4;border:0;color:#6f6f6f}.nas-input--disabled .nas-input__controls--label-inside{background-color:#e9e7e4}.nas-input--active input{border:2px solid #15273F!important;color:#15273f;background-color:#ebf4ff}.nas-input--active input::placeholder{color:#6f6f6f}.nas-input--active .nas-input__controls--label-inside{border:2px solid #15273F;background-color:#ebf4ff}.nas-input--valid input,.nas-input--valid .nas-input__controls--label-inside{border:2px solid #15273F}.nas-input--focus input,.nas-input--focus .nas-input__controls--label-inside{outline:2px solid #0978E8;outline-offset:2px}.nas-input--focus .nas-input__controls--label-inside input{outline:none}.nas-input--spaceless input{margin-bottom:0}.nas-input__label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,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:43px}.nas-input__info{display:block;right:12px;margin-bottom:24px}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__message{margin-top:2px;display:flex;gap:8px}.nas-input__message--icon{transform:scale(.9)}.nas-input__message--text{color:#b12a0b;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-input__controls{margin-bottom:0;position:relative}.nas-input__controls--label-inside{background-color:#fff;border:2px solid #6F6F6F}.nas-input__controls--label-inside .nas-input__label{font-size:14px;line-height:20px;margin-bottom:0;padding-top:12px;padding-left:16px}.nas-input__controls--label-inside .nas-input__label~.nas-input__icon{top:22px}.nas-input__controls--label-inside input{padding-top:0;border:0!important}\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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.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$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8451
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputComponent, selector: "nas-input", inputs: { id: "id", model: "model", error: "error", disabled: "disabled", spaceless: "spaceless", label: "label", labelInside: "labelInside", errorMessage: "errorMessage", placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", info: "info", icon: "icon", inputModeValue: "inputModeValue", autocompleteValue: "autocompleteValue", 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" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, 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 <label [nasClass]=\"mainClass()\">\n <div #controls [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\" (keydown)=\"onKeyDown()\"\n (focusin)=\"setActiveInput(true)\" (focusout)=\"setActiveInput(false)\">\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\" [attr.id]=\"inputId\" [attr.type]=\"type\" [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\" [attr.max]=\"max\"\n [attr.pattern]=\"pattern\" [attr.inputmode]=\"inputModeValue ? inputModeValue : null\" [attr.autocomplete]=\"autocompleteValue ? autocompleteValue : null\" (blur)=\"onBlur($event.target.value)\" [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\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')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\" [formGroup]=\"nasFormGroup\">\n <div #controls [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\" \n (focusin)=\"setActiveInput(true)\" (focusout)=\"setActiveInput(false)\" (keydown)=\"onKeyDown()\">\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <input #inputReactive [nasClass]=\"getClass('text')\" [formControlName]=\"nasFormControlName\" [attr.id]=\"inputId\"\n [attr.type]=\"type\" [attr.name]=\"name\" [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\"\n [required]=\"required\" [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\" [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\"\n [attr.max]=\"max\" [attr.pattern]=\"pattern\" [attr.inputmode]=\"inputModeValue\n ? inputModeValue : null\" [attr.autocomplete]=\"autocompleteValue ? autocompleteValue : null\" (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 <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')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\">{{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n </label>\n</ng-template>", 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 input{padding:12px 16px;border:2px solid #6F6F6F}.nas-input input:placeholder-shown{border-color:#6f6f6f}.nas-input input:not:placeholder-shown{border-color:#6f6f6f}.nas-input--error input{border:2px solid #E5212D!important;background-color:#fff5f3;color:#15273f}.nas-input--error .nas-input__controls--label-inside{background-color:#fff5f3;border:2px solid #E5212D!important}.nas-input--disabled input{background-color:#e9e7e4;border:0;color:#6f6f6f}.nas-input--disabled .nas-input__controls--label-inside{background-color:#e9e7e4}.nas-input--active input{border:2px solid #15273F!important;color:#15273f;background-color:#ebf4ff}.nas-input--active input::placeholder{color:#6f6f6f}.nas-input--active .nas-input__controls--label-inside{border:2px solid #15273F;background-color:#ebf4ff}.nas-input--valid input,.nas-input--valid .nas-input__controls--label-inside{border:2px solid #15273F}.nas-input--focus input,.nas-input--focus .nas-input__controls--label-inside{outline:2px solid #0978E8;outline-offset:2px}.nas-input--focus .nas-input__controls--label-inside input{outline:none}.nas-input--spaceless input{margin-bottom:0}.nas-input__label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,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:43px}.nas-input__info{display:block;right:12px;margin-bottom:24px}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__message{margin-top:2px;display:flex;gap:8px}.nas-input__message--icon{transform:scale(.9)}.nas-input__message--text{color:#b12a0b;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-input__controls{margin-bottom:0;position:relative}.nas-input__controls--label-inside{background-color:#fff;border:2px solid #6F6F6F}.nas-input__controls--label-inside .nas-input__label{font-size:14px;line-height:20px;margin-bottom:0;padding-top:12px;padding-left:16px}.nas-input__controls--label-inside .nas-input__label~.nas-input__icon{top:22px}.nas-input__controls--label-inside input{padding-top:0;border:0!important}\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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.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$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8452
8452
|
}
|
|
8453
8453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
|
|
8454
8454
|
type: Component,
|
|
8455
|
-
args: [{ selector: 'nas-input', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div #controls [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\" (keydown)=\"onKeyDown()\"\n (focusin)=\"setActiveInput(true)\" (focusout)=\"setActiveInput(false)\">\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\" [attr.id]=\"inputId\" [attr.type]=\"type\" [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\" [attr.max]=\"max\"\n [attr.pattern]=\"pattern\" [attr.inputmode]=\"
|
|
8455
|
+
args: [{ selector: 'nas-input', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div #controls [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\" (keydown)=\"onKeyDown()\"\n (focusin)=\"setActiveInput(true)\" (focusout)=\"setActiveInput(false)\">\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\" [attr.id]=\"inputId\" [attr.type]=\"type\" [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\" [attr.max]=\"max\"\n [attr.pattern]=\"pattern\" [attr.inputmode]=\"inputModeValue ? inputModeValue : null\" [attr.autocomplete]=\"autocompleteValue ? autocompleteValue : null\" (blur)=\"onBlur($event.target.value)\" [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\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')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\" [formGroup]=\"nasFormGroup\">\n <div #controls [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\" \n (focusin)=\"setActiveInput(true)\" (focusout)=\"setActiveInput(false)\" (keydown)=\"onKeyDown()\">\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <input #inputReactive [nasClass]=\"getClass('text')\" [formControlName]=\"nasFormControlName\" [attr.id]=\"inputId\"\n [attr.type]=\"type\" [attr.name]=\"name\" [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\"\n [required]=\"required\" [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\" [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\"\n [attr.max]=\"max\" [attr.pattern]=\"pattern\" [attr.inputmode]=\"inputModeValue\n ? inputModeValue : null\" [attr.autocomplete]=\"autocompleteValue ? autocompleteValue : null\" (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 <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')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\">{{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n </label>\n</ng-template>", 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 input{padding:12px 16px;border:2px solid #6F6F6F}.nas-input input:placeholder-shown{border-color:#6f6f6f}.nas-input input:not:placeholder-shown{border-color:#6f6f6f}.nas-input--error input{border:2px solid #E5212D!important;background-color:#fff5f3;color:#15273f}.nas-input--error .nas-input__controls--label-inside{background-color:#fff5f3;border:2px solid #E5212D!important}.nas-input--disabled input{background-color:#e9e7e4;border:0;color:#6f6f6f}.nas-input--disabled .nas-input__controls--label-inside{background-color:#e9e7e4}.nas-input--active input{border:2px solid #15273F!important;color:#15273f;background-color:#ebf4ff}.nas-input--active input::placeholder{color:#6f6f6f}.nas-input--active .nas-input__controls--label-inside{border:2px solid #15273F;background-color:#ebf4ff}.nas-input--valid input,.nas-input--valid .nas-input__controls--label-inside{border:2px solid #15273F}.nas-input--focus input,.nas-input--focus .nas-input__controls--label-inside{outline:2px solid #0978E8;outline-offset:2px}.nas-input--focus .nas-input__controls--label-inside input{outline:none}.nas-input--spaceless input{margin-bottom:0}.nas-input__label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,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:43px}.nas-input__info{display:block;right:12px;margin-bottom:24px}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__message{margin-top:2px;display:flex;gap:8px}.nas-input__message--icon{transform:scale(.9)}.nas-input__message--text{color:#b12a0b;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-input__controls{margin-bottom:0;position:relative}.nas-input__controls--label-inside{background-color:#fff;border:2px solid #6F6F6F}.nas-input__controls--label-inside .nas-input__label{font-size:14px;line-height:20px;margin-bottom:0;padding-top:12px;padding-left:16px}.nas-input__controls--label-inside .nas-input__label~.nas-input__icon{top:22px}.nas-input__controls--label-inside input{padding-top:0;border:0!important}\n"] }]
|
|
8456
8456
|
}], ctorParameters: function () { return []; }, propDecorators: { inputReactive: [{
|
|
8457
8457
|
type: ViewChild,
|
|
8458
8458
|
args: ['inputReactive']
|
|
@@ -8492,7 +8492,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8492
8492
|
type: Input
|
|
8493
8493
|
}], icon: [{
|
|
8494
8494
|
type: Input
|
|
8495
|
-
}],
|
|
8495
|
+
}], inputModeValue: [{
|
|
8496
|
+
type: Input
|
|
8497
|
+
}], autocompleteValue: [{
|
|
8496
8498
|
type: Input
|
|
8497
8499
|
}], type: [{
|
|
8498
8500
|
type: Input
|
|
@@ -13112,21 +13114,28 @@ class TooltipComponent extends NasComponentBase {
|
|
|
13112
13114
|
this.innerWidth = window.innerWidth;
|
|
13113
13115
|
}
|
|
13114
13116
|
onMouseEnter() {
|
|
13117
|
+
if (this.hostListenerIgnored) {
|
|
13118
|
+
return;
|
|
13119
|
+
}
|
|
13120
|
+
this.enabled = true;
|
|
13115
13121
|
setTimeout(() => {
|
|
13116
|
-
|
|
13117
|
-
|
|
13118
|
-
|
|
13119
|
-
this.enabled = true;
|
|
13120
|
-
setTimeout(() => {
|
|
13121
|
-
this.adjustTooltipPosition();
|
|
13122
|
-
});
|
|
13123
|
-
}, 300);
|
|
13122
|
+
this.adjustTooltipPosition();
|
|
13123
|
+
});
|
|
13124
|
+
this.setToolTipOpacity(1, 300);
|
|
13124
13125
|
}
|
|
13125
13126
|
onMouseLeave() {
|
|
13126
|
-
|
|
13127
|
-
|
|
13127
|
+
this.hideToolTip();
|
|
13128
|
+
}
|
|
13129
|
+
onScroll() {
|
|
13130
|
+
this.hideToolTip();
|
|
13131
|
+
}
|
|
13132
|
+
onClickOutside(event) {
|
|
13133
|
+
if (this.container) {
|
|
13134
|
+
const clickedInside = this.container.nativeElement.contains(event.target);
|
|
13135
|
+
if (!clickedInside) {
|
|
13136
|
+
this.hideToolTip();
|
|
13137
|
+
}
|
|
13128
13138
|
}
|
|
13129
|
-
this.enabled = false;
|
|
13130
13139
|
}
|
|
13131
13140
|
onResize() {
|
|
13132
13141
|
this.innerWidth = window.innerWidth;
|
|
@@ -13152,12 +13161,14 @@ class TooltipComponent extends NasComponentBase {
|
|
|
13152
13161
|
}
|
|
13153
13162
|
onClickClose() {
|
|
13154
13163
|
this.enabled = false;
|
|
13164
|
+
this.setToolTipOpacity(0);
|
|
13155
13165
|
}
|
|
13156
13166
|
onClickOpenMobileView() {
|
|
13157
13167
|
if (!this.deviceHelper.isMobileWidth()) {
|
|
13158
13168
|
return;
|
|
13159
13169
|
}
|
|
13160
13170
|
this.enabled = true;
|
|
13171
|
+
this.setToolTipOpacity(1, 300);
|
|
13161
13172
|
}
|
|
13162
13173
|
adjustTooltipPosition() {
|
|
13163
13174
|
if (!this.tooltip || !this.content) {
|
|
@@ -13178,26 +13189,48 @@ class TooltipComponent extends NasComponentBase {
|
|
|
13178
13189
|
}
|
|
13179
13190
|
}
|
|
13180
13191
|
renderViewHostListenerIgnoredOnInit() {
|
|
13192
|
+
const tooltipElement = this.tooltip?.nativeElement;
|
|
13193
|
+
const contentElement = this.content?.nativeElement;
|
|
13194
|
+
if (!tooltipElement || !contentElement) {
|
|
13195
|
+
return;
|
|
13196
|
+
}
|
|
13197
|
+
tooltipElement.style.opacity = 1;
|
|
13181
13198
|
if (this.exists(this.left)) {
|
|
13182
13199
|
this.left = true;
|
|
13183
13200
|
}
|
|
13184
13201
|
if (this.exists(this.right)) {
|
|
13185
13202
|
this.right = true;
|
|
13186
|
-
const tooltipElement = this.tooltip?.nativeElement;
|
|
13187
|
-
const contentElement = this.content?.nativeElement;
|
|
13188
13203
|
if (tooltipElement && contentElement) {
|
|
13189
13204
|
const contentWidth = contentElement.getBoundingClientRect()?.width;
|
|
13190
13205
|
tooltipElement.style.right = `${contentWidth / 2}px`;
|
|
13191
13206
|
}
|
|
13192
13207
|
}
|
|
13193
13208
|
}
|
|
13209
|
+
hideToolTip() {
|
|
13210
|
+
if (this.hostListenerIgnored) {
|
|
13211
|
+
return;
|
|
13212
|
+
}
|
|
13213
|
+
this.enabled = false;
|
|
13214
|
+
this.setToolTipOpacity(0);
|
|
13215
|
+
}
|
|
13216
|
+
setToolTipOpacity(value, timout = 0) {
|
|
13217
|
+
if (!this.tooltip) {
|
|
13218
|
+
return;
|
|
13219
|
+
}
|
|
13220
|
+
setTimeout(() => {
|
|
13221
|
+
this.tooltip.nativeElement.style.opacity = value;
|
|
13222
|
+
}, timout);
|
|
13223
|
+
}
|
|
13194
13224
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, deps: [{ token: DeviceHelper }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13195
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipComponent, selector: "nas-tooltip", inputs: { text: "text", enabled: "enabled", left: "left", right: "right" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getClasses('')\">\n <div [hidden]=\"!text || !enabled\" [nasClass]=\"getClasses('tooltip', [left && 'left', right && 'right'])\" #tooltip>\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close--light'\" [type]=\"'small'\"></nas-icon>\n </button>\n <p [nasClass]=\"getClasses('text')\">{{text}}</p>\n <span [nasClass]=\"getClasses('tooltip--arrow', [left && 'left', right && 'right'])\"></span>\n </div>\n <div [nasClass]=\"getClasses('content')\" #content (click)=\"onClickOpenMobileView()\">\n <ng-content></ng-content>\n </div>\n</div>", 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)}}:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.nas-tooltip{position:relative}.nas-tooltip__tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-16px);background-color:#15273f;padding:16px;width:-webkit-max-content;width:max-content;max-width:250px}.nas-tooltip__tooltip--left{transform:translate(0) translateY(-16px)}.nas-tooltip__tooltip--right{transform:translate(0) translateY(-16px);left:unset}.nas-tooltip__tooltip--arrow{position:absolute;display:block;bottom:-8px;left:50%;transform:translate(-50%) rotate(45deg);border-top:24px solid #15273F;border-right:24px solid #15273F}.nas-tooltip__tooltip--arrow--left{transform:translate(0) rotate(0);left:0;bottom:-12px;border-top:16px solid #15273F;border-right:24px solid transparent}.nas-tooltip__tooltip--arrow--right{transform:translate(0) rotate(0);left:unset;right:0;bottom:-12px;border-top:16px solid #15273F;border-left:24px solid transparent;border-right:0}.nas-tooltip__text{font-size:14px;line-height:20px;color:#fff;margin:0}.nas-tooltip__close{float:right;height:auto;display:block}@media (min-width: 640px){.nas-tooltip__close{display:none}}.nas-tooltip__close ::ng-deep nas-icon,.nas-tooltip__close ::ng-deep .nas-icon-small{display:block;height:16px;width:16px;margin:0}\n"], dependencies: [{ kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }] }); }
|
|
13225
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipComponent, selector: "nas-tooltip", inputs: { text: "text", enabled: "enabled", left: "left", right: "right" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:scroll": "onScroll()", "document:click": "onClickOutside($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #container [nasClass]=\"getClasses('')\">\n <div [hidden]=\"!text || !enabled\" [nasClass]=\"getClasses('tooltip', [left && 'left', right && 'right'])\" #tooltip>\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close--light'\" [type]=\"'small'\"></nas-icon>\n </button>\n <p [nasClass]=\"getClasses('text')\">{{text}}</p>\n <span [nasClass]=\"getClasses('tooltip--arrow', [left && 'left', right && 'right'])\"></span>\n </div>\n <div [nasClass]=\"getClasses('content')\" #content (click)=\"onClickOpenMobileView()\">\n <ng-content></ng-content>\n </div>\n</div>", 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)}}:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.nas-tooltip{position:relative}.nas-tooltip__tooltip{opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-16px);background-color:#15273f;padding:16px;width:-webkit-max-content;width:max-content;max-width:250px}.nas-tooltip__tooltip--left{transform:translate(0) translateY(-16px)}.nas-tooltip__tooltip--right{transform:translate(0) translateY(-16px);left:unset}.nas-tooltip__tooltip--arrow{position:absolute;display:block;bottom:-8px;left:50%;transform:translate(-50%) rotate(45deg);border-top:24px solid #15273F;border-right:24px solid #15273F}.nas-tooltip__tooltip--arrow--left{transform:translate(0) rotate(0);left:0;bottom:-12px;border-top:16px solid #15273F;border-right:24px solid transparent}.nas-tooltip__tooltip--arrow--right{transform:translate(0) rotate(0);left:unset;right:0;bottom:-12px;border-top:16px solid #15273F;border-left:24px solid transparent;border-right:0}.nas-tooltip__text{font-size:14px;line-height:20px;color:#fff;margin:0}.nas-tooltip__close{float:right;height:auto;display:block}@media (min-width: 640px){.nas-tooltip__close{display:none}}.nas-tooltip__close ::ng-deep nas-icon,.nas-tooltip__close ::ng-deep .nas-icon-small{display:block;height:16px;width:16px;margin:0}\n"], dependencies: [{ kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }] }); }
|
|
13196
13226
|
}
|
|
13197
13227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
13198
13228
|
type: Component,
|
|
13199
|
-
args: [{ selector: 'nas-tooltip', template: "<div [nasClass]=\"getClasses('')\">\n <div [hidden]=\"!text || !enabled\" [nasClass]=\"getClasses('tooltip', [left && 'left', right && 'right'])\" #tooltip>\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close--light'\" [type]=\"'small'\"></nas-icon>\n </button>\n <p [nasClass]=\"getClasses('text')\">{{text}}</p>\n <span [nasClass]=\"getClasses('tooltip--arrow', [left && 'left', right && 'right'])\"></span>\n </div>\n <div [nasClass]=\"getClasses('content')\" #content (click)=\"onClickOpenMobileView()\">\n <ng-content></ng-content>\n </div>\n</div>", 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)}}:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.nas-tooltip{position:relative}.nas-tooltip__tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-16px);background-color:#15273f;padding:16px;width:-webkit-max-content;width:max-content;max-width:250px}.nas-tooltip__tooltip--left{transform:translate(0) translateY(-16px)}.nas-tooltip__tooltip--right{transform:translate(0) translateY(-16px);left:unset}.nas-tooltip__tooltip--arrow{position:absolute;display:block;bottom:-8px;left:50%;transform:translate(-50%) rotate(45deg);border-top:24px solid #15273F;border-right:24px solid #15273F}.nas-tooltip__tooltip--arrow--left{transform:translate(0) rotate(0);left:0;bottom:-12px;border-top:16px solid #15273F;border-right:24px solid transparent}.nas-tooltip__tooltip--arrow--right{transform:translate(0) rotate(0);left:unset;right:0;bottom:-12px;border-top:16px solid #15273F;border-left:24px solid transparent;border-right:0}.nas-tooltip__text{font-size:14px;line-height:20px;color:#fff;margin:0}.nas-tooltip__close{float:right;height:auto;display:block}@media (min-width: 640px){.nas-tooltip__close{display:none}}.nas-tooltip__close ::ng-deep nas-icon,.nas-tooltip__close ::ng-deep .nas-icon-small{display:block;height:16px;width:16px;margin:0}\n"] }]
|
|
13200
|
-
}], ctorParameters: function () { return [{ type: DeviceHelper }]; }, propDecorators: {
|
|
13229
|
+
args: [{ selector: 'nas-tooltip', template: "<div #container [nasClass]=\"getClasses('')\">\n <div [hidden]=\"!text || !enabled\" [nasClass]=\"getClasses('tooltip', [left && 'left', right && 'right'])\" #tooltip>\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close--light'\" [type]=\"'small'\"></nas-icon>\n </button>\n <p [nasClass]=\"getClasses('text')\">{{text}}</p>\n <span [nasClass]=\"getClasses('tooltip--arrow', [left && 'left', right && 'right'])\"></span>\n </div>\n <div [nasClass]=\"getClasses('content')\" #content (click)=\"onClickOpenMobileView()\">\n <ng-content></ng-content>\n </div>\n</div>", 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)}}:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.nas-tooltip{position:relative}.nas-tooltip__tooltip{opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-16px);background-color:#15273f;padding:16px;width:-webkit-max-content;width:max-content;max-width:250px}.nas-tooltip__tooltip--left{transform:translate(0) translateY(-16px)}.nas-tooltip__tooltip--right{transform:translate(0) translateY(-16px);left:unset}.nas-tooltip__tooltip--arrow{position:absolute;display:block;bottom:-8px;left:50%;transform:translate(-50%) rotate(45deg);border-top:24px solid #15273F;border-right:24px solid #15273F}.nas-tooltip__tooltip--arrow--left{transform:translate(0) rotate(0);left:0;bottom:-12px;border-top:16px solid #15273F;border-right:24px solid transparent}.nas-tooltip__tooltip--arrow--right{transform:translate(0) rotate(0);left:unset;right:0;bottom:-12px;border-top:16px solid #15273F;border-left:24px solid transparent;border-right:0}.nas-tooltip__text{font-size:14px;line-height:20px;color:#fff;margin:0}.nas-tooltip__close{float:right;height:auto;display:block}@media (min-width: 640px){.nas-tooltip__close{display:none}}.nas-tooltip__close ::ng-deep nas-icon,.nas-tooltip__close ::ng-deep .nas-icon-small{display:block;height:16px;width:16px;margin:0}\n"] }]
|
|
13230
|
+
}], ctorParameters: function () { return [{ type: DeviceHelper }]; }, propDecorators: { container: [{
|
|
13231
|
+
type: ViewChild,
|
|
13232
|
+
args: ['container', { static: false }]
|
|
13233
|
+
}], tooltip: [{
|
|
13201
13234
|
type: ViewChild,
|
|
13202
13235
|
args: ['tooltip', { static: false }]
|
|
13203
13236
|
}], content: [{
|
|
@@ -13217,6 +13250,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
13217
13250
|
}], onMouseLeave: [{
|
|
13218
13251
|
type: HostListener,
|
|
13219
13252
|
args: ['mouseleave']
|
|
13253
|
+
}], onScroll: [{
|
|
13254
|
+
type: HostListener,
|
|
13255
|
+
args: ['window:scroll', []]
|
|
13256
|
+
}], onClickOutside: [{
|
|
13257
|
+
type: HostListener,
|
|
13258
|
+
args: ['document:click', ['$event']]
|
|
13220
13259
|
}], onResize: [{
|
|
13221
13260
|
type: HostListener,
|
|
13222
13261
|
args: ['window:resize', ['$event']]
|