@wavemaker/app-ng-runtime 11.12.1-rc.221 → 11.13.0-rc.222

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

@@ -676,11 +676,20 @@ const DATAENTRYMODE_DROPDOWN_OPTIONS = {
 // Providing meridians to the timepicker baesd on selected locale
 function getTimepickerConfig(i18nService) {
     return Object.assign(new TimepickerConfig(), {
-        meridians: getLocaleDayPeriods(i18nService.getSelectedLocale(), FormStyle.Format, TranslationWidth.Abbreviated)
+        meridians: [i18nService.getLocalizedMessage("LABEL_AM") || "AM", i18nService.getLocalizedMessage("LABEL_PM") || "PM"]
     });
 }
 class BaseDateTimeComponent extends BaseFormCustomComponent {
     get timeZone() { return this.inj.get(AbstractI18nService).getTimezone(this); }
+    /**
+     * Safely replace internal meridians with localized display meridians only for string values
+     */
+    safeReplaceMeridians(value) {
+        if (typeof value === 'string') {
+            return value.replace(this.meridians[0], this.am).replace(this.meridians[1], this.pm);
+        }
+        return value;
+    }
     constructor(inj, WIDGET_CONFIG, explicitContext) {
         super(inj, WIDGET_CONFIG, explicitContext);
         this.isReadOnly = false;
@@ -699,6 +708,8 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         this._dateOptions.clearPosition = 'right';
         this.meridians = getLocaleDayPeriods(this.selectedLocale, FormStyle.Format, TranslationWidth.Abbreviated);
         this.loadNativeDateInput = isMobile() && !this.showcustompicker;
+        this.am = this.i18nService.getLocalizedMessage("LABEL_AM") || "AM";
+        this.pm = this.i18nService.getLocalizedMessage("LABEL_PM") || "PM";
         this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe("locale-changed", (locale) => {
             this.datePipe.datePipe.locale = locale.angular;
             this._dateOptions.todayButtonLabel = this.i18nService.getLocalizedMessage('LABEL_TODAY_DATE');
@@ -783,7 +794,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
                     // format the date value only when inputVal is obtained from $event.target.value, as the format doesnt match.
                     inputVal = getFormattedDate(this.datePipe, inputVal, pattern, timeZone);
                 }
-                if (inputVal !== formattedDate) {
+                if (inputVal?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]) !== formattedDate) {
                     this.invalidDateTimeFormat = true;
                     this.validateType = 'incorrectformat';
                     this.invokeOnChange(this.datavalue, undefined, false);
@@ -1306,7 +1317,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
      * This function checks whether the given time is valid or not
      */
     timeFormatValidation() {
-        const enteredDate = $(this.nativeElement).find('input').val();
+        const enteredDate = $(this.nativeElement).find('input').val()?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]);
         const newVal = getNativeDateObject(enteredDate, { meridians: this.meridians, pattern: this.datepattern });
         if (!this.formatValidation(newVal, enteredDate)) {
             return;
@@ -1682,7 +1693,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             const value = this.datavalue;
             this.datavalue = undefined;
             setTimeout(() => {
-                $(this.nativeElement).find('.display-input').val(formattedDisplay);
+                $(this.nativeElement).find('.display-input').val(this.safeReplaceMeridians(formattedDisplay));
                 this.minDateMaxDateValidationOnInput(formattedDisplay);
                 this.invokeOnChange(value, {}, false);
             });
@@ -2283,19 +2294,23 @@ 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.ɵɵtext(2);
     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.ɵɵtext(5);
     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"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c3$1, ctx_r2.getPeriod() === "AM"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_AM || "AM");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c3$1, ctx_r2.getPeriod() === "PM"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_PM || "PM");
 } }
 function DatetimeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -2305,7 +2320,7 @@ function DatetimeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     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.ɵɵtemplate(2, DatetimeComponent_div_10_Conditional_2_Template, 6, 6, "div", 13);
+    i0.ɵɵtemplate(2, DatetimeComponent_div_10_Conditional_2_Template, 6, 8, "div", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -2348,7 +2363,8 @@ class DatetimeComponent extends BaseDateTimeComponent {
      * @returns {any|string}
      */
     get displayValue() {
-        return getFormattedDate(this.datePipe, this.proxyModel, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this) || '';
+        const display = getFormattedDate(this.datePipe, this.proxyModel, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this) || '';
+        return this.safeReplaceMeridians(display);
     }
     get nativeDisplayValue() {
         return getFormattedDate(this.datePipe, this.proxyModel, 'yyyy-MM-ddTHH:mm:ss', this.timeZone, this.key, this.isCurrentDate, this) || '';
@@ -2514,7 +2530,8 @@ class DatetimeComponent extends BaseDateTimeComponent {
     onModelUpdate(newVal, type) {
         if (type === 'date') {
             this.invalidDateTimeFormat = false;
-            if (getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this) === this.displayValue) {
+            const formatted = getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this);
+            if (this.safeReplaceMeridians(formatted) === this.displayValue) {
                 $(this.nativeElement).find('.display-input').val(this.displayValue);
             }
         }
@@ -2550,7 +2567,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
             }
             if (this.datavalue === this.getPrevDataValue()) {
                 const time = getFormattedDate(this.datePipe, this.datavalue, this.datepattern, this.timeZone, null, null, this) || '';
-                $(this.nativeElement).find('.display-input').val(time);
+                $(this.nativeElement).find('.display-input').val(time?.replace(this.meridians[0], this.am)?.replace(this.meridians[1], this.pm));
             }
         }
         else {
@@ -2562,7 +2579,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
         const timePickerFields = $('.bs-timepicker-field');
         if (this.timeZone && this.key === 'datetimestamp' && timePickerFields.length) {
             const formattedDate = getFormattedDate(this.datePipe, newVal, this.getTimePattern(), this.timeZone, this.key, null, this);
-            this.updateTimepickerFields(formattedDate, timePickerFields);
+            this.updateTimepickerFields(this.safeReplaceMeridians(formattedDate), timePickerFields);
         }
     }
     // deduces the timepattern from datepattern set in the studio
@@ -2666,7 +2683,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
             return;
         }
         let newVal = $event.target.value.trim();
-        newVal = newVal ? getNativeDateObject(newVal, { pattern: this.loadNativeDateInput ? this.outputformat : this.datepattern, meridians: this.meridians, isNativePicker: this.loadNativeDateInput }) : undefined;
+        newVal = newVal ? getNativeDateObject(newVal?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]), { pattern: this.loadNativeDateInput ? this.outputformat : this.datepattern, meridians: this.meridians, isNativePicker: this.loadNativeDateInput }) : undefined;
         // datetime pattern validation
         // if invalid pattern is entered, device is showing an error.
         if (!this.formatValidation(newVal, $event.target.value, isNativePicker)) {
@@ -2691,6 +2708,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
                 newVal = newVal ? getNativeDateObject(newVal, { pattern: this.loadNativeDateInput ? this.outputformat : this.datepattern, meridians: this.meridians }) : undefined;
                 event.preventDefault();
                 const formattedDate = getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this);
+                const formattedDateWithMeridians = this.safeReplaceMeridians(formattedDate);
                 const inputVal = event.target.value.trim();
                 if (inputVal && this.datepattern === 'timestamp') {
                     if (!isNaN$1(inputVal) && parseInt$1(inputVal) !== formattedDate) {
@@ -2698,7 +2716,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
                         this.invokeOnChange(this.datavalue, event, false);
                     }
                 }
-                else if (inputVal && inputVal !== formattedDate) {
+                else if (inputVal && inputVal !== formattedDateWithMeridians) {
                     this.invalidDateTimeFormat = true;
                     this.invokeOnChange(this.datavalue, event, false);
                 }
@@ -2721,7 +2739,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
     }
     isValid(event) {
         if (!event) {
-            const enteredDate = $(this.nativeElement).find('input').val();
+            const enteredDate = $(this.nativeElement).find('input').val()?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]);
             const newVal = getNativeDateObject(enteredDate, { pattern: this.loadNativeDateInput ? this.outputformat : this.datepattern, meridians: this.meridians, isNativePicker: this.loadNativeDateInput });
             if (!this.formatValidation(newVal, enteredDate)) {
                 return;
@@ -2797,7 +2815,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
                     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')\"\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" }]
+                ], 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')\">{{appLocale.LABEL_AM ||\"AM\"}}</button><br>\n              <button class=\"meridian-btn\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'PM' }\" (click)=\"setPeriod('PM')\">{{appLocale.LABEL_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']
@@ -2850,19 +2868,23 @@ 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.ɵɵtext(2);
     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.ɵɵtext(5);
     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"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c3, ctx_r1.getPeriod() === "AM"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.appLocale.LABEL_AM || "AM");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c3, ctx_r1.getPeriod() === "PM"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.appLocale.LABEL_PM || "PM");
 } }
 function TimeComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -2872,7 +2894,7 @@ function TimeComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     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.ɵɵtemplate(2, TimeComponent_div_5_Conditional_2_Template, 6, 6, "div", 8);
+    i0.ɵɵtemplate(2, TimeComponent_div_5_Conditional_2_Template, 6, 8, "div", 8);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -2939,7 +2961,8 @@ class TimeComponent extends BaseDateTimeComponent {
         $appDigest();
     }
     get displayValue() {
-        return getFormattedDate(this.datePipe, this.bsTimeValue, this.timepattern, this.timeZone, null, null, this) || '';
+        const display = getFormattedDate(this.datePipe, this.bsTimeValue, this.timepattern, this.timeZone, null, null, this) || '';
+        return this.safeReplaceMeridians(display);
     }
     get nativeDisplayValue() {
         return getFormattedDate(this.datePipe, this.bsTimeValue, 'HH:mm:ss', this.timeZone, null, null, this) || '';
@@ -3065,7 +3088,7 @@ class TimeComponent extends BaseDateTimeComponent {
      * This is an internal method triggered when the time input changes
      */
     onDisplayTimeChange($event) {
-        const newVal = getNativeDateObject($event.target.value, { meridians: this.meridians, pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+        const newVal = getNativeDateObject($event.target.value?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]), { meridians: this.meridians, pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
         // time pattern validation
         // if invalid pattern is entered, device is showing an error.
         if (!this.formatValidation(newVal, $event.target.value)) {
@@ -3102,13 +3125,13 @@ class TimeComponent extends BaseDateTimeComponent {
             maxTimeMeridian = moment(new Date(this.bsTimePicker.max)).format('A');
             timeValue = this.bsTimePicker.hours + ':' + (this.bsTimePicker.minutes || 0) + ':' + (this.bsTimePicker.seconds || 0) + (this.bsTimePicker.showMeridian ? (' ' + minTimeMeridian) : '');
             timeInputValue = getNativeDateObject(timeValue, { pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
-            this.bsTimePicker.meridian = minTimeMeridian;
+            this.bsTimePicker.meridian = minTimeMeridian?.replace(this.meridians[0], this.am)?.replace(this.meridians[1], this.pm);
             this.timeNotInRange = this.bsTimePicker.min > timeInputValue || this.bsTimePicker.max < timeInputValue;
             if (this.timeNotInRange || this.invalidDateTimeFormat) {
                 this.bsTimeValue = this.getPrevDataValue();
                 setTimeout(() => {
                     const timeStr = getFormattedDate(this.datePipe, timeValue, this.timepattern, this.timeZone, null, null, this) || '';
-                    $(this.nativeElement).find('.display-input').val(timeStr);
+                    $(this.nativeElement).find('.display-input').val(this.safeReplaceMeridians(timeStr));
                 });
             }
             this.setValidateType(this.bsTimePicker.min, this.bsTimePicker.max, timeInputValue);
@@ -3119,7 +3142,7 @@ class TimeComponent extends BaseDateTimeComponent {
         // Update UI display if value hasn't changed
         if (!this.timeNotInRange && this.datavalue === this.getPrevDataValue()) {
             const displayTime = getFormattedDate(this.datePipe, this.datavalue, this.timepattern, this.timeZone, null, null, this) || '';
-            $(this.nativeElement).find('.display-input').val(displayTime);
+            $(this.nativeElement).find('.display-input').val(this.safeReplaceMeridians(displayTime));
         }
         this.invokeOnTouched();
         this.invokeOnChange(this.datavalue, {}, true);
@@ -3175,7 +3198,7 @@ class TimeComponent extends BaseDateTimeComponent {
     }
     isValid(event) {
         if (!event) {
-            const enteredDate = $(this.nativeElement).find('input').val();
+            const enteredDate = $(this.nativeElement).find('input').val()?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]);
             const newVal = getNativeDateObject(enteredDate, { meridians: this.meridians, pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
             if (!this.formatValidation(newVal, enteredDate)) {
                 return;
@@ -3240,7 +3263,7 @@ class TimeComponent extends BaseDateTimeComponent {
                     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)\"\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" }]
+                ], 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')\">{{appLocale.LABEL_AM ||\"AM\"}}</button><br>\n              <button class=\"meridian-btn\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'PM' }\" (click)=\"setPeriod('PM')\">{{appLocale.LABEL_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']