@besaitech/ng-design-system 0.0.36 → 0.0.37

package/fesm2022/besaitech-ng-design-system.mjs

@@ -1736,6 +1736,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 function startOfDay(d) {
     return new Date(d.getFullYear(), d.getMonth(), d.getDate());
 }
+/** Zero-pad a number to two digits (e.g. 9 → "09"). */
+function pad2(n) {
+    return String(n).padStart(2, '0');
+}
+/** Format a date's time-of-day as HH:mm (24h, local time). */
+function formatHhMm(d) {
+    return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
 function startOfMonth(d) {
     return new Date(d.getFullYear(), d.getMonth(), 1);
 }
@@ -1794,6 +1802,18 @@ class SdsCalendar {
     firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
     locale = input('fr-FR', ...(ngDevMode ? [{ debugName: "locale" }] : []));
     showActions = input(true, ...(ngDevMode ? [{ debugName: "showActions" }] : []));
+    /** When true, a time editor (HH:mm, 24h) is shown and the value keeps its time-of-day. */
+    showTime = input(false, ...(ngDevMode ? [{ debugName: "showTime", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** When true, a "done" action is shown (used by the overlay picker to close the panel). */
+    showDone = input(false, ...(ngDevMode ? [{ debugName: "showDone", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Visible label of the time editor. Translate it in the consuming app. */
+    timeLabel = input('Heure', ...(ngDevMode ? [{ debugName: "timeLabel" }] : []));
+    /** Accessible name of the hours field (it is a bare numeric input). */
+    hoursLabel = input('Heures', ...(ngDevMode ? [{ debugName: "hoursLabel" }] : []));
+    /** Accessible name of the minutes field. */
+    minutesLabel = input('Minutes', ...(ngDevMode ? [{ debugName: "minutesLabel" }] : []));
+    /** Visible text of the "done" action (shown when {@link showDone} is true). */
+    doneLabel = input('Terminé', ...(ngDevMode ? [{ debugName: "doneLabel" }] : []));
     /**
      * Accessible name for the calendar container. French default so existing consumers are unchanged,
      * but an app serving more than one language MUST translate it.
@@ -1816,6 +1836,8 @@ class SdsCalendar {
     clearActionLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearActionLabel" }] : []));
     /** Emitted when a concrete date is picked (day click or "Aujourd'hui"). */
     dateSelect = output();
+    /** Emitted when the "done" action is used (see {@link showDone}). */
+    done = output();
     view = signal('day', ...(ngDevMode ? [{ debugName: "view" }] : []));
     viewDate = signal(startOfMonth(new Date()), ...(ngDevMode ? [{ debugName: "viewDate" }] : []));
     focusedDate = signal(startOfDay(new Date()), ...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
@@ -1835,6 +1857,9 @@ class SdsCalendar {
     navBtn = 'inline-flex h-8 w-8 items-center justify-center rounded-control text-ink-soft hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500';
     titleBtn = 'rounded-control px-2 py-1 capitalize hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500';
     actionBtn = 'rounded-control px-2 py-1 text-xs font-medium text-brand-700 hover:bg-brand-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-40';
+    doneBtn = 'rounded-control bg-brand-600 px-3 py-1 text-xs font-semibold text-white hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500';
+    timeInput = 'w-8 bg-transparent py-1 text-center text-sm text-ink outline-none disabled:cursor-not-allowed disabled:opacity-40';
+    stepBtn = 'flex h-3.5 w-5 items-center justify-center text-ink-faint transition-colors hover:text-ink focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-30';
     // --- labels ---
     monthLong = computed(() => new Intl.DateTimeFormat(this.locale(), { month: 'long' }).format(this.viewDate()), ...(ngDevMode ? [{ debugName: "monthLong" }] : []));
     yearLabel = computed(() => this.viewDate().getFullYear(), ...(ngDevMode ? [{ debugName: "yearLabel" }] : []));
@@ -1931,12 +1956,24 @@ class SdsCalendar {
     selectDay(d) {
         if (isOutOfRange(d, this.min(), this.max()))
             return;
-        const day = startOfDay(d);
+        // showTime keeps the current time-of-day (or 00:00 when nothing was set yet); otherwise midnight.
+        const day = this.applyTime(startOfDay(d));
         this.value.set(day);
         this.viewDate.set(startOfMonth(day));
-        this.focusedDate.set(day);
+        this.focusedDate.set(startOfDay(day));
         this.dateSelect.emit(day);
     }
+    /** Carry the previously-selected time-of-day onto a freshly-picked day (only when showTime). */
+    applyTime(day) {
+        if (!this.showTime())
+            return day;
+        const prev = this.value();
+        if (!prev)
+            return day; // no prior time → keep 00:00
+        const d = new Date(day);
+        d.setHours(prev.getHours(), prev.getMinutes(), 0, 0);
+        return d;
+    }
     selectMonth(m) {
         this.viewDate.set(new Date(this.viewDate().getFullYear(), m, 1));
         this.view.set('day');
@@ -1952,6 +1989,55 @@ class SdsCalendar {
     clear() {
         this.value.set(null);
     }
+    // --- time editor (only rendered when showTime) ---
+    hoursText = computed(() => {
+        const v = this.value();
+        return v ? pad2(v.getHours()) : '';
+    }, ...(ngDevMode ? [{ debugName: "hoursText" }] : []));
+    minutesText = computed(() => {
+        const v = this.value();
+        return v ? pad2(v.getMinutes()) : '';
+    }, ...(ngDevMode ? [{ debugName: "minutesText" }] : []));
+    setHours(raw) {
+        const v = this.value();
+        if (!v)
+            return;
+        const n = parseInt(raw, 10);
+        if (Number.isNaN(n))
+            return;
+        const d = new Date(v);
+        d.setHours(Math.min(23, Math.max(0, n)));
+        this.value.set(d);
+    }
+    setMinutes(raw) {
+        const v = this.value();
+        if (!v)
+            return;
+        const n = parseInt(raw, 10);
+        if (Number.isNaN(n))
+            return;
+        const d = new Date(v);
+        d.setMinutes(Math.min(59, Math.max(0, n)));
+        this.value.set(d);
+    }
+    /** Wrap hours within 0–23; never carries into the day. */
+    stepHours(delta) {
+        const v = this.value();
+        if (!v)
+            return;
+        const d = new Date(v);
+        d.setHours((d.getHours() + delta + 24) % 24);
+        this.value.set(d);
+    }
+    /** Wrap minutes within 0–59; never carries into the hour. */
+    stepMinutes(delta) {
+        const v = this.value();
+        if (!v)
+            return;
+        const d = new Date(v);
+        d.setMinutes((d.getMinutes() + delta + 60) % 60);
+        this.value.set(d);
+    }
     // --- keyboard (day grid) ---
     onGridKeydown(e) {
         let f = this.focusedDate();
@@ -2047,7 +2133,7 @@ class SdsCalendar {
         return cls;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsCalendar, isStandalone: true, selector: "sds-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, calendarLabel: { classPropertyName: "calendarLabel", publicName: "calendarLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, todayActionLabel: { classPropertyName: "todayActionLabel", publicName: "todayActionLabel", isSignal: true, isRequired: false, transformFunction: null }, clearActionLabel: { classPropertyName: "clearActionLabel", publicName: "clearActionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", dateSelect: "dateSelect" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsCalendar, isStandalone: true, selector: "sds-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, showDone: { classPropertyName: "showDone", publicName: "showDone", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null }, hoursLabel: { classPropertyName: "hoursLabel", publicName: "hoursLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesLabel: { classPropertyName: "minutesLabel", publicName: "minutesLabel", isSignal: true, isRequired: false, transformFunction: null }, doneLabel: { classPropertyName: "doneLabel", publicName: "doneLabel", isSignal: true, isRequired: false, transformFunction: null }, calendarLabel: { classPropertyName: "calendarLabel", publicName: "calendarLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, todayActionLabel: { classPropertyName: "todayActionLabel", publicName: "todayActionLabel", isSignal: true, isRequired: false, transformFunction: null }, clearActionLabel: { classPropertyName: "clearActionLabel", publicName: "clearActionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", dateSelect: "dateSelect", done: "done" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <div
       class="w-[20rem] select-none rounded-card border border-border bg-surface p-3 shadow-lg"
       role="group"
@@ -2155,18 +2241,115 @@ class SdsCalendar {
         </div>
       }
 
+      <!-- Time editor -->
+      @if (showTime()) {
+        <div class="mt-2 flex items-center gap-2 border-t border-border pt-2">
+          <span class="text-xs font-medium text-ink-soft">{{ timeLabel() }}</span>
+          <div class="ml-auto inline-flex items-center gap-1.5">
+            <div class="inline-flex items-center rounded-control border border-border bg-white">
+              <input
+                type="text"
+                inputmode="numeric"
+                maxlength="2"
+                [value]="hoursText()"
+                [disabled]="!value()"
+                [attr.aria-label]="hoursLabel()"
+                (change)="setHours($any($event.target).value)"
+                (blur)="$any($event.target).value = hoursText()"
+                (keydown.arrowup)="stepHours(1); $event.preventDefault()"
+                (keydown.arrowdown)="stepHours(-1); $event.preventDefault()"
+                [class]="timeInput"
+              />
+              <div class="flex flex-col border-l border-border">
+                <button
+                  type="button"
+                  tabindex="-1"
+                  aria-hidden="true"
+                  [disabled]="!value()"
+                  [class]="stepBtn"
+                  (click)="stepHours(1)"
+                >
+                  <span class="inline-flex rotate-180"
+                    ><sds-icon name="chevron-down" [size]="11"
+                  /></span>
+                </button>
+                <button
+                  type="button"
+                  tabindex="-1"
+                  aria-hidden="true"
+                  [disabled]="!value()"
+                  [class]="stepBtn"
+                  (click)="stepHours(-1)"
+                >
+                  <sds-icon name="chevron-down" [size]="11" />
+                </button>
+              </div>
+            </div>
+            <span class="text-sm font-semibold text-ink-soft">:</span>
+            <div class="inline-flex items-center rounded-control border border-border bg-white">
+              <input
+                type="text"
+                inputmode="numeric"
+                maxlength="2"
+                [value]="minutesText()"
+                [disabled]="!value()"
+                [attr.aria-label]="minutesLabel()"
+                (change)="setMinutes($any($event.target).value)"
+                (blur)="$any($event.target).value = minutesText()"
+                (keydown.arrowup)="stepMinutes(1); $event.preventDefault()"
+                (keydown.arrowdown)="stepMinutes(-1); $event.preventDefault()"
+                [class]="timeInput"
+              />
+              <div class="flex flex-col border-l border-border">
+                <button
+                  type="button"
+                  tabindex="-1"
+                  aria-hidden="true"
+                  [disabled]="!value()"
+                  [class]="stepBtn"
+                  (click)="stepMinutes(1)"
+                >
+                  <span class="inline-flex rotate-180"
+                    ><sds-icon name="chevron-down" [size]="11"
+                  /></span>
+                </button>
+                <button
+                  type="button"
+                  tabindex="-1"
+                  aria-hidden="true"
+                  [disabled]="!value()"
+                  [class]="stepBtn"
+                  (click)="stepMinutes(-1)"
+                >
+                  <sds-icon name="chevron-down" [size]="11" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+
       <!-- Actions -->
-      @if (showActions()) {
+      @if (showActions() || showDone()) {
         <div class="mt-2 flex items-center justify-between border-t border-border pt-2">
-          <button
-            type="button"
-            [class]="actionBtn"
-            [disabled]="todayDisabled()"
-            (click)="goToday()"
-          >
-            {{ todayActionLabel() }}
-          </button>
-          <button type="button" [class]="actionBtn" (click)="clear()">{{ clearActionLabel() }}</button>
+          <div class="flex items-center gap-1">
+            @if (showActions()) {
+              <button
+                type="button"
+                [class]="actionBtn"
+                [disabled]="todayDisabled()"
+                (click)="goToday()"
+              >
+                {{ todayActionLabel() }}
+              </button>
+              <button type="button" [class]="actionBtn" (click)="clear()">
+                {{ clearActionLabel() }}
+              </button>
+            }
+          </div>
+          @if (showDone()) {
+            <button type="button" [class]="doneBtn" (click)="done.emit()">{{ doneLabel() }}</button>
+          }
         </div>
       }
     </div>
@@ -2287,24 +2470,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         </div>
       }
 
+      <!-- Time editor -->
+      @if (showTime()) {
+        <div class="mt-2 flex items-center gap-2 border-t border-border pt-2">
+          <span class="text-xs font-medium text-ink-soft">{{ timeLabel() }}</span>
+          <div class="ml-auto inline-flex items-center gap-1.5">
+            <div class="inline-flex items-center rounded-control border border-border bg-white">
+              <input
+                type="text"
+                inputmode="numeric"
+                maxlength="2"
+                [value]="hoursText()"
+                [disabled]="!value()"
+                [attr.aria-label]="hoursLabel()"
+                (change)="setHours($any($event.target).value)"
+                (blur)="$any($event.target).value = hoursText()"
+                (keydown.arrowup)="stepHours(1); $event.preventDefault()"
+                (keydown.arrowdown)="stepHours(-1); $event.preventDefault()"
+                [class]="timeInput"
+              />
+              <div class="flex flex-col border-l border-border">
+                <button
+                  type="button"
+                  tabindex="-1"
+                  aria-hidden="true"
+                  [disabled]="!value()"
+                  [class]="stepBtn"
+                  (click)="stepHours(1)"
+                >
+                  <span class="inline-flex rotate-180"
+                    ><sds-icon name="chevron-down" [size]="11"
+                  /></span>
+                </button>
+                <button
+                  type="button"
+                  tabindex="-1"
+                  aria-hidden="true"
+                  [disabled]="!value()"
+                  [class]="stepBtn"
+                  (click)="stepHours(-1)"
+                >
+                  <sds-icon name="chevron-down" [size]="11" />
+                </button>
+              </div>
+            </div>
+            <span class="text-sm font-semibold text-ink-soft">:</span>
+            <div class="inline-flex items-center rounded-control border border-border bg-white">
+              <input
+                type="text"
+                inputmode="numeric"
+                maxlength="2"
+                [value]="minutesText()"
+                [disabled]="!value()"
+                [attr.aria-label]="minutesLabel()"
+                (change)="setMinutes($any($event.target).value)"
+                (blur)="$any($event.target).value = minutesText()"
+                (keydown.arrowup)="stepMinutes(1); $event.preventDefault()"
+                (keydown.arrowdown)="stepMinutes(-1); $event.preventDefault()"
+                [class]="timeInput"
+              />
+              <div class="flex flex-col border-l border-border">
+                <button
+                  type="button"
+                  tabindex="-1"
+                  aria-hidden="true"
+                  [disabled]="!value()"
+                  [class]="stepBtn"
+                  (click)="stepMinutes(1)"
+                >
+                  <span class="inline-flex rotate-180"
+                    ><sds-icon name="chevron-down" [size]="11"
+                  /></span>
+                </button>
+                <button
+                  type="button"
+                  tabindex="-1"
+                  aria-hidden="true"
+                  [disabled]="!value()"
+                  [class]="stepBtn"
+                  (click)="stepMinutes(-1)"
+                >
+                  <sds-icon name="chevron-down" [size]="11" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+
       <!-- Actions -->
-      @if (showActions()) {
+      @if (showActions() || showDone()) {
         <div class="mt-2 flex items-center justify-between border-t border-border pt-2">
-          <button
-            type="button"
-            [class]="actionBtn"
-            [disabled]="todayDisabled()"
-            (click)="goToday()"
-          >
-            {{ todayActionLabel() }}
-          </button>
-          <button type="button" [class]="actionBtn" (click)="clear()">{{ clearActionLabel() }}</button>
+          <div class="flex items-center gap-1">
+            @if (showActions()) {
+              <button
+                type="button"
+                [class]="actionBtn"
+                [disabled]="todayDisabled()"
+                (click)="goToday()"
+              >
+                {{ todayActionLabel() }}
+              </button>
+              <button type="button" [class]="actionBtn" (click)="clear()">
+                {{ clearActionLabel() }}
+              </button>
+            }
+          </div>
+          @if (showDone()) {
+            <button type="button" [class]="doneBtn" (click)="done.emit()">{{ doneLabel() }}</button>
+          }
         </div>
       }
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], dateSelect: [{ type: i0.Output, args: ["dateSelect"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], showDone: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDone", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], dateSelect: [{ type: i0.Output, args: ["dateSelect"] }], done: [{ type: i0.Output, args: ["done"] }] } });
 
 const SIZES$5 = {
     sm: 'h-9 text-sm',
@@ -2337,8 +2617,22 @@ class SdsDatePicker {
     clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     showActions = input(true, ...(ngDevMode ? [{ debugName: "showActions", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Custom display formatter (default dd/MM/yyyy). */
+    /**
+     * When true, the calendar shows a time editor (HH:mm, 24h), the value keeps its time-of-day, and
+     * the field displays date + time. The overlay stays open on day-select so the time can be set;
+     * a "done" action (and click-away / Escape) closes it.
+     */
+    showTime = input(false, ...(ngDevMode ? [{ debugName: "showTime", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Custom display formatter for the DATE part (default dd/MM/yyyy). The time is appended as HH:mm. */
     format = input(formatDdMmYyyy, ...(ngDevMode ? [{ debugName: "format" }] : []));
+    /** Visible label of the time editor (forwarded to the calendar). See {@link showTime}. */
+    timeLabel = input('Heure', ...(ngDevMode ? [{ debugName: "timeLabel" }] : []));
+    /** Accessible name of the hours field (forwarded to the calendar). */
+    hoursLabel = input('Heures', ...(ngDevMode ? [{ debugName: "hoursLabel" }] : []));
+    /** Accessible name of the minutes field (forwarded to the calendar). */
+    minutesLabel = input('Minutes', ...(ngDevMode ? [{ debugName: "minutesLabel" }] : []));
+    /** Visible text of the calendar's "done" action, shown in the overlay when {@link showTime}. */
+    doneLabel = input('Terminé', ...(ngDevMode ? [{ debugName: "doneLabel" }] : []));
     /**
      * Accessible name for the clear button. French default so existing consumers are unchanged, but an
      * app serving more than one language MUST translate it — it is an icon-only control, so this string
@@ -2374,7 +2668,9 @@ class SdsDatePicker {
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     displayValue = computed(() => {
         const v = this.value();
-        return v ? this.format()(v) : '';
+        if (!v)
+            return '';
+        return this.showTime() ? `${this.format()(v)} ${formatHhMm(v)}` : this.format()(v);
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
     /** Whether the clear button is shown (affects the field's right padding). */
     showClear = computed(() => this.clearable() && !!this.value() && !this.isDisabled(), ...(ngDevMode ? [{ debugName: "showClear" }] : []));
@@ -2426,6 +2722,57 @@ class SdsDatePicker {
     onCalendarValue(v) {
         this.setValue(v);
     }
+    /**
+     * A day was clicked in the overlay. Without a time editor, a day click is the whole selection, so
+     * close. With showTime, the user still needs to set the time, so keep the panel open (they close it
+     * with the "done" action, a click away, or Escape).
+     */
+    onDateSelect() {
+        if (!this.showTime())
+            this.close(true);
+    }
+    /**
+     * Escape closes the panel and consumes the event while the panel is open, so an ancestor modal does
+     * not also dismiss on the same keystroke (mirrors sds-select). When the panel is already closed, the
+     * event passes through so Escape can dismiss whatever contains the field.
+     */
+    onEscape(event) {
+        if (!this.open())
+            return;
+        event.preventDefault();
+        this.close(true);
+    }
+    /** The readonly trigger is not a button, so open the overlay on Enter / Space / ArrowDown too. */
+    onTriggerKeydown(event) {
+        event.preventDefault(); // stop Space/ArrowDown scrolling and Enter submitting an enclosing form
+        if (!this.isDisabled() && !this.open())
+            this.openPanel();
+    }
+    /**
+     * Self-contained Tab trap for the overlay. The panel is relocated to document.body, so it sits
+     * outside any ancestor modal's focus trap; without this, tabbing off the last control would land on
+     * the page behind the dialog. Keeps Tab / Shift+Tab cycling within the panel's own focusables.
+     */
+    onPanelKeydown(event) {
+        if (event.key !== 'Tab' || !this.panelEl)
+            return;
+        const sel = 'a[href],button:not([disabled]):not([tabindex="-1"]),input:not([disabled]),' +
+            '[tabindex]:not([tabindex="-1"])';
+        const items = Array.from(this.panelEl.querySelectorAll(sel)).filter((el) => el.offsetParent !== null);
+        if (items.length === 0)
+            return;
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && (active === first || !this.panelEl.contains(active))) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
     onDocumentClick(event) {
         if (!this.open())
             return;
@@ -2511,7 +2858,7 @@ class SdsDatePicker {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsDatePicker, isStandalone: true, selector: "sds-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, openCalendarLabel: { classPropertyName: "openCalendarLabel", publicName: "openCalendarLabel", isSignal: true, isRequired: false, transformFunction: null }, closeCalendarLabel: { classPropertyName: "closeCalendarLabel", publicName: "closeCalendarLabel", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null }, calendarLabel: { classPropertyName: "calendarLabel", publicName: "calendarLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, todayActionLabel: { classPropertyName: "todayActionLabel", publicName: "todayActionLabel", isSignal: true, isRequired: false, transformFunction: null }, clearActionLabel: { classPropertyName: "clearActionLabel", publicName: "clearActionLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "close(true)" }, classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsDatePicker, isStandalone: true, selector: "sds-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null }, hoursLabel: { classPropertyName: "hoursLabel", publicName: "hoursLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesLabel: { classPropertyName: "minutesLabel", publicName: "minutesLabel", isSignal: true, isRequired: false, transformFunction: null }, doneLabel: { classPropertyName: "doneLabel", publicName: "doneLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, openCalendarLabel: { classPropertyName: "openCalendarLabel", publicName: "openCalendarLabel", isSignal: true, isRequired: false, transformFunction: null }, closeCalendarLabel: { classPropertyName: "closeCalendarLabel", publicName: "closeCalendarLabel", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null }, calendarLabel: { classPropertyName: "calendarLabel", publicName: "calendarLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, todayActionLabel: { classPropertyName: "todayActionLabel", publicName: "todayActionLabel", isSignal: true, isRequired: false, transformFunction: null }, clearActionLabel: { classPropertyName: "clearActionLabel", publicName: "clearActionLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsDatePicker), multi: true },
         ], viewQueries: [{ propertyName: "calendar", first: true, predicate: SdsCalendar, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
@@ -2528,6 +2875,10 @@ class SdsDatePicker {
         [firstDayOfWeek]="firstDayOfWeek()"
         [locale]="locale()"
         [showActions]="showActions()"
+        [showTime]="showTime()"
+        [timeLabel]="timeLabel()"
+        [hoursLabel]="hoursLabel()"
+        [minutesLabel]="minutesLabel()"
         [calendarLabel]="calendarLabel()"
         [previousLabel]="previousLabel()"
         [nextLabel]="nextLabel()"
@@ -2553,6 +2904,9 @@ class SdsDatePicker {
             [attr.aria-haspopup]="'dialog'"
             [attr.aria-expanded]="open()"
             [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+            (keydown.enter)="onTriggerKeydown($event)"
+            (keydown.space)="onTriggerKeydown($event)"
+            (keydown.arrowdown)="onTriggerKeydown($event)"
             class="w-full cursor-pointer bg-transparent pl-3.5 text-ink outline-none placeholder:text-ink-faint disabled:cursor-not-allowed"
             [class.pr-20]="showClear()"
             [class.pr-11]="!showClear()"
@@ -2589,7 +2943,8 @@ class SdsDatePicker {
             role="dialog"
             aria-modal="false"
             [attr.aria-label]="panelLabel()"
-            (keydown.escape)="close(true)"
+            (keydown.escape)="onEscape($event)"
+            (keydown)="onPanelKeydown($event)"
           >
             <sds-calendar
               [value]="value()"
@@ -2598,13 +2953,20 @@ class SdsDatePicker {
               [firstDayOfWeek]="firstDayOfWeek()"
               [locale]="locale()"
               [showActions]="showActions()"
+              [showTime]="showTime()"
+              [showDone]="showTime()"
+              [timeLabel]="timeLabel()"
+              [hoursLabel]="hoursLabel()"
+              [minutesLabel]="minutesLabel()"
+              [doneLabel]="doneLabel()"
               [calendarLabel]="calendarLabel()"
               [previousLabel]="previousLabel()"
               [nextLabel]="nextLabel()"
               [todayActionLabel]="todayActionLabel()"
               [clearActionLabel]="clearActionLabel()"
               (valueChange)="onCalendarValue($event)"
-              (dateSelect)="close(true)"
+              (dateSelect)="onDateSelect()"
+              (done)="close(true)"
             />
           </div>
         }
@@ -2617,7 +2979,7 @@ class SdsDatePicker {
     @if (error()) {
       <p class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsCalendar, selector: "sds-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "locale", "showActions", "calendarLabel", "previousLabel", "nextLabel", "todayActionLabel", "clearActionLabel"], outputs: ["valueChange", "dateSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsCalendar, selector: "sds-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "locale", "showActions", "showTime", "showDone", "timeLabel", "hoursLabel", "minutesLabel", "doneLabel", "calendarLabel", "previousLabel", "nextLabel", "todayActionLabel", "clearActionLabel"], outputs: ["valueChange", "dateSelect", "done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDatePicker, decorators: [{
             type: Component,
@@ -2631,7 +2993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     host: {
                         class: 'block',
                         '(document:click)': 'onDocumentClick($event)',
-                        '(keydown.escape)': 'close(true)',
+                        '(keydown.escape)': 'onEscape($event)',
                     },
                     template: `
     @if (label()) {
@@ -2648,6 +3010,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [firstDayOfWeek]="firstDayOfWeek()"
         [locale]="locale()"
         [showActions]="showActions()"
+        [showTime]="showTime()"
+        [timeLabel]="timeLabel()"
+        [hoursLabel]="hoursLabel()"
+        [minutesLabel]="minutesLabel()"
         [calendarLabel]="calendarLabel()"
         [previousLabel]="previousLabel()"
         [nextLabel]="nextLabel()"
@@ -2673,6 +3039,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             [attr.aria-haspopup]="'dialog'"
             [attr.aria-expanded]="open()"
             [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+            (keydown.enter)="onTriggerKeydown($event)"
+            (keydown.space)="onTriggerKeydown($event)"
+            (keydown.arrowdown)="onTriggerKeydown($event)"
             class="w-full cursor-pointer bg-transparent pl-3.5 text-ink outline-none placeholder:text-ink-faint disabled:cursor-not-allowed"
             [class.pr-20]="showClear()"
             [class.pr-11]="!showClear()"
@@ -2709,7 +3078,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             role="dialog"
             aria-modal="false"
             [attr.aria-label]="panelLabel()"
-            (keydown.escape)="close(true)"
+            (keydown.escape)="onEscape($event)"
+            (keydown)="onPanelKeydown($event)"
           >
             <sds-calendar
               [value]="value()"
@@ -2718,13 +3088,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               [firstDayOfWeek]="firstDayOfWeek()"
               [locale]="locale()"
               [showActions]="showActions()"
+              [showTime]="showTime()"
+              [showDone]="showTime()"
+              [timeLabel]="timeLabel()"
+              [hoursLabel]="hoursLabel()"
+              [minutesLabel]="minutesLabel()"
+              [doneLabel]="doneLabel()"
               [calendarLabel]="calendarLabel()"
               [previousLabel]="previousLabel()"
               [nextLabel]="nextLabel()"
               [todayActionLabel]="todayActionLabel()"
               [clearActionLabel]="clearActionLabel()"
               (valueChange)="onCalendarValue($event)"
-              (dateSelect)="close(true)"
+              (dateSelect)="onDateSelect()"
+              (done)="close(true)"
             />
           </div>
         }
@@ -2739,7 +3116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], closeCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCalendarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], closeCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCalendarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 let nextId$6 = 0;
 
 const SIZES$4 = {
@@ -7787,5 +8164,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, isOutOfRange, isSameDay, isoDay, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
+export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map