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

package/components/data/table/table-column/table-column.directive.d.ts

@@ -61,6 +61,7 @@ export declare class TableColumnDirective extends BaseComponent implements OnIni
     filterdisplayfield: any;
     filterdisplaylabel: any;
     filtersearchkey: any;
+    sortby: any;
     filterplaceholder: any;
     datafield: any;
     displayfield: any;

package/components/data/table/table.component.d.ts

@@ -62,6 +62,7 @@ export declare class TableComponent extends StylableComponent implements AfterCo
     gridfirstrowselect: any;
     iconclass: any;
     ondemandmessage: any;
+    allowpagesizechange: any;
     viewlessmessage: any;
     showviewlessbutton: boolean;
     _triggeredByUser: any;
@@ -75,6 +76,8 @@ export declare class TableComponent extends StylableComponent implements AfterCo
     navigationalign: any;
     nodatamessage: any;
     pagesize: any;
+    updatedPageSize: any;
+    actualPageSize: any;
     currentpage: any;
     prevData: any;
     primaryKey: any[];
@@ -127,6 +130,11 @@ export declare class TableComponent extends StylableComponent implements AfterCo
     fieldDefs: any[];
     rowDef: any;
     rowInstance: any;
+    pagesizeoptions: any;
+    multiselecttitle: any;
+    multiselectarialabel: any;
+    radioselecttitle: any;
+    radioselectarialabel: any;
     private fullFieldDefs;
     private __fullData;
     private dataNavigatorWatched;
@@ -221,9 +229,15 @@ export declare class TableComponent extends StylableComponent implements AfterCo
         isDataUpdatedByUser: boolean;
         showviewlessbutton: boolean;
         ondemandmessage: string;
+        allowpagesizechange: boolean;
+        pagesizeoptions: string;
         viewlessmessage: string;
         loadingdatamsg: string;
         isNextPageData: any;
+        multiselecttitle: string;
+        multiselectarialabel: string;
+        radioselecttitle: string;
+        radioselectarialabel: string;
         ACTIONS: {
             DELETE: string;
             EDIT: string;
@@ -239,6 +253,7 @@ export declare class TableComponent extends StylableComponent implements AfterCo
         setCurrentPage: (pageNum: any) => void;
         getDataSource: () => any;
         getPageSize: () => any;
+        getUpdatedPageSize: () => any;
         getPageCount: () => any;
         enableNavigation: () => void;
         setDeletedRowIndex: (id: any) => void;
@@ -331,6 +346,7 @@ export declare class TableComponent extends StylableComponent implements AfterCo
     setLastActionToFilterCriteria(): void;
     setLastActionToDatasetUpdate(): void;
     checkIfVarFiltersApplied(): void;
+    getActualPageSize(): any;
     watchVariableDataSet(newVal: any): void;
     ngOnDestroy(): void;
     addRowIndex(row: any): any;
@@ -358,6 +374,7 @@ export declare class TableComponent extends StylableComponent implements AfterCo
     createGridColumns(data: any): void;
     getSortExpr(): any;
     onPropertyChange(key: string, nv: any, ov?: any): void;
+    setDefaultPageSize(nv: any): void;
     onDataSourceChange(): void;
     private clearActionRowVars;
     onStyleChange(key: any, nv: any, ov: any): void;

package/components/input/epoch/base-date-time.component.d.ts

@@ -44,6 +44,7 @@ export declare abstract class BaseDateTimeComponent extends BaseFormCustomCompon
     next: any;
     prev: any;
     clicked: boolean;
+    showampmbuttons: boolean;
     protected dateNotInRange: boolean;
     protected timeNotInRange: boolean;
     protected invalidDateTimeFormat: boolean;
@@ -227,7 +228,8 @@ export declare abstract class BaseDateTimeComponent extends BaseFormCustomCompon
      */
     private addDatepickerMouseEvents;
     blurDateInput(isPickerOpen: any): void;
-    protected adjustDateTimePickerInModel(element: any, elementDirective: any): void;
+    getPeriod(): 'AM' | 'PM';
+    setPeriod(period: 'AM' | 'PM'): void;
     onPropertyChange(key: any, nv: any, ov?: any): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/components/input/epoch/bundles/index.umd.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@wm/components/base'), require('angular-imask'), require('@angular/core'), require('@angular/forms'), require('ngx-bootstrap/datepicker'), require('@wm/core'), require('@angular/common'), require('ngx-bootstrap/dropdown'), require('ngx-bootstrap/timepicker'), require('@wm/components/input'), require('ngx-bootstrap/modal'), require('lodash-es'), require('moment'), require('imask')) :
     typeof define === 'function' && define.amd ? define(['exports', '@wm/components/base', 'angular-imask', '@angular/core', '@angular/forms', 'ngx-bootstrap/datepicker', '@wm/core', '@angular/common', 'ngx-bootstrap/dropdown', 'ngx-bootstrap/timepicker', '@wm/components/input', 'ngx-bootstrap/modal', 'lodash-es', 'moment', 'imask'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.epoch = {}), global.wm.components.base, global.angularIMask, global.ng.core, global.ng.forms, global.datepicker, global.wm.core, global.ng.common, global.dropdown, global.timepicker, global.wm.components.input, global.modal, global._, global.momentLib, global.IMask));
-})(this, (function (exports, base, i2$1, i0, i2$2, i2, i1$1, common, i3, i5, input, i1, lodashEs, momentLib, IMask) { 'use strict';
+})(this, (function (exports, base, i2$1, i0, i2$2, i2, i1$1, i6, i3, i5, input, i1, lodashEs, momentLib, IMask) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -26,6 +26,7 @@
     var i2$2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2$2);
     var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
     var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
+    var i6__namespace = /*#__PURE__*/_interopNamespaceDefault(i6);
     var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
     var i5__namespace = /*#__PURE__*/_interopNamespaceDefault(i5);
     var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
@@ -458,13 +459,13 @@
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.datetimepickerTemplate = _t.first);
             } }, inputs: { mode: "mode", placement: "placement", _bsDatepickerConfig: [0, "config", "_bsDatepickerConfig"], minTime: "minTime", maxTime: "maxTime", _displayFormat: "_displayFormat", excludedDatesToDisable: "excludedDatesToDisable", value: "value", bsDatepickerConfig: [0, "config", "bsDatepickerConfig"], excludedDaysToDisable: "excludedDaysToDisable", displayFormat: "displayFormat" }, outputs: { change: "change" }, standalone: true, features: [i0__namespace.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["datetimepickerTemplate", ""], [1, "app-datetime-picker"], [1, "modal-body"], [1, "mobile-datetime-picker-options"], ["bsDatepicker", "", 3, "bsConfig", "datesDisabled", "bsValue"], [3, "value", "min", "max"], [1, "text-primary", "date-picker-value"], [1, "modal-footer"], [1, "btn", "btn-secondary", "today-btn"], [1, "btn", "btn-primary", "pull-right", "ok-btn"], [1, "btn", "btn-secondary", "pull-right", "clear-btn", 3, "click"], ["bsDatepicker", "", 3, "bsValueChange", "bsConfig", "datesDisabled", "bsValue"], [3, "change", "value", "min", "max"], [1, "btn", "btn-secondary", "today-btn", 3, "click"], [1, "btn", "btn-primary", "pull-right", "ok-btn", 3, "click"]], template: function DateTimePickerComponent_Template(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵtemplate(0, DateTimePickerComponent_ng_template_0_Template, 12, 6, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
-            } }, dependencies: [common.CommonModule, base.WmComponentsModule, i2.BsDatepickerModule, i2__namespace.BsDatepickerDirective, i2__namespace.BsDatepickerInlineDirective, i3.BsDropdownModule], encapsulation: 2 }); }
+            } }, dependencies: [i6.CommonModule, base.WmComponentsModule, i2.BsDatepickerModule, i2__namespace.BsDatepickerDirective, i2__namespace.BsDatepickerInlineDirective, i3.BsDropdownModule], encapsulation: 2 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DateTimePickerComponent, [{
             type: i0.Component,
             args: [{
                     standalone: true,
-                    imports: [common.CommonModule, base.WmComponentsModule, i2.BsDatepickerModule, i3.BsDropdownModule],
+                    imports: [i6.CommonModule, base.WmComponentsModule, i2.BsDatepickerModule, i3.BsDropdownModule],
                     selector: 'wm-datetimepicker',
                     template: `
     <ng-template #datetimepickerTemplate>
@@ -684,7 +685,7 @@
     // Providing meridians to the timepicker baesd on selected locale
     function getTimepickerConfig(i18nService) {
         return Object.assign(new i5.TimepickerConfig(), {
-            meridians: common.getLocaleDayPeriods(i18nService.getSelectedLocale(), common.FormStyle.Format, common.TranslationWidth.Abbreviated)
+            meridians: i6.getLocaleDayPeriods(i18nService.getSelectedLocale(), i6.FormStyle.Format, i6.TranslationWidth.Abbreviated)
         });
     }
     class BaseDateTimeComponent extends input.BaseFormCustomComponent {
@@ -693,6 +694,7 @@
             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
@@ -704,7 +706,7 @@
             this.selectedLocale = this.i18nService.getSelectedLocale();
             this._dateOptions.todayPosition = 'left';
             this._dateOptions.clearPosition = 'right';
-            this.meridians = common.getLocaleDayPeriods(this.selectedLocale, common.FormStyle.Format, common.TranslationWidth.Abbreviated);
+            this.meridians = i6.getLocaleDayPeriods(this.selectedLocale, i6.FormStyle.Format, i6.TranslationWidth.Abbreviated);
             this.loadNativeDateInput = i1$1.isMobile() && !this.showcustompicker;
             this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe("locale-changed", (locale) => {
                 this.datePipe.datePipe.locale = locale.angular;
@@ -1547,30 +1549,40 @@
                 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;
@@ -1635,7 +1647,7 @@
         }
         ngAfterViewInit() {
             super.ngAfterViewInit();
-            this.containerTarget = this.nativeElement.closest('modal-container') ? '.modal-container' : base.getContainerTargetClass(this.nativeElement);
+            this.containerTarget = base.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();
@@ -2004,16 +2016,15 @@
             // 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 = base.setFocusTrap(datePickerContainer, true);
             this.focusTrap.activate();
             this.addDatepickerKeyboardEvents(this, false);
-            i1$1.adjustContainerPosition(datePickerContainerEl, this.nativeElement, this.bsDatePickerDirective._datepicker);
-            i1$1.adjustContainerRightEdges(datePickerContainerEl, this.nativeElement, this.bsDatePickerDirective._datepicker);
-            this.adjustDateTimePickerInModel(datePickerContainerEl[0], this.bsDatePickerDirective);
+            i1$1.adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
+            i1$1.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) => {
@@ -2253,7 +2264,8 @@
         ['clearbutton', { value: true, ...base.PROP_BOOLEAN }],
         ['adaptiveposition', { value: true, ...base.PROP_BOOLEAN }],
         ['todaybuttonlabel', { value: 'LABEL_TODAY_DATE', ...base.PROP_STRING }],
-        ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...base.PROP_STRING }]
+        ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...base.PROP_STRING }],
+        ['showampmbuttons', { value: false, ...base.PROP_BOOLEAN }]
     ]);
     const registerProps$1 = () => {
         base.register('wm-datetime', dateTimeProps);
@@ -2263,6 +2275,26 @@
 
     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__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "div", 13)(1, "button", 14);
+        i0__namespace.ɵɵlistener("click", function DatetimeComponent_div_10_Conditional_2_Template_button_click_1_listener() { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.setPeriod("AM")); });
+        i0__namespace.ɵɵtext(2, "AM");
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelement(3, "br");
+        i0__namespace.ɵɵelementStart(4, "button", 15);
+        i0__namespace.ɵɵlistener("click", function DatetimeComponent_div_10_Conditional_2_Template_button_click_4_listener() { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.setPeriod("PM")); });
+        i0__namespace.ɵɵtext(5, "PM");
+        i0__namespace.ɵɵelementEnd()();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(2, _c3$1, ctx_r2.getPeriod() === "AM"));
+        i0__namespace.ɵɵadvance(3);
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(4, _c3$1, ctx_r2.getPeriod() === "PM"));
+    } }
     function DatetimeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
         const _r2 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "div", 11);
@@ -2270,21 +2302,25 @@
         i0__namespace.ɵɵelementStart(1, "timepicker", 12);
         i0__namespace.ɵɵtwoWayListener("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); i0__namespace.ɵɵtwoWayBindingSet(ctx_r2.bsTimeValue, $event) || (ctx_r2.bsTimeValue = $event); return i0__namespace.ɵɵresetView($event); });
         i0__namespace.ɵɵlistener("isValid", function DatetimeComponent_div_10_Template_timepicker_isValid_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.isValid($event)); })("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onModelUpdate($event, "time")); });
-        i0__namespace.ɵɵelementEnd()();
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵtemplate(2, DatetimeComponent_div_10_Conditional_2_Template, 6, 6, "div", 13);
+        i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r2 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("showMeridian", ctx_r2.ismeridian)("readonlyInput", ctx_r2.disabled || ctx_r2.readonly || ctx_r2.isCurrentDate);
         i0__namespace.ɵɵtwoWayProperty("ngModel", ctx_r2.bsTimeValue);
-        i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵ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__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵ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__namespace.ɵɵpureFunction1(15, _c2$1, ctx_r2.showampmbuttons));
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵconditional(ctx_r2.ismeridian && ctx_r2.showampmbuttons ? 2 : -1);
     } }
     function DatetimeComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-        const _r4 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 13);
-        i0__namespace.ɵɵlistener("change", function DatetimeComponent_Conditional_11_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onModelUpdate($event, "date")); });
+        const _r5 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 16);
+        i0__namespace.ɵɵlistener("change", function DatetimeComponent_Conditional_11_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r5); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onModelUpdate($event, "date")); });
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(1, "div", 14);
-        i0__namespace.ɵɵlistener("click", function DatetimeComponent_Conditional_11_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DatetimeComponent_Conditional_11_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
+        i0__namespace.ɵɵelementStart(1, "div", 17);
+        i0__namespace.ɵɵlistener("click", function DatetimeComponent_Conditional_11_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r5); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r5); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DatetimeComponent_Conditional_11_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r5); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r2 = i0__namespace.ɵɵnextContext();
@@ -2447,10 +2483,8 @@
             this.bsDatePickerDirective.hide();
             this.focusTimePickerPopover(this);
             this.bindTimePickerKeyboardEvents();
-            const dropdownContainerEl = $('bs-dropdown-container');
-            i1$1.adjustContainerPosition(dropdownContainerEl, this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
-            i1$1.adjustContainerRightEdges(dropdownContainerEl, this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
-            this.adjustDateTimePickerInModel(dropdownContainerEl[0], this.bsDatePickerDirective);
+            i1$1.adjustContainerPosition($('bs-dropdown-container'), this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
+            i1$1.adjustContainerRightEdges($('bs-dropdown-container'), this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
         }
         onDatePickerOpen() {
             this.isDateOpen = !this.isDateOpen;
@@ -2459,8 +2493,8 @@
             // 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 = base.setFocusTrap(datePickerContainer, true);
@@ -2470,8 +2504,7 @@
                 this.hightlightToday(this.activeDate);
             }
             this.addDatepickerKeyboardEvents(this, true);
-            i1$1.adjustContainerPosition(datePickerContainerEl, this.nativeElement, this.bsDatePickerDirective._datepicker);
-            this.adjustDateTimePickerInModel(datePickerContainerEl[0], this.bsDatePickerDirective);
+            i1$1.adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
         }
         /**
          * This is an internal method to update the model
@@ -2716,7 +2749,7 @@
                     base.provideAs(DatetimeComponent, i2$2.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(DatetimeComponent),
                     { provide: i5.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
-                ]), i0__namespace.ɵɵInheritDefinitionFeature, i0__namespace.ɵɵ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__namespace.ɵɵInheritDefinitionFeature, i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
                 i0__namespace.ɵɵelementStart(0, "div", 1);
                 i0__namespace.ɵɵlistener("onShown", function DatetimeComponent_Template_div_onShown_0_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onTimepickerOpen()); });
@@ -2734,7 +2767,7 @@
                 i0__namespace.ɵɵelementStart(7, "div", 8)(8, "input", 9, 0);
                 i0__namespace.ɵɵlistener("onShown", function DatetimeComponent_Template_input_onShown_8_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onDatePickerOpen()); })("onHidden", function DatetimeComponent_Template_input_onHidden_8_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.hideDatepickerDropdown()); })("bsValueChange", function DatetimeComponent_Template_input_bsValueChange_8_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onModelUpdate($event, "date")); });
                 i0__namespace.ɵɵelementEnd()();
-                i0__namespace.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 2, 13, "div", 10);
+                i0__namespace.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 3, 17, "div", 10);
                 i0__namespace.ɵɵelementEnd();
                 i0__namespace.ɵɵtemplate(11, DatetimeComponent_Conditional_11_Template, 2, 8);
             } if (rf & 2) {
@@ -2753,16 +2786,16 @@
                 i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵconditional(ctx.loadNativeDateInput ? 11 : -1);
-            } }, dependencies: [base.WmComponentsModule, i2$2.FormsModule, i2$2__namespace.NgControlStatus, i2$2__namespace.NgModel, DateTimePickerComponent, i3.BsDropdownModule, i3__namespace.BsDropdownMenuDirective, i3__namespace.BsDropdownDirective, i2.BsDatepickerModule, i2__namespace.BsDatepickerDirective, i2__namespace.BsDatepickerInputDirective, i5.TimepickerModule, i5__namespace.TimepickerComponent], encapsulation: 2 }); }
+            } }, dependencies: [base.WmComponentsModule, i2$2.FormsModule, i2$2__namespace.NgControlStatus, i2$2__namespace.NgModel, DateTimePickerComponent, i3.BsDropdownModule, i3__namespace.BsDropdownMenuDirective, i3__namespace.BsDropdownDirective, i2.BsDatepickerModule, i2__namespace.BsDatepickerDirective, i2__namespace.BsDatepickerInputDirective, i5.TimepickerModule, i5__namespace.TimepickerComponent, i6.CommonModule, i6__namespace.NgClass], encapsulation: 2 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatetimeComponent, [{
             type: i0.Component,
-            args: [{ standalone: true, imports: [base.WmComponentsModule, i2$2.FormsModule, DateTimePickerComponent, i3.BsDropdownModule, i2.BsDatepickerModule, i5.TimepickerModule], selector: '[wmDateTime]', providers: [
+            args: [{ standalone: true, imports: [base.WmComponentsModule, i2$2.FormsModule, DateTimePickerComponent, i3.BsDropdownModule, i2.BsDatepickerModule, i5.TimepickerModule, i6.CommonModule], selector: '[wmDateTime]', providers: [
                         base.provideAs(DatetimeComponent, i2$2.NG_VALUE_ACCESSOR, true),
                         base.provideAs(DatetimeComponent, i2$2.NG_VALIDATORS, true),
                         base.provideAsWidgetRef(DatetimeComponent),
                         { provide: i5.TimepickerConfig, deps: [i1$1.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__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.App }, { type: undefined, decorators: [{
                     type: i0.Inject,
                     args: ['EXPLICIT_CONTEXT']
@@ -2772,7 +2805,7 @@
                 type: i0.ViewChild,
                 args: [i2.BsDatepickerDirective]
             }] }); })();
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(DatetimeComponent, { className: "DatetimeComponent", filePath: "date-time/date-time.component.ts", lineNumber: 63 }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(DatetimeComponent, { className: "DatetimeComponent", filePath: "date-time/date-time.component.ts", lineNumber: 64 }); })();
 
     const timeProps = new Map([
         ['autofocus', base.PROP_BOOLEAN],
@@ -2799,7 +2832,8 @@
         ['secondsstep', { value: 1, ...base.PROP_NUMBER }],
         ['tabindex', { value: 0, ...base.PROP_NUMBER }],
         ['timepattern', base.PROP_STRING],
-        ['timestamp', base.PROP_STRING]
+        ['timestamp', base.PROP_STRING],
+        ['showampmbuttons', { value: false, ...base.PROP_BOOLEAN }]
     ]);
     const registerProps = () => {
         base.register('wm-time', timeProps);
@@ -2808,6 +2842,26 @@
 
     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__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "div", 8)(1, "button", 9);
+        i0__namespace.ɵɵlistener("click", function TimeComponent_div_5_Conditional_2_Template_button_click_1_listener() { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.setPeriod("AM")); });
+        i0__namespace.ɵɵtext(2, "AM");
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelement(3, "br");
+        i0__namespace.ɵɵelementStart(4, "button", 10);
+        i0__namespace.ɵɵlistener("click", function TimeComponent_div_5_Conditional_2_Template_button_click_4_listener() { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r1.setPeriod("PM")); });
+        i0__namespace.ɵɵtext(5, "PM");
+        i0__namespace.ɵɵelementEnd()();
+    } if (rf & 2) {
+        const ctx_r1 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(2, _c3, ctx_r1.getPeriod() === "AM"));
+        i0__namespace.ɵɵadvance(3);
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(4, _c3, ctx_r1.getPeriod() === "PM"));
+    } }
     function TimeComponent_div_5_Template(rf, ctx) { if (rf & 1) {
         const _r1 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "div", 6);
@@ -2815,21 +2869,25 @@
         i0__namespace.ɵɵelementStart(1, "timepicker", 7);
         i0__namespace.ɵɵtwoWayListener("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); i0__namespace.ɵɵtwoWayBindingSet(ctx_r1.bsTimeValue, $event) || (ctx_r1.bsTimeValue = $event); return i0__namespace.ɵɵresetView($event); });
         i0__namespace.ɵɵlistener("isValid", function TimeComponent_div_5_Template_timepicker_isValid_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.isValid($event)); })("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onTimeChange($event)); });
-        i0__namespace.ɵɵelementEnd()();
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵtemplate(2, TimeComponent_div_5_Conditional_2_Template, 6, 6, "div", 8);
+        i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r1 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("showMeridian", ctx_r1.ismeridian)("readonlyInput", ctx_r1.isDisabled);
         i0__namespace.ɵɵtwoWayProperty("ngModel", ctx_r1.bsTimeValue);
-        i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵ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__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵ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__namespace.ɵɵpureFunction1(16, _c2, ctx_r1.showampmbuttons));
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵconditional(ctx_r1.ismeridian && ctx_r1.showampmbuttons ? 2 : -1);
     } }
     function TimeComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-        const _r3 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 8);
-        i0__namespace.ɵɵlistener("change", function TimeComponent_Conditional_6_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onTimeChange($event)); });
+        const _r4 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 11);
+        i0__namespace.ɵɵlistener("change", function TimeComponent_Conditional_6_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onTimeChange($event)); });
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(1, "div", 9);
-        i0__namespace.ɵɵlistener("click", function TimeComponent_Conditional_6_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.onDateTimeInputFocus(true); ctx_r1.invokeOnFocus($event); return i0__namespace.ɵɵresetView(ctx_r1.assignModel()); })("blur", function TimeComponent_Conditional_6_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r1.invokeOnTouched($event)); });
+        i0__namespace.ɵɵelementStart(1, "div", 12);
+        i0__namespace.ɵɵlistener("click", function TimeComponent_Conditional_6_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r4); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r4); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.onDateTimeInputFocus(true); ctx_r1.invokeOnFocus($event); return i0__namespace.ɵɵresetView(ctx_r1.assignModel()); })("blur", function TimeComponent_Conditional_6_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r1.invokeOnTouched($event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r1 = i0__namespace.ɵɵnextContext();
@@ -3149,7 +3207,7 @@
                     base.provideAs(TimeComponent, i2$2.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(TimeComponent),
                     { provide: i5.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
-                ]), i0__namespace.ɵɵInheritDefinitionFeature, i0__namespace.ɵɵ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__namespace.ɵɵInheritDefinitionFeature, i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "div", 0);
                 i0__namespace.ɵɵlistener("onShown", function TimeComponent_Template_div_onShown_0_listener() { return ctx.onShown(); })("onHidden", function TimeComponent_Template_div_onHidden_0_listener() { return ctx.hideTimepickerDropdown(); });
                 i0__namespace.ɵɵelementStart(1, "input", 1);
@@ -3159,7 +3217,7 @@
                 i0__namespace.ɵɵlistener("click", function TimeComponent_Template_button_click_3_listener($event) { return ctx.toggleDropdown($event, false); });
                 i0__namespace.ɵɵelement(4, "i", 4);
                 i0__namespace.ɵɵelementEnd()();
-                i0__namespace.ɵɵtemplate(5, TimeComponent_div_5_Template, 2, 14, "div", 5);
+                i0__namespace.ɵɵtemplate(5, TimeComponent_div_5_Template, 3, 18, "div", 5);
                 i0__namespace.ɵɵelementEnd();
                 i0__namespace.ɵɵtemplate(6, TimeComponent_Conditional_6_Template, 2, 6);
             } if (rf & 2) {
@@ -3171,23 +3229,23 @@
                 i0__namespace.ɵɵproperty("tabindex", ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentTime);
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵconditional(ctx.loadNativeDateInput ? 6 : -1);
-            } }, dependencies: [base.WmComponentsModule, i2$2.FormsModule, i2$2__namespace.NgControlStatus, i2$2__namespace.NgModel, DateTimePickerComponent, i3.BsDropdownModule, i3__namespace.BsDropdownMenuDirective, i3__namespace.BsDropdownDirective, i5.TimepickerModule, i5__namespace.TimepickerComponent], encapsulation: 2 }); }
+            } }, dependencies: [base.WmComponentsModule, i2$2.FormsModule, i2$2__namespace.NgControlStatus, i2$2__namespace.NgModel, DateTimePickerComponent, i3.BsDropdownModule, i3__namespace.BsDropdownMenuDirective, i3__namespace.BsDropdownDirective, i5.TimepickerModule, i5__namespace.TimepickerComponent, i6.CommonModule, i6__namespace.NgClass], encapsulation: 2 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TimeComponent, [{
             type: i0.Component,
-            args: [{ standalone: true, imports: [base.WmComponentsModule, i2$2.FormsModule, DateTimePickerComponent, i3.BsDropdownModule, i5.TimepickerModule], selector: '[wmTime]', providers: [
+            args: [{ standalone: true, imports: [base.WmComponentsModule, i2$2.FormsModule, DateTimePickerComponent, i3.BsDropdownModule, i5.TimepickerModule, i6.CommonModule], selector: '[wmTime]', providers: [
                         base.provideAs(TimeComponent, i2$2.NG_VALUE_ACCESSOR, true),
                         base.provideAs(TimeComponent, i2$2.NG_VALIDATORS, true),
                         base.provideAsWidgetRef(TimeComponent),
                         { provide: i5.TimepickerConfig, deps: [i1$1.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__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.App }, { type: undefined, decorators: [{
                     type: i0.Inject,
                     args: ['EXPLICIT_CONTEXT']
                 }, {
                     type: i0.Optional
                 }] }], null); })();
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(TimeComponent, { className: "TimeComponent", filePath: "time/time.component.ts", lineNumber: 49 }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(TimeComponent, { className: "TimeComponent", filePath: "time/time.component.ts", lineNumber: 50 }); })();
 
     exports.DateComponent = DateComponent;
     exports.DateTimePickerComponent = DateTimePickerComponent;