@acpaas-ui/ngx-forms 6.0.9 → 6.1.2

package/fesm2015/acpaas-ui-ngx-forms.mjs

@@ -439,37 +439,64 @@ const DATEPICKER_DEFAULT_ERROR_LABELS = {
 };
 const DATEPICKER_SEPARATOR_CHAR = '/';
 
-function DatepickerComponent_ng_container_7_Template(rf, ctx) {
+function DatepickerComponent_label_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "label", 6);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵpropertyInterpolate("for", ctx_r0.id);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(ctx_r0.label);
+    }
+}
+function DatepickerComponent_small_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "small", 7);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r1 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", ctx_r1.description, "");
+    }
+}
+function DatepickerComponent_ng_container_5_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
-        i0.ɵɵelement(1, "aui-icon", 6);
+        i0.ɵɵelement(1, "aui-icon", 8);
         i0.ɵɵelementContainerEnd();
     }
 }
-function DatepickerComponent_ng_container_8_Template(rf, ctx) {
+function DatepickerComponent_ng_container_6_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
-        i0.ɵɵelement(1, "aui-icon", 7);
+        i0.ɵɵelement(1, "aui-icon", 9);
         i0.ɵɵelementContainerEnd();
     }
     if (rf & 2) {
+        const ctx_r3 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("openOnFocus", false);
+        i0.ɵɵattribute("aria-label", ctx_r3.ariaOpenDatepickerLabel);
     }
 }
-function DatepickerComponent_ng_container_9_Template(rf, ctx) {
+function DatepickerComponent_ng_container_7_Template(rf, ctx) {
     if (rf & 1) {
-        const _r4 = i0.ɵɵgetCurrentView();
+        const _r6 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementContainerStart(0);
-        i0.ɵɵelementStart(1, "div", 8)(2, "aui-calendar", 9);
-        i0.ɵɵlistener("selectDate", function DatepickerComponent_ng_container_9_Template_aui_calendar_selectDate_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDateFromCalendar($event)); });
+        i0.ɵɵelementStart(1, "div", 10)(2, "aui-calendar", 11);
+        i0.ɵɵlistener("selectDate", function DatepickerComponent_ng_container_7_Template_aui_calendar_selectDate_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.selectDateFromCalendar($event)); });
         i0.ɵɵelementEnd()();
         i0.ɵɵelementContainerEnd();
     }
     if (rf & 2) {
-        const ctx_r2 = i0.ɵɵnextContext();
+        const ctx_r4 = i0.ɵɵnextContext();
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("range", ctx_r2.range)("selectedDate", ctx_r2.selectedDate)("interval", ctx_r2.interval)("weekdayLabels", ctx_r2.weekdayLabels)("monthLabels", ctx_r2.monthLabels);
+        i0.ɵɵproperty("range", ctx_r4.range)("selectedDate", ctx_r4.selectedDate)("interval", ctx_r4.interval)("weekdayLabels", ctx_r4.weekdayLabels)("monthLabels", ctx_r4.monthLabels);
     }
 }
 class DatepickerComponent {
@@ -481,6 +508,7 @@ class DatepickerComponent {
         this.formBuilder = formBuilder;
         this.ref = ref;
         this.placeholder = 'dd/mm/yyyy';
+        this.ariaOpenDatepickerLabel = 'Open kalender';
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.blur = new EventEmitter();
         this.isDisabled = false;
@@ -615,7 +643,7 @@ class DatepickerComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.flyout = _t.first);
         }
-    }, inputs: { id: "id", name: "name", placeholder: "placeholder", label: "label", description: "description", range: "range", min: "min", max: "max", autocomplete: "autocomplete", weekdayLabels: "weekdayLabels", monthLabels: "monthLabels" }, outputs: { blur: "blur" }, features: [i0.ɵɵProvidersFeature([
+    }, inputs: { id: "id", name: "name", placeholder: "placeholder", label: "label", description: "description", range: "range", min: "min", max: "max", autocomplete: "autocomplete", weekdayLabels: "weekdayLabels", monthLabels: "monthLabels", ariaOpenDatepickerLabel: "ariaOpenDatepickerLabel" }, outputs: { blur: "blur" }, features: [i0.ɵɵProvidersFeature([
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => DatepickerComponent)),
@@ -626,27 +654,24 @@ class DatepickerComponent {
                 useExisting: forwardRef((() => DatepickerComponent)),
                 multi: true,
             },
-        ]), i0.ɵɵNgOnChangesFeature], decls: 10, vars: 11, consts: [["aria-haspopup", "grid", "auiFlyout", "", 1, "aui-datepicker", "a-input", "has-icon-right"], ["for", "id", 1, "a-input__label"], ["id", "id", 1, "a-input__description"], [1, "a-input__wrapper"], ["label", "Pick date", "description", "Description", "type", "text", 3, "autocomplete", "formControl", "id", "name", "placeholder", "blur"], [4, "ngIf"], ["name", "ai-calendar", "role", "button", "tabindex", "0"], ["auiFlyoutAction", "", "name", "ai-calendar", "className", "is-clickable", "role", "button", "tabindex", "0", 3, "openOnFocus"], ["auiFlyoutZone", "", "role", "dialog", 1, "m-datepicker", "m-datepicker--fixed"], [3, "range", "selectedDate", "interval", "weekdayLabels", "monthLabels", "selectDate"]], template: function DatepickerComponent_Template(rf, ctx) {
+        ]), i0.ɵɵNgOnChangesFeature], decls: 8, vars: 11, consts: [["aria-haspopup", "grid", "auiFlyout", "", 1, "aui-datepicker", "a-input", "has-icon-right"], ["class", "a-input__label", 3, "for", 4, "ngIf"], ["class", "a-input__description", 4, "ngIf"], [1, "a-input__wrapper"], ["label", "Pick date", "description", "Description", "type", "text", 3, "autocomplete", "formControl", "id", "name", "placeholder", "blur"], [4, "ngIf"], [1, "a-input__label", 3, "for"], [1, "a-input__description"], ["name", "ai-calendar"], ["auiFlyoutAction", "", "name", "ai-calendar", "className", "is-clickable", "role", "button", "tabindex", "0", 3, "openOnFocus"], ["auiFlyoutZone", "", "role", "dialog", 1, "m-datepicker", "m-datepicker--fixed"], [3, "range", "selectedDate", "interval", "weekdayLabels", "monthLabels", "selectDate"]], template: function DatepickerComponent_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
-            i0.ɵɵtext(2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "small", 2);
-            i0.ɵɵtext(4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 3)(6, "input", 4);
-            i0.ɵɵlistener("blur", function DatepickerComponent_Template_input_blur_6_listener($event) { return ctx.handleBlur($event); });
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, DatepickerComponent_label_1_Template, 2, 2, "label", 1);
+            i0.ɵɵtemplate(2, DatepickerComponent_small_2_Template, 2, 1, "small", 2);
+            i0.ɵɵelementStart(3, "div", 3)(4, "input", 4);
+            i0.ɵɵlistener("blur", function DatepickerComponent_Template_input_blur_4_listener($event) { return ctx.handleBlur($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, DatepickerComponent_ng_container_7_Template, 2, 0, "ng-container", 5);
-            i0.ɵɵtemplate(8, DatepickerComponent_ng_container_8_Template, 2, 1, "ng-container", 5);
-            i0.ɵɵtemplate(9, DatepickerComponent_ng_container_9_Template, 3, 5, "ng-container", 5);
+            i0.ɵɵtemplate(5, DatepickerComponent_ng_container_5_Template, 2, 0, "ng-container", 5);
+            i0.ɵɵtemplate(6, DatepickerComponent_ng_container_6_Template, 2, 2, "ng-container", 5);
+            i0.ɵɵtemplate(7, DatepickerComponent_ng_container_7_Template, 3, 5, "ng-container", 5);
             i0.ɵɵelementEnd()();
         }
         if (rf & 2) {
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.label);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", ctx.description, "");
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.label);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.description);
             i0.ɵɵadvance(2);
             i0.ɵɵpropertyInterpolate("id", ctx.id);
             i0.ɵɵpropertyInterpolate("name", ctx.name);
@@ -675,7 +700,7 @@ class DatepickerComponent {
                             useExisting: forwardRef((() => DatepickerComponent)),
                             multi: true,
                         },
-                    ], template: "<div aria-haspopup=\"grid\" auiFlyout class=\"aui-datepicker a-input has-icon-right\">\n  <label class=\"a-input__label\" for=\"id\">{{ label }}</label>\n  <small class=\"a-input__description\" id=\"id\"> {{ description }}</small>\n  <div class=\"a-input__wrapper\">\n    <input\n      (blur)=\"handleBlur($event)\"\n      [attr.disabled]=\"isDisabled ? true : null\"\n      [autocomplete]=\"autocomplete\"\n      [formControl]=\"formControl\"\n      id=\"{{ id }}\"\n      label=\"Pick date\"\n      description=\"Description\"\n      name=\"{{ name }}\"\n      placeholder=\"{{ placeholder }}\"\n      type=\"text\"\n    />\n    <ng-container *ngIf=\"isDisabled\">\n      <aui-icon\n        name=\"ai-calendar\"\n        role=\"button\"\n        tabindex=\"0\"\n      />\n    </ng-container>\n    <ng-container *ngIf=\"!isDisabled\">\n      <aui-icon\n        auiFlyoutAction\n        [openOnFocus]=\"false\"\n        name=\"ai-calendar\"\n        className=\"is-clickable\"\n        role=\"button\"\n        tabindex=\"0\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"!isDisabled\">\n      <div auiFlyoutZone class=\"m-datepicker m-datepicker--fixed\" role=\"dialog\">\n        <aui-calendar\n          (selectDate)=\"selectDateFromCalendar($event)\"\n          [range]=\"range\"\n          [selectedDate]=\"selectedDate\"\n          [interval]=\"interval\"\n          [weekdayLabels]=\"weekdayLabels\"\n          [monthLabels]=\"monthLabels\"\n        ></aui-calendar>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host,.aui-datepicker{display:block}.m-flyout.is-open .m-datepicker{opacity:1;transform:translateY(calc(var(--BORDER-WIDTH) * -1));transition-delay:0s;visibility:visible}\n"] }]
+                    ], template: "<div aria-haspopup=\"grid\" auiFlyout class=\"aui-datepicker a-input has-icon-right\">\n  <label class=\"a-input__label\" for=\"{{ id }}\" *ngIf=\"label\">{{ label }}</label>\n  <small class=\"a-input__description\" *ngIf=\"description\"> {{ description }}</small>\n  <div class=\"a-input__wrapper\">\n    <input\n      (blur)=\"handleBlur($event)\"\n      [attr.disabled]=\"isDisabled ? true : null\"\n      [autocomplete]=\"autocomplete\"\n      [formControl]=\"formControl\"\n      id=\"{{ id }}\"\n      label=\"Pick date\"\n      description=\"Description\"\n      name=\"{{ name }}\"\n      placeholder=\"{{ placeholder }}\"\n      type=\"text\"\n    />\n    <ng-container *ngIf=\"isDisabled\">\n      <aui-icon\n        name=\"ai-calendar\"\n      />\n    </ng-container>\n    <ng-container *ngIf=\"!isDisabled\">\n      <aui-icon\n        auiFlyoutAction\n        [openOnFocus]=\"false\"\n        name=\"ai-calendar\"\n        className=\"is-clickable\"\n        role=\"button\"\n        [attr.aria-label]=\"ariaOpenDatepickerLabel\"\n        tabindex=\"0\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"!isDisabled\">\n      <div auiFlyoutZone class=\"m-datepicker m-datepicker--fixed\" role=\"dialog\">\n        <aui-calendar\n          (selectDate)=\"selectDateFromCalendar($event)\"\n          [range]=\"range\"\n          [selectedDate]=\"selectedDate\"\n          [interval]=\"interval\"\n          [weekdayLabels]=\"weekdayLabels\"\n          [monthLabels]=\"monthLabels\"\n        ></aui-calendar>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host,.aui-datepicker{display:block}.m-flyout.is-open .m-datepicker{opacity:1;transform:translateY(calc(var(--BORDER-WIDTH) * -1));transition-delay:0s;visibility:visible}\n"] }]
         }], function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -712,6 +737,8 @@ class DatepickerComponent {
                 type: Input
             }], monthLabels: [{
                 type: Input
+            }], ariaOpenDatepickerLabel: [{
+                type: Input
             }], blur: [{
                 type: Output
             }] });
@@ -1495,37 +1522,57 @@ var TimepickerInputSize;
     TimepickerInputSize["Large"] = "large";
 })(TimepickerInputSize || (TimepickerInputSize = {}));
 
-function TimepickerComponent_div_1_aui_icon_4_Template(rf, ctx) {
+function TimepickerComponent_div_1_label_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "aui-icon", 8);
+        i0.ɵɵelementStart(0, "label", 7);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r2 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(ctx_r2.label);
     }
 }
-const _c0$3 = function (a0) { return { "has-error": a0 }; };
-const _c1$3 = function (a0) { return { "is-error": a0 }; };
-function TimepickerComponent_div_1_Template(rf, ctx) {
+function TimepickerComponent_div_1_small_2_aui_icon_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 3)(1, "label", 4);
+        i0.ɵɵelement(0, "aui-icon", 10);
+    }
+}
+const _c0$3 = function (a0) { return { "is-error": a0 }; };
+function TimepickerComponent_div_1_small_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "small", 8);
+        i0.ɵɵtemplate(1, TimepickerComponent_div_1_small_2_aui_icon_1_Template, 1, 0, "aui-icon", 9);
         i0.ɵɵtext(2);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "small", 5);
-        i0.ɵɵtemplate(4, TimepickerComponent_div_1_aui_icon_4_Template, 1, 0, "aui-icon", 6);
-        i0.ɵɵtext(5);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelement(6, "input", 7);
+    }
+    if (rf & 2) {
+        const ctx_r3 = i0.ɵɵnextContext(2);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0$3, ctx_r3.hasError));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r3.hasError);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", ctx_r3.description, "");
+    }
+}
+const _c1$3 = function (a0) { return { "has-error": a0 }; };
+function TimepickerComponent_div_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 3);
+        i0.ɵɵtemplate(1, TimepickerComponent_div_1_label_1_Template, 2, 1, "label", 4);
+        i0.ɵɵtemplate(2, TimepickerComponent_div_1_small_2_Template, 3, 5, "small", 5);
+        i0.ɵɵelement(3, "input", 6);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵclassMap("a-input--" + ctx_r0.size);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$3, ctx_r0.hasError));
-        i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate(ctx_r0.label);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$3, ctx_r0.hasError));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$3, ctx_r0.hasError));
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r0.hasError);
+        i0.ɵɵproperty("ngIf", ctx_r0.label);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", ctx_r0.description, "");
+        i0.ɵɵproperty("ngIf", ctx_r0.description);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("formControl", ctx_r0.timeControl)("id", ctx_r0.id);
         i0.ɵɵattribute("aria-label", ctx_r0.ariaLabelHours + ":" + ctx_r0.ariaLabelMinutes);
@@ -1533,45 +1580,45 @@ function TimepickerComponent_div_1_Template(rf, ctx) {
 }
 function TimepickerComponent_div_2_option_6_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "option", 17);
+        i0.ɵɵelementStart(0, "option", 19);
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const hour_r5 = ctx.$implicit;
-        i0.ɵɵproperty("value", hour_r5);
+        const hour_r7 = ctx.$implicit;
+        i0.ɵɵproperty("value", hour_r7);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(hour_r5);
+        i0.ɵɵtextInterpolate(hour_r7);
     }
 }
 function TimepickerComponent_div_2_option_13_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "option", 17);
+        i0.ɵɵelementStart(0, "option", 19);
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const minute_r6 = ctx.$implicit;
-        i0.ɵɵproperty("value", minute_r6);
+        const minute_r8 = ctx.$implicit;
+        i0.ɵɵproperty("value", minute_r8);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(minute_r6);
+        i0.ɵɵtextInterpolate(minute_r8);
     }
 }
 function TimepickerComponent_div_2_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 9)(1, "div", 10)(2, "div", 11)(3, "select", 12)(4, "option", 13);
+        i0.ɵɵelementStart(0, "div", 11)(1, "div", 12)(2, "div", 13)(3, "select", 14)(4, "option", 15);
         i0.ɵɵtext(5);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(6, TimepickerComponent_div_2_option_6_Template, 2, 2, "option", 14);
+        i0.ɵɵtemplate(6, TimepickerComponent_div_2_option_6_Template, 2, 2, "option", 16);
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(7, "aui-icon", 15);
+        i0.ɵɵelement(7, "aui-icon", 17);
         i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(8, "div", 10)(9, "div", 11)(10, "select", 16)(11, "option", 13);
+        i0.ɵɵelementStart(8, "div", 12)(9, "div", 13)(10, "select", 18)(11, "option", 15);
         i0.ɵɵtext(12);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(13, TimepickerComponent_div_2_option_13_Template, 2, 2, "option", 14);
+        i0.ɵɵtemplate(13, TimepickerComponent_div_2_option_13_Template, 2, 2, "option", 16);
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(14, "aui-icon", 15);
+        i0.ɵɵelement(14, "aui-icon", 17);
         i0.ɵɵelementEnd()()();
     }
     if (rf & 2) {
@@ -1579,7 +1626,7 @@ function TimepickerComponent_div_2_Template(rf, ctx) {
         i0.ɵɵproperty("formGroup", ctx_r1.fallbackForm);
         i0.ɵɵadvance(1);
         i0.ɵɵclassMap("a-input--" + ctx_r1.size);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c0$3, ctx_r1.hasError));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1$3, ctx_r1.hasError));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("id", ctx_r1.id);
         i0.ɵɵattribute("aria-label", ctx_r1.ariaLabelHours);
@@ -1589,7 +1636,7 @@ function TimepickerComponent_div_2_Template(rf, ctx) {
         i0.ɵɵproperty("ngForOf", ctx_r1.hours);
         i0.ɵɵadvance(2);
         i0.ɵɵclassMap("a-input--" + ctx_r1.size);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c0$3, ctx_r1.hasError));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c1$3, ctx_r1.hasError));
         i0.ɵɵadvance(2);
         i0.ɵɵattribute("aria-label", ctx_r1.ariaLabelMinutes);
         i0.ɵɵadvance(2);
@@ -1688,10 +1735,10 @@ class TimepickerComponent {
                 useExisting: forwardRef((() => TimepickerComponent)),
                 multi: true,
             },
-        ])], decls: 3, vars: 2, consts: [[1, "m-timepicker"], ["class", "a-input", 3, "class", "ngClass", 4, "ngIf"], [3, "formGroup", 4, "ngIf"], [1, "a-input", 3, "ngClass"], ["for", "id", 1, "a-input__label"], ["id", "id", 1, "a-input__description", 3, "ngClass"], ["name", "ai-alert-triangle", 4, "ngIf"], ["type", "time", 3, "formControl", "id"], ["name", "ai-alert-triangle"], [3, "formGroup"], [1, "a-input", "has-icon-right", 3, "ngClass"], [1, "a-input__wrapper"], ["formControlName", "hours", 3, "id"], ["disabled", "", "value", "null"], [3, "value", 4, "ngFor", "ngForOf"], ["name", "ai-arrow-down-1"], ["formControlName", "minutes"], [3, "value"]], template: function TimepickerComponent_Template(rf, ctx) {
+        ])], decls: 3, vars: 2, consts: [[1, "m-timepicker"], ["class", "a-input", 3, "class", "ngClass", 4, "ngIf"], [3, "formGroup", 4, "ngIf"], [1, "a-input", 3, "ngClass"], ["class", "a-input__label", "for", "id", 4, "ngIf"], ["class", "a-input__description", "id", "id", 3, "ngClass", 4, "ngIf"], ["type", "time", 3, "formControl", "id"], ["for", "id", 1, "a-input__label"], ["id", "id", 1, "a-input__description", 3, "ngClass"], ["name", "ai-alert-triangle", 4, "ngIf"], ["name", "ai-alert-triangle"], [3, "formGroup"], [1, "a-input", "has-icon-right", 3, "ngClass"], [1, "a-input__wrapper"], ["formControlName", "hours", 3, "id"], ["disabled", "", "value", "null"], [3, "value", 4, "ngFor", "ngForOf"], ["name", "ai-arrow-down-1"], ["formControlName", "minutes"], [3, "value"]], template: function TimepickerComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, TimepickerComponent_div_1_Template, 7, 14, "div", 1);
+            i0.ɵɵtemplate(1, TimepickerComponent_div_1_Template, 4, 10, "div", 1);
             i0.ɵɵtemplate(2, TimepickerComponent_div_2_Template, 15, 18, "div", 2);
             i0.ɵɵelementEnd();
         }
@@ -1711,7 +1758,7 @@ class TimepickerComponent {
                             useExisting: forwardRef((() => TimepickerComponent)),
                             multi: true,
                         },
-                    ], template: "<div class=\"m-timepicker\">\n  <div *ngIf=\"!shouldUseFallback\" [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input\">\n    <label class=\"a-input__label\" for=\"id\">{{ label }}</label>\n    <small class=\"a-input__description\" id=\"id\" [ngClass]=\"{ 'is-error': hasError }\">\n      <aui-icon *ngIf=\"hasError\" name=\"ai-alert-triangle\"></aui-icon>\n      {{ description }}</small\n    >\n    <input\n      [attr.aria-label]=\"ariaLabelHours + ':' + ariaLabelMinutes\"\n      [formControl]=\"timeControl\"\n      [id]=\"id\"\n      type=\"time\"\n    />\n  </div>\n\n  <div *ngIf=\"shouldUseFallback\" [formGroup]=\"fallbackForm\">\n    <div [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <select [attr.aria-label]=\"ariaLabelHours\" [id]=\"id\" formControlName=\"hours\">\n          <option disabled value=\"null\">{{ hoursPlaceholder }}</option>\n          <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</option>\n        </select>\n        <aui-icon name=\"ai-arrow-down-1\"></aui-icon>\n      </div>\n    </div>\n\n    <div [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <select [attr.aria-label]=\"ariaLabelMinutes\" formControlName=\"minutes\">\n          <option disabled value=\"null\">{{ minutesPlaceholder }}</option>\n          <option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</option>\n        </select>\n        <aui-icon name=\"ai-arrow-down-1\"></aui-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+                    ], template: "<div class=\"m-timepicker\">\n  <div *ngIf=\"!shouldUseFallback\" [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input\">\n    <label class=\"a-input__label\" for=\"id\" *ngIf=\"label\">{{ label }}</label>\n    <small class=\"a-input__description\" id=\"id\" [ngClass]=\"{ 'is-error': hasError }\" *ngIf=\"description\">\n      <aui-icon *ngIf=\"hasError\" name=\"ai-alert-triangle\"></aui-icon>\n      {{ description }}</small\n    >\n    <input\n      [attr.aria-label]=\"ariaLabelHours + ':' + ariaLabelMinutes\"\n      [formControl]=\"timeControl\"\n      [id]=\"id\"\n      type=\"time\"\n    />\n  </div>\n\n  <div *ngIf=\"shouldUseFallback\" [formGroup]=\"fallbackForm\">\n    <div [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <select [attr.aria-label]=\"ariaLabelHours\" [id]=\"id\" formControlName=\"hours\">\n          <option disabled value=\"null\">{{ hoursPlaceholder }}</option>\n          <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</option>\n        </select>\n        <aui-icon name=\"ai-arrow-down-1\"></aui-icon>\n      </div>\n    </div>\n\n    <div [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <select [attr.aria-label]=\"ariaLabelMinutes\" formControlName=\"minutes\">\n          <option disabled value=\"null\">{{ minutesPlaceholder }}</option>\n          <option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</option>\n        </select>\n        <aui-icon name=\"ai-arrow-down-1\"></aui-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], function () { return [{ type: i1$1.UntypedFormBuilder }, { type: i0.Renderer2 }]; }, { id: [{
                 type: Input
             }], hoursPlaceholder: [{