@norwegian/core-components 5.15.1 → 5.16.0

package/bundles/norwegian-core-components.umd.js

@@ -6798,6 +6798,20 @@
         SelectComponent.prototype.getSelectId = function () {
             return "nas-select-" + this.componentId;
         };
+        Object.defineProperty(SelectComponent.prototype, "selectId", {
+            get: function () {
+                return this.id ? this.id : "nas-select-" + this.componentId;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SelectComponent.prototype, "errorId", {
+            get: function () {
+                return this.id ? this.id + '__error' : "nas-select-" + this.componentId + "__error";
+            },
+            enumerable: false,
+            configurable: true
+        });
         SelectComponent.prototype.toggleSelect = function (event, keydown) {
             var _this = this;
             if ((event && event.key === 'Enter') || !event || !event.key) {
@@ -6968,7 +6982,7 @@
     SelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'nas-select',
-                    template: "<label for=\"getSelectId()\"\n  *ngIf=\"label && !inline\">\n  <span [nasClass]=\"getClass('label')\">{{label}}</span>\n</label>\n<div [nasClass]=\"getClasses()\">\n  <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n    <select #select\n      [id]=\"getSelectId()\"\n      [attr.disabled]=\"disabled\"\n      [attr.aria-label]=\"'select'\"\n      [attr.aria-labelledby]=\"getSelectId()\"\n      [style.width.px]=\"labelWidth\"\n      [formControl]=\"selectControl\"\n      (mousedown)=\"toggleSelect($event)\"\n      (keydown)=\"toggleSelect($event, true)\"\n      (blur)=\"blurSelect()\"\n      (change)=\"toggleSelect($event)\">\n      <ng-container *ngIf=\"!hasContent\">\n        <option *ngFor=\"let option of options\"\n          [value]=\"option?.value\"\n          [attr.aria-label]=\"option?.title\">\n          {{option?.title}}</option>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n    </select>\n  </ng-container>\n  <ng-template #reactiveForm>\n    <ng-container [formGroup]=\"nasFormGroup\">\n      <select #select\n        [formControlName]=\"nasFormControlName\"\n        [id]=\"getSelectId()\"\n        [attr.disabled]=\"disabled\"\n        [attr.aria-label]=\"'select'\"\n        [attr.aria-labelledby]=\"getSelectId()\"\n        [style.width.px]=\"labelWidth\"\n        (mousedown)=\"toggleSelect($event)\"\n        (keydown)=\"toggleSelect($event, true)\"\n        (blur)=\"blurSelect()\"\n        (change)=\"toggleSelect($event)\">\n        <ng-container *ngIf=\"!hasContent\">\n          <option *ngFor=\"let option of options\"\n            [value]=\"option?.value\"\n            [attr.aria-label]=\"option?.title\">{{option?.title}}</option>\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n      </select>\n    </ng-container>\n  </ng-template>\n  <p [nasClass]=\"getClass('error')\"\n    #errorMessageWrapper\n    *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n  <div #selectTitleWrapper\n    [style.display]=\"'none'\"\n    aria-hidden=\"true\">\n    <span>{{selectTitle}}</span>\n  </div>\n  <ng-template #contentOptions>\n    <ng-content></ng-content>\n  </ng-template>\n</div>",
+                    template: "<label for=\"getSelectId()\"\n  *ngIf=\"label && !inline\">\n  <span [nasClass]=\"getClass('label')\">{{label}}</span>\n</label>\n<div [nasClass]=\"getClasses()\">\n  <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n    <select #select\n      [id]=\"selectId\"\n      [attr.disabled]=\"disabled\"\n      [attr.aria-label]=\"'select'\"\n      [attr.aria-labelledby]=\"getSelectId()\"\n      [style.width.px]=\"labelWidth\"\n      [formControl]=\"selectControl\"\n      (mousedown)=\"toggleSelect($event)\"\n      (keydown)=\"toggleSelect($event, true)\"\n      (blur)=\"blurSelect()\"\n      (change)=\"toggleSelect($event)\">\n      <ng-container *ngIf=\"!hasContent\">\n        <option *ngFor=\"let option of options\"\n          [value]=\"option?.value\"\n          [attr.aria-label]=\"option?.title\">\n          {{option?.title}}</option>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n    </select>\n  </ng-container>\n  <ng-template #reactiveForm>\n    <ng-container [formGroup]=\"nasFormGroup\">\n      <select #select\n        [formControlName]=\"nasFormControlName\"\n        [id]=\"selectId\"\n        [attr.disabled]=\"disabled\"\n        [attr.aria-label]=\"'select'\"\n        [attr.aria-labelledby]=\"getSelectId()\"\n        [style.width.px]=\"labelWidth\"\n        (mousedown)=\"toggleSelect($event)\"\n        (keydown)=\"toggleSelect($event, true)\"\n        (blur)=\"blurSelect()\"\n        (change)=\"toggleSelect($event)\">\n        <ng-container *ngIf=\"!hasContent\">\n          <option *ngFor=\"let option of options\"\n            [value]=\"option?.value\"\n            [attr.aria-label]=\"option?.title\">{{option?.title}}</option>\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n      </select>\n    </ng-container>\n  </ng-template>\n  <p [nasClass]=\"getClass('error')\"\n    #errorMessageWrapper\n    *ngIf=\"exists(error) && errorMessage\" [id]=\"errorId\">{{errorMessage}}</p>\n  <div #selectTitleWrapper\n    [style.display]=\"'none'\"\n    aria-hidden=\"true\">\n    <span>{{selectTitle}}</span>\n  </div>\n  <ng-template #contentOptions>\n    <ng-content></ng-content>\n  </ng-template>\n</div>",
                     encapsulation: i0.ViewEncapsulation.None,
                     styles: ["@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@-webkit-keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@-webkit-keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@-webkit-keyframes fade-out{to{opacity:0}}@keyframes fade-out{to{opacity:0}}@-webkit-keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@-webkit-keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@-webkit-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)}}@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-select{position:relative;display:inline-block;vertical-align:top;max-width:100%;margin-bottom:24px;z-index:0}.nas-select__label{font-family:\"Apercu\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-weight:bold;display:block;margin-bottom:6px}.nas-select select{-webkit-appearance:none;-moz-appearance:none;display:inline-block;cursor:pointer;margin:0;padding:12px 34px 12px 12px;padding-right:34px!important;width:100%;border-radius:0;border:3px solid #c3c3c3;outline:0;font-size:16px;color:#002a3a;background-color:transparent}.nas-select select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.nas-select select:hover,.nas-select select:focus{border-color:#003251}.nas-select select:active{border-color:#003251}.nas-select select::-ms-expand{display:none}.nas-select select[disabled]{color:#626363;cursor:default}.nas-select select[disabled]:hover,.nas-select select[disabled]:focus{border-color:#c3c3c3}.nas-select:after{content:\"\";position:absolute;display:inline-block;pointer-events:none;z-index:3;bottom:18px;right:12px;width:12px;height:12px;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23214A5F%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat;transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-select--block{display:block}.nas-select--block select{display:block;width:100%}.nas-select--light:after{background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23FFFFFF%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat}.nas-select--light select{color:#fff;border-color:#fff}.nas-select--light select:hover,.nas-select--light select:focus{border-color:#c3c3c3}.nas-select--light select:focus{color:#000;background-color:#fff}.nas-select--disabled select{background-color:#626363}.nas-select--disabled:after{background-color:#626363;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23909090%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat}.nas-select--inline,.nas-select--simple{display:inline-block;max-width:100%;overflow:hidden;line-height:inherit;padding:0;font-size:inherit;color:inherit;margin-bottom:0;border-bottom:inherit}.nas-select--inline:after,.nas-select--simple:after{top:50%;margin-top:-7px;right:0}.nas-select--inline select,.nas-select--simple select{font-size:inherit;color:inherit;padding:0;padding-right:18px!important;border:0;padding-bottom:3px;border-bottom:3px solid #c3c3c3;width:auto;transition:width .3s cubic-bezier(0,0,.1,1)}.nas-select--inline option,.nas-select--simple option{font-family:\"Apercu\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-weight:bold}.nas-select--stretch{display:block}.nas-select--stretch select{width:100%!important}.nas-select--error select{border-color:#d81939}.nas-select--error:after{top:24px;bottom:auto}.nas-select__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-select__error{display:block;font-family:\"Apercu\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-weight:normal;color:#d81939}.nas-select--inline.nas-select--error:after{top:50%!important}.nas-select--simple select{border-color:transparent}.nas-select--simple option{font-family:\"Apercu\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-weight:bold}.nas-select--compact select{padding-top:9px;padding-bottom:9px}.nas-select--compact:after{bottom:16px}.nas-select--spaceless{margin-bottom:0}.nas-select--fill select{background-color:#fff;border-color:#fff}.nas-select--rotate:after{transform:rotate(180deg);transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-select--rotate::after-enter,.nas-select--rotate::after-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-select--rotate::after-enter{-webkit-animation:flip-in .55s ease both;animation:flip-in .55s ease both}.nas-select--rotate::after-leave-active{-webkit-animation:flip-out .2s ease-out both;animation:flip-out .2s ease-out both}@-moz-document url-prefix(){.select select{text-indent:.01px;text-overflow:\"\";padding-right:1rem}.select option{background-color:#fff}}\n"]
                 },] }
@@ -6982,6 +6996,7 @@
         select: [{ type: i0.ViewChild, args: ['select',] }],
         optionComponents: [{ type: i0.ContentChildren, args: [OptionComponent,] }],
         optgroupComponents: [{ type: i0.ContentChildren, args: [OptgroupComponent,] }],
+        id: [{ type: i0.Input }],
         inline: [{ type: i0.Input }],
         label: [{ type: i0.Input }],
         block: [{ type: i0.Input }],
@@ -8189,6 +8204,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(InputComponent.prototype, "errorId", {
+            get: function () {
+                return this.id ? this.id + '__error' : "nas-input-" + this.componentId + "__error";
+            },
+            enumerable: false,
+            configurable: true
+        });
         InputComponent.prototype.ngAfterViewInit = function () {
             if (this.exists(this.disabled)) {
                 var inputElement = document.getElementById(this.inputId);
@@ -8223,7 +8245,7 @@
     InputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'nas-input',
-                    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')\"\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')\"\n      *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n    <span [nasClass]=\"getClass('info')\"\n      *ngIf=\"info\">{{info}}</span>\n  </label>\n</ng-template>\n",
+                    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",
                     encapsulation: i0.ViewEncapsulation.None,
                     styles: ["@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@-webkit-keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@-webkit-keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@-webkit-keyframes fade-out{to{opacity:0}}@keyframes fade-out{to{opacity:0}}@-webkit-keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@-webkit-keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@-webkit-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)}}@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:bold;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:normal;color:#d81939}.nas-input--error .nas-input__line{background-color:#d81939}.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;-webkit-animation:input-loader ease 1.5s;animation:input-loader ease 1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:forwards;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}@-webkit-keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"]
                 },] }