@wavemaker/app-ng-runtime 11.11.4-rc.6173 → 11.11.5-rc.6185

package/components/input/epoch/fesm2022/index.mjs

@@ -9,6 +9,7 @@ import * as i2 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule, BsDatepickerConfig, BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
 import * as i1$1 from '@wm/core';
 import { App, AbstractI18nService, isMobile, getFormattedDate, getDateObj, setAttr, getNativeDateObject, FormWidgetType, getMomentLocaleObject, getDisplayDateTimeFormat, adjustContainerPosition, adjustContainerRightEdges, addEventListenerOnElement, addClass, $appDigest } from '@wm/core';
+import * as i6 from '@angular/common';
 import { CommonModule, getLocaleDayPeriods, FormStyle, TranslationWidth } from '@angular/common';
 import * as i3 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
@@ -684,6 +685,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         super(inj, WIDGET_CONFIG, explicitContext);
         this.isReadOnly = false;
         this.clicked = false;
+        this.showampmbuttons = true;
         this.formatsByLocale = { 'timezone': '' };
         /**
          * This is an internal property used to map the containerClass, showWeekNumbers etc., to the bsDatepicker
@@ -1538,30 +1540,40 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             setTimeout(() => displayInputElem.blur());
         }
     }
-    adjustDateTimePickerInModel(element, elementDirective) {
-        if (this.containerTarget === '.modal-container' && element) {
-            setTimeout(() => {
-                elementDirective._datepicker._posService.disable();
-                const inputRect = this.nativeElement.getBoundingClientRect();
-                const elementHeight = $('timepicker')[0]?.offsetHeight || element.offsetHeight;
-                let top;
-                if (inputRect.bottom + elementHeight > window.innerHeight) {
-                    top = inputRect.top - elementHeight + window.scrollY;
-                }
-                else {
-                    top = inputRect.bottom + window.scrollY;
-                }
-                const left = inputRect.left + window.scrollX;
-                element.style.top = `${top}px`;
-                element.style.left = `${left}px`;
-                element.style.transform = 'none';
-            });
+    getPeriod() {
+        if (!this.elementScope.bsTimeValue)
+            return 'AM';
+        const hours = this.elementScope.bsTimeValue.getHours();
+        return hours >= 12 ? 'PM' : 'AM';
+    }
+    setPeriod(period) {
+        const current = this.elementScope.bsTimeValue;
+        if (!current || !(current instanceof Date))
+            return;
+        const updatedDate = new Date(current);
+        const hours = updatedDate.getHours();
+        if (period === 'AM' && hours >= 12) {
+            updatedDate.setHours(hours - 12);
+        }
+        else if (period === 'PM' && hours < 12) {
+            updatedDate.setHours(hours + 12);
+        }
+        if (this.elementScope.widgetType === 'wm-time') {
+            const isInvalid = this.elementScope.minTime && this.elementScope.maxTime && (updatedDate < this.elementScope.minTime || updatedDate > this.elementScope.maxTime);
+            if (!isInvalid)
+                this.elementScope.onTimeChange(updatedDate);
+        }
+        else {
+            this.elementScope.onModelUpdate(updatedDate);
         }
     }
     onPropertyChange(key, nv, ov) {
         if (key === 'tabindex') {
             return;
         }
+        if (key === 'showampmbuttons') {
+            this.showampmbuttons = nv;
+        }
         if (key === 'required') {
             this._onChange(this.datavalue);
             return;
@@ -1626,7 +1638,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
-        this.containerTarget = this.nativeElement.closest('modal-container') ? '.modal-container' : getContainerTargetClass(this.nativeElement);
+        this.containerTarget = getContainerTargetClass(this.nativeElement);
         this.isReadOnly = this.dataentrymode != 'undefined' && !this.isDataEntryModeEnabledOnInput(this.dataentrymode);
         // this mobileinput width varies in ios hence setting width here.
         const mobileInput = this.getMobileInput();
@@ -1995,16 +2007,15 @@ class DateComponent extends BaseDateTimeComponent {
         // So actual bootstrap input target width we made it to 0, so bootstrap calculating the calendar container top position improperly.
         // To fix the container top position set the width 1px;
         this.$element.find('.model-holder').width('1px');
-        const datePickerContainerEl = $('bs-datepicker-container');
-        datePickerContainerEl.attr('aria-label', 'Use Arrow keys to navigate dates, Choose Date from datepicker');
+        const dpContainerEl = $('bs-datepicker-container');
+        dpContainerEl.attr('aria-label', 'Use Arrow keys to navigate dates, Choose Date from datepicker');
         $('.bs-calendar-container').removeAttr('role');
         const datePickerContainer = $('.bs-datepicker-container')[0];
         this.focusTrap = setFocusTrap(datePickerContainer, true);
         this.focusTrap.activate();
         this.addDatepickerKeyboardEvents(this, false);
-        adjustContainerPosition(datePickerContainerEl, this.nativeElement, this.bsDatePickerDirective._datepicker);
-        adjustContainerRightEdges(datePickerContainerEl, this.nativeElement, this.bsDatePickerDirective._datepicker);
-        this.adjustDateTimePickerInModel(datePickerContainerEl[0], this.bsDatePickerDirective);
+        adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
+        adjustContainerRightEdges($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
         if (this.timeZone) {
             const todayBtn = document.querySelector(`.${this.dateContainerCls} .bs-datepicker-buttons .btn-today-wrapper button`);
             const setTodayTZHandler = (event) => {
@@ -2244,7 +2255,8 @@ const dateTimeProps = new Map([
     ['clearbutton', { value: true, ...PROP_BOOLEAN }],
     ['adaptiveposition', { value: true, ...PROP_BOOLEAN }],
     ['todaybuttonlabel', { value: 'LABEL_TODAY_DATE', ...PROP_STRING }],
-    ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...PROP_STRING }]
+    ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...PROP_STRING }],
+    ['showampmbuttons', { value: false, ...PROP_BOOLEAN }]
 ]);
 const registerProps$1 = () => {
     register('wm-datetime', dateTimeProps);
@@ -2254,6 +2266,26 @@ const registerProps$1 = () => {
 
 const _c0$1 = ["wmDateTime", ""];
 const _c1$1 = () => ({ standalone: true });
+const _c2$1 = a0 => ({ "showbuttons": a0 });
+const _c3$1 = a0 => ({ "active btn-secondary": a0 });
+function DatetimeComponent_div_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13)(1, "button", 14);
+    i0.ɵɵlistener("click", function DatetimeComponent_div_10_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setPeriod("AM")); });
+    i0.ɵɵtext(2, "AM");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "br");
+    i0.ɵɵelementStart(4, "button", 15);
+    i0.ɵɵlistener("click", function DatetimeComponent_div_10_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setPeriod("PM")); });
+    i0.ɵɵtext(5, "PM");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c3$1, ctx_r2.getPeriod() === "AM"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c3$1, ctx_r2.getPeriod() === "PM"));
+} }
 function DatetimeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 11);
@@ -2261,21 +2293,25 @@ function DatetimeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(1, "timepicker", 12);
     i0.ɵɵtwoWayListener("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.bsTimeValue, $event) || (ctx_r2.bsTimeValue = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("isValid", function DatetimeComponent_div_10_Template_timepicker_isValid_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.isValid($event)); })("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModelUpdate($event, "time")); });
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(2, DatetimeComponent_div_10_Conditional_2_Template, 6, 6, "div", 13);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("showMeridian", ctx_r2.ismeridian)("readonlyInput", ctx_r2.disabled || ctx_r2.readonly || ctx_r2.isCurrentDate);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.bsTimeValue);
-    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(12, _c1$1))("min", ctx_r2.minTime)("max", ctx_r2.maxTime)("hourStep", ctx_r2.hourstep)("minuteStep", ctx_r2.minutestep)("secondsStep", ctx_r2.secondsstep)("mousewheel", true)("arrowkeys", true)("showSeconds", ctx_r2.showseconds);
+    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(14, _c1$1))("min", ctx_r2.minTime)("max", ctx_r2.maxTime)("hourStep", ctx_r2.hourstep)("minuteStep", ctx_r2.minutestep)("secondsStep", ctx_r2.secondsstep)("mousewheel", true)("arrowkeys", true)("showSeconds", ctx_r2.showseconds)("ngClass", i0.ɵɵpureFunction1(15, _c2$1, ctx_r2.showampmbuttons));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.ismeridian && ctx_r2.showampmbuttons ? 2 : -1);
 } }
 function DatetimeComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "wm-datetimepicker", 13);
-    i0.ɵɵlistener("change", function DatetimeComponent_Conditional_11_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModelUpdate($event, "date")); });
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "wm-datetimepicker", 16);
+    i0.ɵɵlistener("change", function DatetimeComponent_Conditional_11_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModelUpdate($event, "date")); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 14);
-    i0.ɵɵlistener("click", function DatetimeComponent_Conditional_11_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r2.disabled || ctx_r2.readonly) && ctx_r2.showDatePickerModal(ctx_r2.bsDateValue)); })("focus", function DatetimeComponent_Conditional_11_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DatetimeComponent_Conditional_11_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
+    i0.ɵɵelementStart(1, "div", 17);
+    i0.ɵɵlistener("click", function DatetimeComponent_Conditional_11_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r2.disabled || ctx_r2.readonly) && ctx_r2.showDatePickerModal(ctx_r2.bsDateValue)); })("focus", function DatetimeComponent_Conditional_11_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DatetimeComponent_Conditional_11_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -2438,10 +2474,8 @@ class DatetimeComponent extends BaseDateTimeComponent {
         this.bsDatePickerDirective.hide();
         this.focusTimePickerPopover(this);
         this.bindTimePickerKeyboardEvents();
-        const dropdownContainerEl = $('bs-dropdown-container');
-        adjustContainerPosition(dropdownContainerEl, this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
-        adjustContainerRightEdges(dropdownContainerEl, this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
-        this.adjustDateTimePickerInModel(dropdownContainerEl[0], this.bsDatePickerDirective);
+        adjustContainerPosition($('bs-dropdown-container'), this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
+        adjustContainerRightEdges($('bs-dropdown-container'), this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
     }
     onDatePickerOpen() {
         this.isDateOpen = !this.isDateOpen;
@@ -2450,8 +2484,8 @@ class DatetimeComponent extends BaseDateTimeComponent {
         // So actual bootstrap input target width we made it to 0 so bootstrap calculating the calendar container top position impropery.
         // To fix the container top position set the width 1px;
         this.$element.find('.model-holder').width('1px');
-        const datePickerContainerEl = $('bs-datepicker-container');
-        datePickerContainerEl.attr('aria-label', 'Use Arrow keys to navigate dates, Choose Date from datepicker');
+        const dpContainerEl = $('bs-datepicker-container');
+        dpContainerEl.attr('aria-label', 'Use Arrow keys to navigate dates, Choose Date from datepicker');
         $('.bs-calendar-container').removeAttr('role');
         const datePickerContainer = $('.bs-datepicker-container')[0];
         this.focusTrap = setFocusTrap(datePickerContainer, true);
@@ -2461,8 +2495,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
             this.hightlightToday(this.activeDate);
         }
         this.addDatepickerKeyboardEvents(this, true);
-        adjustContainerPosition(datePickerContainerEl, this.nativeElement, this.bsDatePickerDirective._datepicker);
-        this.adjustDateTimePickerInModel(datePickerContainerEl[0], this.bsDatePickerDirective);
+        adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
     }
     /**
      * This is an internal method to update the model
@@ -2707,7 +2740,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
                 provideAs(DatetimeComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(DatetimeComponent),
                 { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c0$1, decls: 12, vars: 31, consts: [["datepicker", "bsDatepicker"], ["dropdown", "", "autoClose", "false", 2, "display", "inherit", 3, "onShown", "isOpen", "container"], ["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "display-input", 3, "click", "focus", "blur", "change", "keydown", "name", "tabindex", "value", "autofocus", "disabled", "required", "readOnly"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", 1, "btn", "btn-default", "btn-date", 3, "click", "tabindex", "disabled"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "click", "tabindex", "disabled"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "focus-target", "", "placement", "bottom right", "bsDatepicker", "", 1, "model-holder", 3, "onShown", "onHidden", "bsValueChange", "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue"], ["class", "dropdown-menu", "aria-label", "timepicker dropdown", "aria-controls", "time", 3, "click", 4, "dropdownMenu"], ["aria-label", "timepicker dropdown", "aria-controls", "time", 1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "ngModelChange", "isValid", "showMeridian", "readonlyInput", "ngModel", "ngModelOptions", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds"], ["dateTimePicker", "", 3, "change", "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur", "tabindex"]], template: function DatetimeComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c0$1, decls: 12, vars: 31, consts: [["datepicker", "bsDatepicker"], ["dropdown", "", "autoClose", "false", 2, "display", "inherit", 3, "onShown", "isOpen", "container"], ["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "display-input", 3, "click", "focus", "blur", "change", "keydown", "name", "tabindex", "value", "autofocus", "disabled", "required", "readOnly"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", 1, "btn", "btn-default", "btn-date", 3, "click", "tabindex", "disabled"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "click", "tabindex", "disabled"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "focus-target", "", "placement", "bottom right", "bsDatepicker", "", 1, "model-holder", 3, "onShown", "onHidden", "bsValueChange", "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue"], ["class", "dropdown-menu", "aria-label", "timepicker dropdown", "aria-controls", "time", 3, "click", 4, "dropdownMenu"], ["aria-label", "timepicker dropdown", "aria-controls", "time", 1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "ngModelChange", "isValid", "showMeridian", "readonlyInput", "ngModel", "ngModelOptions", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds", "ngClass"], [1, "ampm-toggle", "text-center"], [1, "meridian-btn", "mb-1", 3, "click", "ngClass"], [1, "meridian-btn", 3, "click", "ngClass"], ["dateTimePicker", "", 3, "change", "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur", "tabindex"]], template: function DatetimeComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵlistener("onShown", function DatetimeComponent_Template_div_onShown_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTimepickerOpen()); });
@@ -2725,7 +2758,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
             i0.ɵɵelementStart(7, "div", 8)(8, "input", 9, 0);
             i0.ɵɵlistener("onShown", function DatetimeComponent_Template_input_onShown_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDatePickerOpen()); })("onHidden", function DatetimeComponent_Template_input_onHidden_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.hideDatepickerDropdown()); })("bsValueChange", function DatetimeComponent_Template_input_bsValueChange_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onModelUpdate($event, "date")); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 2, 13, "div", 10);
+            i0.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 3, 17, "div", 10);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(11, DatetimeComponent_Conditional_11_Template, 2, 8);
         } if (rf & 2) {
@@ -2744,16 +2777,16 @@ class DatetimeComponent extends BaseDateTimeComponent {
             i0.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.loadNativeDateInput ? 11 : -1);
-        } }, dependencies: [WmComponentsModule, FormsModule, i2$2.NgControlStatus, i2$2.NgModel, DateTimePickerComponent, BsDropdownModule, i3.BsDropdownMenuDirective, i3.BsDropdownDirective, BsDatepickerModule, i2.BsDatepickerDirective, i2.BsDatepickerInputDirective, TimepickerModule, i5.TimepickerComponent], encapsulation: 2 }); }
+        } }, dependencies: [WmComponentsModule, FormsModule, i2$2.NgControlStatus, i2$2.NgModel, DateTimePickerComponent, BsDropdownModule, i3.BsDropdownMenuDirective, i3.BsDropdownDirective, BsDatepickerModule, i2.BsDatepickerDirective, i2.BsDatepickerInputDirective, TimepickerModule, i5.TimepickerComponent, CommonModule, i6.NgClass], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatetimeComponent, [{
         type: Component,
-        args: [{ standalone: true, imports: [WmComponentsModule, FormsModule, DateTimePickerComponent, BsDropdownModule, BsDatepickerModule, TimepickerModule], selector: '[wmDateTime]', providers: [
+        args: [{ standalone: true, imports: [WmComponentsModule, FormsModule, DateTimePickerComponent, BsDropdownModule, BsDatepickerModule, TimepickerModule, CommonModule], selector: '[wmDateTime]', providers: [
                     provideAs(DatetimeComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(DatetimeComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(DatetimeComponent),
                     { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-                ], template: "<div dropdown\n  [isOpen]=\"isTimeOpen\"\n  autoClose=\"false\"\n  [container]=\"'body'\"\n  (onShown)=\"onTimepickerOpen()\"\n  style=\"display: inherit;\">\n  <input class=\"form-control app-textbox display-input\"\n    [attr.aria-label]=\"arialabel\"\n    focus-target\n    [name]=\"name\"\n    [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n    [attr.aria-hidden]=\"!!loadNativeDateInput\"\n    type=\"text\"\n    [value]=\"displayValue\"\n    (click)=\"toggleDpDropdown($event, true)\"\n    (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n    (blur)=\"onInputBlur($event)\"\n    (change)=\"onDateChange($event)\"\n    [autofocus]=\"autofocus\"\n    [disabled]=\"disabled || readonly || isCurrentDate\"\n    [required]=\"required\"\n    [readOnly]=\"isReadOnly\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.accesskey]=\"shortcutkey\"\n    (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n\n  <span class=\"input-group-btn\">\n    <button type=\"button\"\n      class=\"btn btn-default btn-date\"\n      [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n      [attr.aria-hidden]=\"!!loadNativeDateInput\"\n      [disabled]=\"disabled || readonly || isCurrentDate\"\n      [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n      aria-haspopup=\"true\"\n      [attr.aria-expanded]=\"isDateOpen\"\n      (click)=\"toggleDpDropdown($event, false)\">\n      <i aria-hidden=\"true\"\n      class=\"app-icon wm-sl-l sl-calendar\"></i>\n    </button>\n    <button type=\"button\"\n      class=\"btn btn-default btn-time\"\n      [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n      [attr.aria-hidden]=\"!!loadNativeDateInput\"\n      [disabled]=\"disabled || readonly || isCurrentDate\"\n      aria-label=\"Select time\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n      (click)=\"toggleTimePicker(!isTimeOpen, $event)\">\n      <i aria-hidden=\"true\"\n      class=\"app-icon wm-sl-l sl-time\"></i>\n    </button>\n  </span>\n  <div style=\"width: 0;display: inline-block;\">\n    <input class=\"model-holder\"\n      aria-label=\"datepicker dropdownmenu\"\n      aria-controls=\"date\"\n      focus-target\n      [tabindex]=\"-1\"\n      [attr.aria-hidden]=\"!!loadNativeDateInput\"\n      [container]=\"containerTarget || '.wm-app'\"\n      [bsConfig]=\"_dateOptions\"\n      [isOpen]=\"isDateOpen\"\n      placement=\"bottom right\"\n      (onShown)=\"onDatePickerOpen()\"\n      (onHidden)=\"hideDatepickerDropdown()\"\n      [daysDisabled]=\"excludedDaysToDisable\"\n      [datesDisabled]=\"excludedDatesToDisable\"\n      #datepicker=bsDatepicker\n      bsDatepicker\n      [isDisabled]=\"disabled || readonly || isCurrentDate\"\n      [bsValue]=\"bsDateValue\"\n      (bsValueChange)=\"onModelUpdate($event, 'date')\">\n  </div>\n  <div *dropdownMenu\n    class=\"dropdown-menu\"\n    aria-label=\"timepicker dropdown\"\n    aria-controls=\"time\"\n    (click)=\"preventTpClose($event)\">\n    <timepicker class=\"model-holder\"\n      [showMeridian]=\"ismeridian\"\n      [readonlyInput]=\"disabled || readonly || isCurrentDate\"\n      [(ngModel)]=\"bsTimeValue\"\n      [ngModelOptions]=\"{standalone: true}\"\n      [min]=\"minTime\"\n      [max]=\"maxTime\"\n      [hourStep]=\"hourstep\"\n      [minuteStep]=\"minutestep\"\n      [secondsStep]=\"secondsstep\"\n      [mousewheel]=\"true\"\n      [arrowkeys]=\"true\"\n      (isValid)=\"isValid($event)\"\n      [showSeconds]=\"showseconds\"\n    (ngModelChange)=\"onModelUpdate($event, 'time')\"></timepicker>\n  </div>\n</div>\n@if (loadNativeDateInput) {\n  <wm-datetimepicker\n    dateTimePicker\n    [config]=\"_dateOptions\"\n    [placement]=\"modal\"\n    [excludedDaysToDisable]=\"excludedDaysToDisable\"\n    [excludedDatesToDisable]=\"excludedDatesToDisable\"\n    [displayFormat]=\"dateInputFormat\"\n    [value]=\"bsDateValue\"\n    (change)=\"onModelUpdate($event, 'date')\">\n  </wm-datetimepicker>\n  <div class=\"mobile-input mobile-datepicker-container\"\n    [tabindex]=\"tabindex || 0\"\n    (click)=\"!(disabled || readonly) && showDatePickerModal(bsDateValue)\"\n    [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : arialabel || 'Choose Date'\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event)\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    role=\"button\">\n  </div>\n}\n" }]
+                ], template: "<div dropdown\n  [isOpen]=\"isTimeOpen\"\n  autoClose=\"false\"\n  [container]=\"'body'\"\n  (onShown)=\"onTimepickerOpen()\"\n  style=\"display: inherit;\">\n  <input class=\"form-control app-textbox display-input\"\n    [attr.aria-label]=\"arialabel\"\n    focus-target\n    [name]=\"name\"\n    [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n    [attr.aria-hidden]=\"!!loadNativeDateInput\"\n    type=\"text\"\n    [value]=\"displayValue\"\n    (click)=\"toggleDpDropdown($event, true)\"\n    (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n    (blur)=\"onInputBlur($event)\"\n    (change)=\"onDateChange($event)\"\n    [autofocus]=\"autofocus\"\n    [disabled]=\"disabled || readonly || isCurrentDate\"\n    [required]=\"required\"\n    [readOnly]=\"isReadOnly\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.accesskey]=\"shortcutkey\"\n    (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n\n  <span class=\"input-group-btn\">\n    <button type=\"button\"\n      class=\"btn btn-default btn-date\"\n      [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n      [attr.aria-hidden]=\"!!loadNativeDateInput\"\n      [disabled]=\"disabled || readonly || isCurrentDate\"\n      [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n      aria-haspopup=\"true\"\n      [attr.aria-expanded]=\"isDateOpen\"\n      (click)=\"toggleDpDropdown($event, false)\">\n      <i aria-hidden=\"true\"\n      class=\"app-icon wm-sl-l sl-calendar\"></i>\n    </button>\n    <button type=\"button\"\n      class=\"btn btn-default btn-time\"\n      [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n      [attr.aria-hidden]=\"!!loadNativeDateInput\"\n      [disabled]=\"disabled || readonly || isCurrentDate\"\n      aria-label=\"Select time\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n      (click)=\"toggleTimePicker(!isTimeOpen, $event)\">\n      <i aria-hidden=\"true\"\n      class=\"app-icon wm-sl-l sl-time\"></i>\n    </button>\n  </span>\n  <div style=\"width: 0;display: inline-block;\">\n    <input class=\"model-holder\"\n      aria-label=\"datepicker dropdownmenu\"\n      aria-controls=\"date\"\n      focus-target\n      [tabindex]=\"-1\"\n      [attr.aria-hidden]=\"!!loadNativeDateInput\"\n      [container]=\"containerTarget || '.wm-app'\"\n      [bsConfig]=\"_dateOptions\"\n      [isOpen]=\"isDateOpen\"\n      placement=\"bottom right\"\n      (onShown)=\"onDatePickerOpen()\"\n      (onHidden)=\"hideDatepickerDropdown()\"\n      [daysDisabled]=\"excludedDaysToDisable\"\n      [datesDisabled]=\"excludedDatesToDisable\"\n      #datepicker=bsDatepicker\n      bsDatepicker\n      [isDisabled]=\"disabled || readonly || isCurrentDate\"\n      [bsValue]=\"bsDateValue\"\n      (bsValueChange)=\"onModelUpdate($event, 'date')\">\n  </div>\n  <div *dropdownMenu\n    class=\"dropdown-menu\"\n    aria-label=\"timepicker dropdown\"\n    aria-controls=\"time\"\n    (click)=\"preventTpClose($event)\">\n    <timepicker class=\"model-holder\"\n      [showMeridian]=\"ismeridian\"\n      [readonlyInput]=\"disabled || readonly || isCurrentDate\"\n      [(ngModel)]=\"bsTimeValue\"\n      [ngModelOptions]=\"{standalone: true}\"\n      [min]=\"minTime\"\n      [max]=\"maxTime\"\n      [hourStep]=\"hourstep\"\n      [minuteStep]=\"minutestep\"\n      [secondsStep]=\"secondsstep\"\n      [mousewheel]=\"true\"\n      [arrowkeys]=\"true\"\n      (isValid)=\"isValid($event)\"\n      [showSeconds]=\"showseconds\"\n      (ngModelChange)=\"onModelUpdate($event, 'time')\"\n      [ngClass]=\"{ 'showbuttons': showampmbuttons }\"></timepicker>\n      @if (ismeridian && showampmbuttons) {\n          <div class=\"ampm-toggle text-center\">\n              <button class=\"meridian-btn mb-1\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'AM' }\" (click)=\"setPeriod('AM')\">AM</button><br>\n              <button class=\"meridian-btn\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'PM' }\" (click)=\"setPeriod('PM')\">PM</button>\n          </div>\n      }\n    </div>\n  </div>\n@if (loadNativeDateInput) {\n  <wm-datetimepicker\n    dateTimePicker\n    [config]=\"_dateOptions\"\n    [placement]=\"modal\"\n    [excludedDaysToDisable]=\"excludedDaysToDisable\"\n    [excludedDatesToDisable]=\"excludedDatesToDisable\"\n    [displayFormat]=\"dateInputFormat\"\n    [value]=\"bsDateValue\"\n    (change)=\"onModelUpdate($event, 'date')\">\n  </wm-datetimepicker>\n  <div class=\"mobile-input mobile-datepicker-container\"\n    [tabindex]=\"tabindex || 0\"\n    (click)=\"!(disabled || readonly) && showDatePickerModal(bsDateValue)\"\n    [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : arialabel || 'Choose Date'\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event)\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    role=\"button\">\n  </div>\n}\n" }]
     }], () => [{ type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }, { type: i1$1.App }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2763,7 +2796,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
             type: ViewChild,
             args: [BsDatepickerDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatetimeComponent, { className: "DatetimeComponent", filePath: "date-time/date-time.component.ts", lineNumber: 63 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatetimeComponent, { className: "DatetimeComponent", filePath: "date-time/date-time.component.ts", lineNumber: 64 }); })();
 
 const timeProps = new Map([
     ['autofocus', PROP_BOOLEAN],
@@ -2790,7 +2823,8 @@ const timeProps = new Map([
     ['secondsstep', { value: 1, ...PROP_NUMBER }],
     ['tabindex', { value: 0, ...PROP_NUMBER }],
     ['timepattern', PROP_STRING],
-    ['timestamp', PROP_STRING]
+    ['timestamp', PROP_STRING],
+    ['showampmbuttons', { value: false, ...PROP_BOOLEAN }]
 ]);
 const registerProps = () => {
     register('wm-time', timeProps);
@@ -2799,6 +2833,26 @@ const registerProps = () => {
 
 const _c0 = ["wmTime", ""];
 const _c1 = () => ({ standalone: true });
+const _c2 = a0 => ({ "showbuttons": a0 });
+const _c3 = a0 => ({ "active btn-secondary": a0 });
+function TimeComponent_div_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "button", 9);
+    i0.ɵɵlistener("click", function TimeComponent_div_5_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setPeriod("AM")); });
+    i0.ɵɵtext(2, "AM");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "br");
+    i0.ɵɵelementStart(4, "button", 10);
+    i0.ɵɵlistener("click", function TimeComponent_div_5_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setPeriod("PM")); });
+    i0.ɵɵtext(5, "PM");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c3, ctx_r1.getPeriod() === "AM"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c3, ctx_r1.getPeriod() === "PM"));
+} }
 function TimeComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 6);
@@ -2806,21 +2860,25 @@ function TimeComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(1, "timepicker", 7);
     i0.ɵɵtwoWayListener("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.bsTimeValue, $event) || (ctx_r1.bsTimeValue = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("isValid", function TimeComponent_div_5_Template_timepicker_isValid_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.isValid($event)); })("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTimeChange($event)); });
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(2, TimeComponent_div_5_Conditional_2_Template, 6, 6, "div", 8);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("showMeridian", ctx_r1.ismeridian)("readonlyInput", ctx_r1.isDisabled);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.bsTimeValue);
-    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(13, _c1))("disabled", ctx_r1.disabled || ctx_r1.readonly || ctx_r1.isCurrentTime)("min", ctx_r1.minTime)("max", ctx_r1.maxTime)("hourStep", ctx_r1.hourstep)("minuteStep", ctx_r1.minutestep)("secondsStep", ctx_r1.secondsstep)("mousewheel", true)("arrowkeys", true)("showSeconds", ctx_r1.showseconds);
+    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(15, _c1))("disabled", ctx_r1.disabled || ctx_r1.readonly || ctx_r1.isCurrentTime)("min", ctx_r1.minTime)("max", ctx_r1.maxTime)("hourStep", ctx_r1.hourstep)("minuteStep", ctx_r1.minutestep)("secondsStep", ctx_r1.secondsstep)("mousewheel", true)("arrowkeys", true)("showSeconds", ctx_r1.showseconds)("ngClass", i0.ɵɵpureFunction1(16, _c2, ctx_r1.showampmbuttons));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ismeridian && ctx_r1.showampmbuttons ? 2 : -1);
 } }
 function TimeComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "wm-datetimepicker", 8);
-    i0.ɵɵlistener("change", function TimeComponent_Conditional_6_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTimeChange($event)); });
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "wm-datetimepicker", 11);
+    i0.ɵɵlistener("change", function TimeComponent_Conditional_6_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTimeChange($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 9);
-    i0.ɵɵlistener("click", function TimeComponent_Conditional_6_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r1.disabled || ctx_r1.readonly) && ctx_r1.showDatePickerModal(ctx_r1.bsTimeValue)); })("focus", function TimeComponent_Conditional_6_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputFocus(true); ctx_r1.invokeOnFocus($event); return i0.ɵɵresetView(ctx_r1.assignModel()); })("blur", function TimeComponent_Conditional_6_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r1.invokeOnTouched($event)); });
+    i0.ɵɵelementStart(1, "div", 12);
+    i0.ɵɵlistener("click", function TimeComponent_Conditional_6_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r1.disabled || ctx_r1.readonly) && ctx_r1.showDatePickerModal(ctx_r1.bsTimeValue)); })("focus", function TimeComponent_Conditional_6_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputFocus(true); ctx_r1.invokeOnFocus($event); return i0.ɵɵresetView(ctx_r1.assignModel()); })("blur", function TimeComponent_Conditional_6_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r1.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -3140,7 +3198,7 @@ class TimeComponent extends BaseDateTimeComponent {
                 provideAs(TimeComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(TimeComponent),
                 { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c0, decls: 7, vars: 16, consts: [["dropdown", "", 2, "display", "inherit", 3, "onShown", "onHidden", "isOpen", "container"], ["focus-target", "", "type", "text", "role", "timer", 1, "form-control", "app-textbox", "display-input", 3, "click", "focus", "blur", "change", "keydown", "tabindex", "name", "value", "disabled", "autofocus", "required", "readOnly"], [1, "input-group-btn", "dropdown-toggle"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "click", "tabindex", "disabled"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], ["class", "dropdown-menu", 3, "click", 4, "dropdownMenu"], [1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "ngModelChange", "isValid", "showMeridian", "readonlyInput", "ngModel", "ngModelOptions", "disabled", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds"], ["dateTimePicker", "", "mode", "TIME", 3, "change", "minTime", "maxTime", "placement", "displayFormat", "value"], ["tabindex", "1000000", "role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur"]], template: function TimeComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c0, decls: 7, vars: 16, consts: [["dropdown", "", 2, "display", "inherit", 3, "onShown", "onHidden", "isOpen", "container"], ["focus-target", "", "type", "text", "role", "timer", 1, "form-control", "app-textbox", "display-input", 3, "click", "focus", "blur", "change", "keydown", "tabindex", "name", "value", "disabled", "autofocus", "required", "readOnly"], [1, "input-group-btn", "dropdown-toggle"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "click", "tabindex", "disabled"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], ["class", "dropdown-menu", 3, "click", 4, "dropdownMenu"], [1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "ngModelChange", "isValid", "showMeridian", "readonlyInput", "ngModel", "ngModelOptions", "disabled", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds", "ngClass"], [1, "ampm-toggle", "text-center"], [1, "meridian-btn", "mb-1", 3, "click", "ngClass"], [1, "meridian-btn", 3, "click", "ngClass"], ["dateTimePicker", "", "mode", "TIME", 3, "change", "minTime", "maxTime", "placement", "displayFormat", "value"], ["tabindex", "1000000", "role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur"]], template: function TimeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("onShown", function TimeComponent_Template_div_onShown_0_listener() { return ctx.onShown(); })("onHidden", function TimeComponent_Template_div_onHidden_0_listener() { return ctx.hideTimepickerDropdown(); });
             i0.ɵɵelementStart(1, "input", 1);
@@ -3150,7 +3208,7 @@ class TimeComponent extends BaseDateTimeComponent {
             i0.ɵɵlistener("click", function TimeComponent_Template_button_click_3_listener($event) { return ctx.toggleDropdown($event, false); });
             i0.ɵɵelement(4, "i", 4);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(5, TimeComponent_div_5_Template, 2, 14, "div", 5);
+            i0.ɵɵtemplate(5, TimeComponent_div_5_Template, 3, 18, "div", 5);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(6, TimeComponent_Conditional_6_Template, 2, 6);
         } if (rf & 2) {
@@ -3162,23 +3220,23 @@ class TimeComponent extends BaseDateTimeComponent {
             i0.ɵɵproperty("tabindex", ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentTime);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.loadNativeDateInput ? 6 : -1);
-        } }, dependencies: [WmComponentsModule, FormsModule, i2$2.NgControlStatus, i2$2.NgModel, DateTimePickerComponent, BsDropdownModule, i3.BsDropdownMenuDirective, i3.BsDropdownDirective, TimepickerModule, i5.TimepickerComponent], encapsulation: 2 }); }
+        } }, dependencies: [WmComponentsModule, FormsModule, i2$2.NgControlStatus, i2$2.NgModel, DateTimePickerComponent, BsDropdownModule, i3.BsDropdownMenuDirective, i3.BsDropdownDirective, TimepickerModule, i5.TimepickerComponent, CommonModule, i6.NgClass], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeComponent, [{
         type: Component,
-        args: [{ standalone: true, imports: [WmComponentsModule, FormsModule, DateTimePickerComponent, BsDropdownModule, TimepickerModule], selector: '[wmTime]', providers: [
+        args: [{ standalone: true, imports: [WmComponentsModule, FormsModule, DateTimePickerComponent, BsDropdownModule, TimepickerModule, CommonModule], selector: '[wmTime]', providers: [
                     provideAs(TimeComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(TimeComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(TimeComponent),
                     { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-                ], template: "<div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n  <input [attr.aria-label]=\"arialabel\" class=\"form-control app-textbox display-input\"\n    focus-target\n    [tabindex]=\"tabindex\"\n    [name]=\"name\"\n    type=\"text\"\n    role=\"timer\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled || readonly || isCurrentTime\"\n    [autofocus]=\"autofocus\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.accesskey]=\"shortcutkey\"\n    [attr.aria-atomic]=\"isCurrentTime ? 'true' : 'false'\"\n    [required]=\"required\"\n    [readOnly]=\"isReadOnly\"\n    (click)=\"toggleDropdown($event, true)\"\n    (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n    (blur)=\"onInputBlur($event)\"\n    (change)=\"onDisplayTimeChange($event)\"\n    (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n  <span class=\"input-group-btn dropdown-toggle\">\n    <button type=\"button\" class=\"btn btn-default btn-date\" [tabindex]=\"tabindex\" [disabled]=\"disabled || readonly || isCurrentTime\" aria-label=\"Select time\" aria-haspopup=\"true\" aria-expanded=\"false\" (click)=\"toggleDropdown($event, false)\"><i aria-hidden=\"true\" class=\"app-icon wm-sl-l sl-time\"></i></button>\n  </span>\n  <div *dropdownMenu class=\"dropdown-menu\" (click)=\"preventTpClose($event)\">\n    <timepicker class=\"model-holder\"\n      [showMeridian]=\"ismeridian\"\n      [readonlyInput]=\"isDisabled\"\n      [(ngModel)]=\"bsTimeValue\"\n      [ngModelOptions]=\"{standalone: true}\"\n      [disabled]=\"disabled || readonly || isCurrentTime\"\n      [min]=\"minTime\"\n      [max]=\"maxTime\"\n      [hourStep]=\"hourstep\"\n      [minuteStep]=\"minutestep\"\n      [secondsStep]=\"secondsstep\"\n      [mousewheel]=\"true\"\n      [arrowkeys]=\"true\"\n      (isValid)=\"isValid($event)\"\n    [showSeconds]=\"showseconds\" (ngModelChange)=\"onTimeChange($event)\"></timepicker>\n  </div>\n</div>\n@if (loadNativeDateInput) {\n  <wm-datetimepicker\n    dateTimePicker\n    mode=\"TIME\"\n    [minTime]=\"minTime\"\n    [maxTime]=\"maxTime\"\n    [placement]=\"modal\"\n    [displayFormat]=\"timepattern\"\n    [value]=\"bsTimeValue\"\n    (change)=\"onTimeChange($event)\">\n  </wm-datetimepicker>\n  <div class=\"mobile-input mobile-datepicker-container\"\n    tabindex=\"1000000\"\n    (click)=\"!(disabled || readonly) && showDatePickerModal(bsTimeValue)\"\n    [attr.aria-label]=\"displayValue ? 'Change time  ' + displayValue : arialabel || 'Select time'\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event); assignModel()\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    role=\"button\">\n  </div>\n}\n" }]
+                ], template: "<div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n  <input [attr.aria-label]=\"arialabel\" class=\"form-control app-textbox display-input\"\n    focus-target\n    [tabindex]=\"tabindex\"\n    [name]=\"name\"\n    type=\"text\"\n    role=\"timer\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled || readonly || isCurrentTime\"\n    [autofocus]=\"autofocus\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.accesskey]=\"shortcutkey\"\n    [attr.aria-atomic]=\"isCurrentTime ? 'true' : 'false'\"\n    [required]=\"required\"\n    [readOnly]=\"isReadOnly\"\n    (click)=\"toggleDropdown($event, true)\"\n    (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n    (blur)=\"onInputBlur($event)\"\n    (change)=\"onDisplayTimeChange($event)\"\n    (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n  <span class=\"input-group-btn dropdown-toggle\">\n    <button type=\"button\" class=\"btn btn-default btn-date\" [tabindex]=\"tabindex\" [disabled]=\"disabled || readonly || isCurrentTime\" aria-label=\"Select time\" aria-haspopup=\"true\" aria-expanded=\"false\" (click)=\"toggleDropdown($event, false)\"><i aria-hidden=\"true\" class=\"app-icon wm-sl-l sl-time\"></i></button>\n  </span>\n  <div *dropdownMenu class=\"dropdown-menu\" (click)=\"preventTpClose($event)\">\n    <timepicker class=\"model-holder\"\n      [showMeridian]=\"ismeridian\"\n      [readonlyInput]=\"isDisabled\"\n      [(ngModel)]=\"bsTimeValue\"\n      [ngModelOptions]=\"{standalone: true}\"\n      [disabled]=\"disabled || readonly || isCurrentTime\"\n      [min]=\"minTime\"\n      [max]=\"maxTime\"\n      [hourStep]=\"hourstep\"\n      [minuteStep]=\"minutestep\"\n      [secondsStep]=\"secondsstep\"\n      [mousewheel]=\"true\"\n      [arrowkeys]=\"true\"\n      (isValid)=\"isValid($event)\"\n      [showSeconds]=\"showseconds\" (ngModelChange)=\"onTimeChange($event)\"\n      [ngClass]=\"{ 'showbuttons': showampmbuttons }\"></timepicker>\n      @if (ismeridian && showampmbuttons) {\n          <div class=\"ampm-toggle text-center\">\n              <button class=\"meridian-btn mb-1\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'AM' }\" (click)=\"setPeriod('AM')\">AM</button><br>\n              <button class=\"meridian-btn\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'PM' }\" (click)=\"setPeriod('PM')\">PM</button>\n          </div>\n      }\n  </div>\n</div>\n@if (loadNativeDateInput) {\n  <wm-datetimepicker\n    dateTimePicker\n    mode=\"TIME\"\n    [minTime]=\"minTime\"\n    [maxTime]=\"maxTime\"\n    [placement]=\"modal\"\n    [displayFormat]=\"timepattern\"\n    [value]=\"bsTimeValue\"\n    (change)=\"onTimeChange($event)\">\n  </wm-datetimepicker>\n  <div class=\"mobile-input mobile-datepicker-container\"\n    tabindex=\"1000000\"\n    (click)=\"!(disabled || readonly) && showDatePickerModal(bsTimeValue)\"\n    [attr.aria-label]=\"displayValue ? 'Change time  ' + displayValue : arialabel || 'Select time'\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event); assignModel()\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    role=\"button\">\n  </div>\n}\n" }]
     }], () => [{ type: i0.Injector }, { type: i0.NgZone }, { type: i1$1.AppDefaults }, { type: i1$1.App }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
             }, {
                 type: Optional
             }] }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimeComponent, { className: "TimeComponent", filePath: "time/time.component.ts", lineNumber: 49 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimeComponent, { className: "TimeComponent", filePath: "time/time.component.ts", lineNumber: 50 }); })();
 
 /**
  * Generated bundle index. Do not edit.