@siemens/element-ng 48.2.0 → 48.4.0

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

@@ -14,7 +14,7 @@ import { Subject, merge } from 'rxjs';
 import { takeUntil, skip, map, filter, tap } from 'rxjs/operators';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule, FocusMonitor, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
-import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
+import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { addIcons, elementRight2, elementLeft2, SiIconComponent, elementCalendar } from '@siemens/element-ng/icon';
 
 /**
@@ -1398,6 +1398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * The focusedDate is handled according the keyboard interactions.
  */
 class SiDaySelectionComponent extends SiInitialFocusComponent {
+    todayDefaultText = t(() => $localize `:@@SI_DATEPICKER.TODAY:Today`);
     /**
      * Indicate whether the week numbers shall be hidden.
      *
@@ -1423,6 +1424,7 @@ class SiDaySelectionComponent extends SiInitialFocusComponent {
     activeMonthChange = output();
     /** Emits when the user requests a different to show a different view */
     viewChange = output();
+    today = computed(() => this.todayLabel() ?? this.todayDefaultText);
     /** The translated list of week days. */
     days = computed(() => getDayStrings(this.locale, this.weekStartDay()));
     /** The week numbers which are shown as row label */
@@ -1566,11 +1568,11 @@ class SiDaySelectionComponent extends SiInitialFocusComponent {
         this.viewChange.emit(view);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDaySelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiDaySelectionComponent, isStandalone: true, selector: "si-day-selection", inputs: { hideWeekNumbers: { classPropertyName: "hideWeekNumbers", publicName: "hideWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, weekStartDay: { classPropertyName: "weekStartDay", publicName: "weekStartDay", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekLabel: { classPropertyName: "calendarWeekLabel", publicName: "calendarWeekLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeMonthChange: "activeMonthChange", viewChange: "viewChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel() | translate\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setMonthOffset(-1)\"\n  />\n  <div class=\"flex-fill\">\n    <button\n      type=\"button\"\n      class=\"open-month-view flex-fill text-end px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('month')\"\n    >\n      {{ focusedDate() | date: 'MMMM' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"open-year-view flex-fill text-start px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('year')\"\n    >\n      {{ focusedDate() | date: 'yyyy' }}\n    </button>\n  </div>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel() | translate\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setMonthOffset(1)\"\n  />\n</div>\n<table class=\"px-9 mt-6\" role=\"grid\">\n  <thead class=\"si-calendar-table-header\">\n    <tr>\n      @if (!hideWeekNumbers()) {\n        <th scope=\"col\" class=\"week-num\">\n          <span class=\"visually-hidden\">{{ calendarWeekLabel() | translate }}</span>\n        </th>\n      }\n      @for (day of days(); track $index) {\n        <th scope=\"col\">\n          <span class=\"si-hidden-xs si-hidden-sm\">{{ day }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody\n    si-calendar-body\n    rowLabelCssClasses=\"week-num\"\n    [focusedDate]=\"focusedDate()\"\n    [compareAdapter]=\"compareAdapter\"\n    [startDate]=\"startDate()\"\n    [endDate]=\"endDate()\"\n    [enableRangeSelection]=\"isRangeSelection()\"\n    [previewRange]=\"previewRange()\"\n    [rows]=\"weeks()\"\n    [rowLabels]=\"hideWeekNumbers() ? undefined : weekNumbers()\"\n    [activeHover]=\"activeHover()\"\n    (activeHoverChange)=\"onActiveHoverChange($event)\"\n    (selectedValueChange)=\"emitSelectedValue($event)\"\n    (focusedDateChange)=\"emitActiveDate($event!)\"\n    (keydown)=\"calendarBodyKeyDown($event)\"\n  >\n  </tbody>\n</table>\n<div class=\"footer pt-2 ps-8 pe-8\">\n  <button\n    type=\"button\"\n    class=\"today-button btn btn-tertiary flex-fill\"\n    [disabled]=\"isTodayButtonDisabled()\"\n    (click)=\"goToToday()\"\n  >\n    {{ todayLabel() ?? 'Today' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: SiCalendarBodyComponent, selector: "[si-calendar-body]", inputs: ["focusedDate", "startDate", "endDate", "rows", "rowLabels", "rowLabelCssClasses", "enableRangeSelection", "previewRange", "activeHover", "compareAdapter"], outputs: ["focusedDateChange", "activeHoverChange", "selectedValueChange"], exportAs: ["siCalendarBody"] }, { kind: "component", type: SiCalendarDirectionButtonComponent, selector: "si-calendar-direction-button", inputs: ["ariaLabel", "disabled", "direction"], outputs: ["clicked"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiDaySelectionComponent, isStandalone: true, selector: "si-day-selection", inputs: { hideWeekNumbers: { classPropertyName: "hideWeekNumbers", publicName: "hideWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, weekStartDay: { classPropertyName: "weekStartDay", publicName: "weekStartDay", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekLabel: { classPropertyName: "calendarWeekLabel", publicName: "calendarWeekLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeMonthChange: "activeMonthChange", viewChange: "viewChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel() | translate\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setMonthOffset(-1)\"\n  />\n  <div class=\"flex-fill\">\n    <button\n      type=\"button\"\n      class=\"open-month-view flex-fill text-end px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('month')\"\n    >\n      {{ focusedDate() | date: 'MMMM' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"open-year-view flex-fill text-start px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('year')\"\n    >\n      {{ focusedDate() | date: 'yyyy' }}\n    </button>\n  </div>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel() | translate\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setMonthOffset(1)\"\n  />\n</div>\n<table class=\"px-9 mt-6\" role=\"grid\">\n  <thead class=\"si-calendar-table-header\">\n    <tr>\n      @if (!hideWeekNumbers()) {\n        <th scope=\"col\" class=\"week-num\">\n          <span class=\"visually-hidden\">{{ calendarWeekLabel() | translate }}</span>\n        </th>\n      }\n      @for (day of days(); track $index) {\n        <th scope=\"col\">\n          <span class=\"si-hidden-xs si-hidden-sm\">{{ day }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody\n    si-calendar-body\n    rowLabelCssClasses=\"week-num\"\n    [focusedDate]=\"focusedDate()\"\n    [compareAdapter]=\"compareAdapter\"\n    [startDate]=\"startDate()\"\n    [endDate]=\"endDate()\"\n    [enableRangeSelection]=\"isRangeSelection()\"\n    [previewRange]=\"previewRange()\"\n    [rows]=\"weeks()\"\n    [rowLabels]=\"hideWeekNumbers() ? undefined : weekNumbers()\"\n    [activeHover]=\"activeHover()\"\n    (activeHoverChange)=\"onActiveHoverChange($event)\"\n    (selectedValueChange)=\"emitSelectedValue($event)\"\n    (focusedDateChange)=\"emitActiveDate($event!)\"\n    (keydown)=\"calendarBodyKeyDown($event)\"\n  >\n  </tbody>\n</table>\n<div class=\"footer pt-2 ps-8 pe-8\">\n  <button\n    type=\"button\"\n    class=\"today-button btn btn-tertiary flex-fill\"\n    [disabled]=\"isTodayButtonDisabled()\"\n    (click)=\"goToToday()\"\n  >\n    {{ today() | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: SiCalendarBodyComponent, selector: "[si-calendar-body]", inputs: ["focusedDate", "startDate", "endDate", "rows", "rowLabels", "rowLabelCssClasses", "enableRangeSelection", "previewRange", "activeHover", "compareAdapter"], outputs: ["focusedDateChange", "activeHoverChange", "selectedValueChange"], exportAs: ["siCalendarBody"] }, { kind: "component", type: SiCalendarDirectionButtonComponent, selector: "si-calendar-direction-button", inputs: ["ariaLabel", "disabled", "direction"], outputs: ["clicked"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDaySelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-day-selection', imports: [DatePipe, SiCalendarBodyComponent, SiCalendarDirectionButtonComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel() | translate\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setMonthOffset(-1)\"\n  />\n  <div class=\"flex-fill\">\n    <button\n      type=\"button\"\n      class=\"open-month-view flex-fill text-end px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('month')\"\n    >\n      {{ focusedDate() | date: 'MMMM' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"open-year-view flex-fill text-start px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('year')\"\n    >\n      {{ focusedDate() | date: 'yyyy' }}\n    </button>\n  </div>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel() | translate\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setMonthOffset(1)\"\n  />\n</div>\n<table class=\"px-9 mt-6\" role=\"grid\">\n  <thead class=\"si-calendar-table-header\">\n    <tr>\n      @if (!hideWeekNumbers()) {\n        <th scope=\"col\" class=\"week-num\">\n          <span class=\"visually-hidden\">{{ calendarWeekLabel() | translate }}</span>\n        </th>\n      }\n      @for (day of days(); track $index) {\n        <th scope=\"col\">\n          <span class=\"si-hidden-xs si-hidden-sm\">{{ day }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody\n    si-calendar-body\n    rowLabelCssClasses=\"week-num\"\n    [focusedDate]=\"focusedDate()\"\n    [compareAdapter]=\"compareAdapter\"\n    [startDate]=\"startDate()\"\n    [endDate]=\"endDate()\"\n    [enableRangeSelection]=\"isRangeSelection()\"\n    [previewRange]=\"previewRange()\"\n    [rows]=\"weeks()\"\n    [rowLabels]=\"hideWeekNumbers() ? undefined : weekNumbers()\"\n    [activeHover]=\"activeHover()\"\n    (activeHoverChange)=\"onActiveHoverChange($event)\"\n    (selectedValueChange)=\"emitSelectedValue($event)\"\n    (focusedDateChange)=\"emitActiveDate($event!)\"\n    (keydown)=\"calendarBodyKeyDown($event)\"\n  >\n  </tbody>\n</table>\n<div class=\"footer pt-2 ps-8 pe-8\">\n  <button\n    type=\"button\"\n    class=\"today-button btn btn-tertiary flex-fill\"\n    [disabled]=\"isTodayButtonDisabled()\"\n    (click)=\"goToToday()\"\n  >\n    {{ todayLabel() ?? 'Today' | translate }}\n  </button>\n</div>\n" }]
+            args: [{ selector: 'si-day-selection', imports: [DatePipe, SiCalendarBodyComponent, SiCalendarDirectionButtonComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel() | translate\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setMonthOffset(-1)\"\n  />\n  <div class=\"flex-fill\">\n    <button\n      type=\"button\"\n      class=\"open-month-view flex-fill text-end px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('month')\"\n    >\n      {{ focusedDate() | date: 'MMMM' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"open-year-view flex-fill text-start px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('year')\"\n    >\n      {{ focusedDate() | date: 'yyyy' }}\n    </button>\n  </div>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel() | translate\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setMonthOffset(1)\"\n  />\n</div>\n<table class=\"px-9 mt-6\" role=\"grid\">\n  <thead class=\"si-calendar-table-header\">\n    <tr>\n      @if (!hideWeekNumbers()) {\n        <th scope=\"col\" class=\"week-num\">\n          <span class=\"visually-hidden\">{{ calendarWeekLabel() | translate }}</span>\n        </th>\n      }\n      @for (day of days(); track $index) {\n        <th scope=\"col\">\n          <span class=\"si-hidden-xs si-hidden-sm\">{{ day }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody\n    si-calendar-body\n    rowLabelCssClasses=\"week-num\"\n    [focusedDate]=\"focusedDate()\"\n    [compareAdapter]=\"compareAdapter\"\n    [startDate]=\"startDate()\"\n    [endDate]=\"endDate()\"\n    [enableRangeSelection]=\"isRangeSelection()\"\n    [previewRange]=\"previewRange()\"\n    [rows]=\"weeks()\"\n    [rowLabels]=\"hideWeekNumbers() ? undefined : weekNumbers()\"\n    [activeHover]=\"activeHover()\"\n    (activeHoverChange)=\"onActiveHoverChange($event)\"\n    (selectedValueChange)=\"emitSelectedValue($event)\"\n    (focusedDateChange)=\"emitActiveDate($event!)\"\n    (keydown)=\"calendarBodyKeyDown($event)\"\n  >\n  </tbody>\n</table>\n<div class=\"footer pt-2 ps-8 pe-8\">\n  <button\n    type=\"button\"\n    class=\"today-button btn btn-tertiary flex-fill\"\n    [disabled]=\"isTodayButtonDisabled()\"\n    (click)=\"goToToday()\"\n  >\n    {{ today() | translate }}\n  </button>\n</div>\n" }]
         }] });
 
 /**