@siemens/element-ng 48.0.2 → 48.1.0

package/fesm2022/siemens-element-ng-datepicker.mjs

@@ -2203,6 +2203,17 @@ class SiTimepickerComponent {
     setDisabledState(isDisabled) {
         this.disabledNgControl.set(isDisabled);
     }
+    /**
+     * Handle input event to remove non-numeric characters.
+     */
+    handleInput(event) {
+        const inputEl = event.target;
+        const current = inputEl.value;
+        const cleaned = current.replace(/\D/g, '');
+        if (current !== cleaned) {
+            inputEl.value = cleaned;
+        }
+    }
     /**
      * Handle Enter, Arrow up/down and Space key press events.
      */
@@ -2292,7 +2303,8 @@ class SiTimepickerComponent {
             }
             let hours = time.getHours();
             if (this.use12HourClock()) {
-                this.meridian.set(hours >= 12 ? 'pm' : 'am');
+                // 12:00 am is midnight while 12:00 pm is noon when users enter a value greater than 12 we can assume it's pm
+                this.meridian.set(hours > 12 ? 'pm' : 'am');
                 this.meridianChange.emit(this.meridian());
                 hours = hours % 12;
                 if (hours === 0) {
@@ -2490,7 +2502,7 @@ class SiTimepickerComponent {
                 provide: SI_FORM_ITEM_CONTROL,
                 useExisting: SiTimepickerComponent
             }
-        ], viewQueries: [{ propertyName: "inputParts", predicate: ["inputPart"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [class.is-invalid]=\"!unitValidation()[config.name] || this.forceInvalid()\"\n        [disabled]=\"disabled()\"\n        [name]=\"config.name\"\n        [pattern]=\"config.pattern\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        [value]=\"unitValues()[config.name]\"\n        (change)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}.min-width{inline-size:100%;max-inline-size:45px;min-inline-size:35px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputParts", predicate: ["inputPart"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [class.is-invalid]=\"!unitValidation()[config.name] || this.forceInvalid()\"\n        [disabled]=\"disabled()\"\n        [name]=\"config.name\"\n        [pattern]=\"config.pattern\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        [value]=\"unitValues()[config.name]\"\n        (change)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (input)=\"handleInput($event)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}.min-width{inline-size:100%;max-inline-size:45px;min-inline-size:35px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTimepickerComponent, decorators: [{
             type: Component,
@@ -2509,7 +2521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         class: 'form-custom-control',
                         '[class.readonly]': 'readonly()',
                         '[attr.aria-labelledby]': 'labelledby'
-                    }, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [class.is-invalid]=\"!unitValidation()[config.name] || this.forceInvalid()\"\n        [disabled]=\"disabled()\"\n        [name]=\"config.name\"\n        [pattern]=\"config.pattern\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        [value]=\"unitValues()[config.name]\"\n        (change)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}.min-width{inline-size:100%;max-inline-size:45px;min-inline-size:35px}\n"] }]
+                    }, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @for (config of units(); track $index) {\n    @if (!$first) {\n      <ng-container *ngTemplateOutlet=\"separator; context: { separator: config.separator }\" />\n    }\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (config.label | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        autocomplete=\"off\"\n        class=\"form-control hide-feedback-icon\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.aria-label]=\"config.ariaLabel | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [attr.maxlength]=\"config.maxLength\"\n        [class.is-invalid]=\"!unitValidation()[config.name] || this.forceInvalid()\"\n        [disabled]=\"disabled()\"\n        [name]=\"config.name\"\n        [pattern]=\"config.pattern\"\n        [placeholder]=\"config.placeholder\"\n        [readonly]=\"readonly()\"\n        [value]=\"unitValues()[config.name]\"\n        (change)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateField(config.name, toHtmlInputElement($event.target).value)\"\n        (input)=\"handleInput($event)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId()\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}.min-width{inline-size:100%;max-inline-size:45px;min-inline-size:35px}\n"] }]
         }], ctorParameters: () => [] });
 
 /**