@siemens/element-ng 51.5.0 → 51.6.0

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

@@ -1319,13 +1319,13 @@ class SiCalendarBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiCalendarBodyComponent, isStandalone: true, selector: "[si-calendar-body]", inputs: { focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowLabels: { classPropertyName: "rowLabels", publicName: "rowLabels", isSignal: true, isRequired: false, transformFunction: null }, rowLabelCssClasses: { classPropertyName: "rowLabelCssClasses", publicName: "rowLabelCssClasses", isSignal: true, isRequired: false, transformFunction: null }, enableRangeSelection: { classPropertyName: "enableRangeSelection", publicName: "enableRangeSelection", isSignal: true, isRequired: false, transformFunction: null }, previewRange: { classPropertyName: "previewRange", publicName: "previewRange", isSignal: true, isRequired: false, transformFunction: null }, activeHover: { classPropertyName: "activeHover", publicName: "activeHover", isSignal: true, isRequired: false, transformFunction: null }, compareAdapter: { classPropertyName: "compareAdapter", publicName: "compareAdapter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeHover: "activeHoverChange", selectedValueChange: "selectedValueChange" }, host: { classAttribute: "si-calendar-body" }, viewQueries: [{ propertyName: "calendarDateCells", predicate: SiCalendarDateCellDirective, descendants: true, isSignal: true }], exportAs: ["siCalendarBody"], ngImport: i0, template: "@for (row of rows(); track rowIndex; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!-- Typically used for week numbers -->\n    @if (rowLabels()) {\n      <td class=\"si-calendar-row-label\" [attr.data-row]=\"rowIndex\">\n        <div [class]=\"rowLabelCssClasses()\">{{ rowLabels()?.at(rowIndex) ?? '' }}</div>\n      </td>\n    }\n    @for (col of row; track colIndex; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"si-calendar-cell\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-col]=\"colIndex\"\n        [class]=\"cellRangeClasses()[rowIndex][colIndex]\"\n      >\n        <button\n          siCalendarDateCell\n          type=\"button\"\n          [cell]=\"col\"\n          [compareAdapter]=\"compareAdapter()\"\n          [attr.cdkFocusInitial]=\"isActive(col) ? '' : null\"\n          [class]=\"cellCss(col)\"\n          [class.selected]=\"selection().isSelected(col, startDate(), endDate())\"\n          [class.text-secondary]=\"\n            col.isPreview &&\n            !col.disabled &&\n            !selection().isRangeSelected(col, startDate()) &&\n            !selection().isRangeSelected(col, endDate()) &&\n            !selection().inRange(col, startDate(), endDate())\n          \"\n          [tabindex]=\"isActive(col) ? '0' : '-1'\"\n          (mouseover)=\"emitActiveHover(col)\"\n          (click)=\"emitSelectCell(col)\"\n          (focus)=\"emitActiveDateChange(col)\"\n        >\n          {{ col.displayValue }}\n        </button>\n      </td>\n    }\n  </tr>\n}\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: SiCalendarDateCellDirective, selector: "[siCalendarDateCell]", inputs: ["cell", "compareAdapter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiCalendarBodyComponent, isStandalone: true, selector: "[si-calendar-body]", inputs: { focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowLabels: { classPropertyName: "rowLabels", publicName: "rowLabels", isSignal: true, isRequired: false, transformFunction: null }, rowLabelCssClasses: { classPropertyName: "rowLabelCssClasses", publicName: "rowLabelCssClasses", isSignal: true, isRequired: false, transformFunction: null }, enableRangeSelection: { classPropertyName: "enableRangeSelection", publicName: "enableRangeSelection", isSignal: true, isRequired: false, transformFunction: null }, previewRange: { classPropertyName: "previewRange", publicName: "previewRange", isSignal: true, isRequired: false, transformFunction: null }, activeHover: { classPropertyName: "activeHover", publicName: "activeHover", isSignal: true, isRequired: false, transformFunction: null }, compareAdapter: { classPropertyName: "compareAdapter", publicName: "compareAdapter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeHover: "activeHoverChange", selectedValueChange: "selectedValueChange" }, host: { classAttribute: "si-calendar-body" }, viewQueries: [{ propertyName: "calendarDateCells", predicate: SiCalendarDateCellDirective, descendants: true, isSignal: true }], exportAs: ["siCalendarBody"], ngImport: i0, template: "@for (row of rows(); track rowIndex; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!-- Typically used for week numbers -->\n    @if (rowLabels()) {\n      <td class=\"si-calendar-row-label\" [attr.data-row]=\"rowIndex\">\n        <div [class]=\"rowLabelCssClasses()\">{{ rowLabels()?.at(rowIndex) ?? '' }}</div>\n      </td>\n    }\n    @for (col of row; track colIndex; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"si-calendar-cell\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-col]=\"colIndex\"\n        [class]=\"cellRangeClasses()[rowIndex][colIndex]\"\n      >\n        <button\n          siCalendarDateCell\n          type=\"button\"\n          [cell]=\"col\"\n          [compareAdapter]=\"compareAdapter()\"\n          [attr.cdkFocusInitial]=\"isActive(col) ? '' : null\"\n          [class]=\"cellCss(col)\"\n          [class.selected]=\"selection().isSelected(col, startDate(), endDate())\"\n          [class.text-secondary]=\"\n            col.isPreview &&\n            !col.disabled &&\n            !selection().isRangeSelected(col, startDate()) &&\n            !selection().isRangeSelected(col, endDate()) &&\n            !selection().inRange(col, startDate(), endDate())\n          \"\n          [tabindex]=\"isActive(col) ? '0' : '-1'\"\n          (mouseover)=\"emitActiveHover(col)\"\n          (click)=\"emitSelectCell(col)\"\n          (focus)=\"emitActiveDateChange(col)\"\n          >{{ col.displayValue }}</button\n        >\n      </td>\n    }\n  </tr>\n}\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: SiCalendarDateCellDirective, selector: "[siCalendarDateCell]", inputs: ["cell", "compareAdapter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCalendarBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: '[si-calendar-body]', imports: [A11yModule, SiCalendarDateCellDirective], host: {
                         class: 'si-calendar-body'
-                    }, exportAs: 'siCalendarBody', template: "@for (row of rows(); track rowIndex; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!-- Typically used for week numbers -->\n    @if (rowLabels()) {\n      <td class=\"si-calendar-row-label\" [attr.data-row]=\"rowIndex\">\n        <div [class]=\"rowLabelCssClasses()\">{{ rowLabels()?.at(rowIndex) ?? '' }}</div>\n      </td>\n    }\n    @for (col of row; track colIndex; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"si-calendar-cell\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-col]=\"colIndex\"\n        [class]=\"cellRangeClasses()[rowIndex][colIndex]\"\n      >\n        <button\n          siCalendarDateCell\n          type=\"button\"\n          [cell]=\"col\"\n          [compareAdapter]=\"compareAdapter()\"\n          [attr.cdkFocusInitial]=\"isActive(col) ? '' : null\"\n          [class]=\"cellCss(col)\"\n          [class.selected]=\"selection().isSelected(col, startDate(), endDate())\"\n          [class.text-secondary]=\"\n            col.isPreview &&\n            !col.disabled &&\n            !selection().isRangeSelected(col, startDate()) &&\n            !selection().isRangeSelected(col, endDate()) &&\n            !selection().inRange(col, startDate(), endDate())\n          \"\n          [tabindex]=\"isActive(col) ? '0' : '-1'\"\n          (mouseover)=\"emitActiveHover(col)\"\n          (click)=\"emitSelectCell(col)\"\n          (focus)=\"emitActiveDateChange(col)\"\n        >\n          {{ col.displayValue }}\n        </button>\n      </td>\n    }\n  </tr>\n}\n" }]
+                    }, exportAs: 'siCalendarBody', template: "@for (row of rows(); track rowIndex; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!-- Typically used for week numbers -->\n    @if (rowLabels()) {\n      <td class=\"si-calendar-row-label\" [attr.data-row]=\"rowIndex\">\n        <div [class]=\"rowLabelCssClasses()\">{{ rowLabels()?.at(rowIndex) ?? '' }}</div>\n      </td>\n    }\n    @for (col of row; track colIndex; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"si-calendar-cell\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-col]=\"colIndex\"\n        [class]=\"cellRangeClasses()[rowIndex][colIndex]\"\n      >\n        <button\n          siCalendarDateCell\n          type=\"button\"\n          [cell]=\"col\"\n          [compareAdapter]=\"compareAdapter()\"\n          [attr.cdkFocusInitial]=\"isActive(col) ? '' : null\"\n          [class]=\"cellCss(col)\"\n          [class.selected]=\"selection().isSelected(col, startDate(), endDate())\"\n          [class.text-secondary]=\"\n            col.isPreview &&\n            !col.disabled &&\n            !selection().isRangeSelected(col, startDate()) &&\n            !selection().isRangeSelected(col, endDate()) &&\n            !selection().inRange(col, startDate(), endDate())\n          \"\n          [tabindex]=\"isActive(col) ? '0' : '-1'\"\n          (mouseover)=\"emitActiveHover(col)\"\n          (click)=\"emitSelectCell(col)\"\n          (focus)=\"emitActiveDateChange(col)\"\n          >{{ col.displayValue }}</button\n        >\n      </td>\n    }\n  </tr>\n}\n" }]
         }], propDecorators: { focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedDate", required: true }] }, { type: i0.Output, args: ["focusedDateChange"] }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLabels", required: false }] }], rowLabelCssClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLabelCssClasses", required: false }] }], enableRangeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRangeSelection", required: false }] }], previewRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewRange", required: false }] }], activeHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeHover", required: false }] }, { type: i0.Output, args: ["activeHoverChange"] }], compareAdapter: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareAdapter", required: false }] }], selectedValueChange: [{ type: i0.Output, args: ["selectedValueChange"] }], calendarDateCells: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiCalendarDateCellDirective), { isSignal: true }] }] } });
 
 /**
@@ -1470,6 +1470,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  */
 class SiDaySelectionComponent extends SiInitialFocusComponent {
     todayDefaultText = t(() => $localize `:@@SI_DATEPICKER.TODAY:Today`);
+    locale = inject(LOCALE_ID).toString();
+    dateFormatter = new Intl.DateTimeFormat(this.locale, {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+        calendar: 'gregory'
+    });
     /**
      * Indicate whether the week numbers shall be hidden.
      *
@@ -1531,11 +1539,16 @@ class SiDaySelectionComponent extends SiInitialFocusComponent {
             const activeMonth = isSameOrBetween(date, monthStart, monthEnd);
             const isToday = isSameDate(date, today());
             const outOfRange = !isSameOrBetween(date, minDate, maxDate);
+            const displayValue = date.getDate().toString();
+            const ariaLabel = this.dateFormatter
+                .formatToParts(date)
+                .map(part => (part.type === 'day' ? displayValue : part.value))
+                .join('');
             weeks.at(weekIndex)?.push({
                 value: date.getDate(),
                 disabled: outOfRange,
-                ariaLabel: date.toDateString(),
-                displayValue: date.getDate().toString(),
+                ariaLabel,
+                displayValue,
                 isPreview: !activeMonth,
                 isToday,
                 valueRaw: createDate(date),
@@ -1570,7 +1583,6 @@ class SiDaySelectionComponent extends SiInitialFocusComponent {
         return maxDate && (isSameMonth(focusedDate, maxDate) || isAfterMonth(focusedDate, maxDate));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isNextButtonDisabled" }] : /* istanbul ignore next */ []));
-    locale = inject(LOCALE_ID).toString();
     calendarBodyKeyDown(event) {
         const isRtl = isRTL();
         switch (event.key) {