@besaitech/ng-design-system 0.0.36 → 0.0.37

package/index.d.ts

@@ -495,6 +495,10 @@ declare class SdsCard {
 
 /** Small, dependency-free date helpers (day-granularity, local time). */
 declare function startOfDay(d: Date): Date;
+/** Zero-pad a number to two digits (e.g. 9 → "09"). */
+declare function pad2(n: number): string;
+/** Format a date's time-of-day as HH:mm (24h, local time). */
+declare function formatHhMm(d: Date): string;
 declare function startOfMonth(d: Date): Date;
 declare function addDays(d: Date, n: number): Date;
 declare function addMonths(d: Date, n: number): Date;
@@ -531,6 +535,18 @@ declare class SdsCalendar {
     readonly firstDayOfWeek: _angular_core.InputSignal<0 | 1>;
     readonly locale: _angular_core.InputSignal<string>;
     readonly showActions: _angular_core.InputSignal<boolean>;
+    /** When true, a time editor (HH:mm, 24h) is shown and the value keeps its time-of-day. */
+    readonly showTime: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When true, a "done" action is shown (used by the overlay picker to close the panel). */
+    readonly showDone: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Visible label of the time editor. Translate it in the consuming app. */
+    readonly timeLabel: _angular_core.InputSignal<string>;
+    /** Accessible name of the hours field (it is a bare numeric input). */
+    readonly hoursLabel: _angular_core.InputSignal<string>;
+    /** Accessible name of the minutes field. */
+    readonly minutesLabel: _angular_core.InputSignal<string>;
+    /** Visible text of the "done" action (shown when {@link showDone} is true). */
+    readonly doneLabel: _angular_core.InputSignal<string>;
     /**
      * Accessible name for the calendar container. French default so existing consumers are unchanged,
      * but an app serving more than one language MUST translate it.
@@ -553,6 +569,8 @@ declare class SdsCalendar {
     readonly clearActionLabel: _angular_core.InputSignal<string>;
     /** Emitted when a concrete date is picked (day click or "Aujourd'hui"). */
     readonly dateSelect: _angular_core.OutputEmitterRef<Date>;
+    /** Emitted when the "done" action is used (see {@link showDone}). */
+    readonly done: _angular_core.OutputEmitterRef<void>;
     protected readonly view: _angular_core.WritableSignal<CalView>;
     protected readonly viewDate: _angular_core.WritableSignal<Date>;
     protected readonly focusedDate: _angular_core.WritableSignal<Date>;
@@ -562,6 +580,9 @@ declare class SdsCalendar {
     protected readonly 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";
     protected readonly titleBtn = "rounded-control px-2 py-1 capitalize hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500";
     protected readonly 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";
+    protected readonly 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";
+    protected readonly timeInput = "w-8 bg-transparent py-1 text-center text-sm text-ink outline-none disabled:cursor-not-allowed disabled:opacity-40";
+    protected readonly 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";
     protected readonly monthLong: _angular_core.Signal<string>;
     protected readonly yearLabel: _angular_core.Signal<number>;
     protected readonly decadeStart: _angular_core.Signal<number>;
@@ -583,10 +604,20 @@ declare class SdsCalendar {
     protected prev(): void;
     protected next(): void;
     protected selectDay(d: Date): void;
+    /** Carry the previously-selected time-of-day onto a freshly-picked day (only when showTime). */
+    private applyTime;
     protected selectMonth(m: number): void;
     protected selectYear(y: number): void;
     protected goToday(): void;
     protected clear(): void;
+    protected readonly hoursText: _angular_core.Signal<string>;
+    protected readonly minutesText: _angular_core.Signal<string>;
+    protected setHours(raw: string): void;
+    protected setMinutes(raw: string): void;
+    /** Wrap hours within 0–23; never carries into the day. */
+    protected stepHours(delta: number): void;
+    /** Wrap minutes within 0–59; never carries into the hour. */
+    protected stepMinutes(delta: number): void;
     protected onGridKeydown(e: KeyboardEvent): void;
     /** Move focus to the active day cell (called when the panel opens). */
     focusActiveCell(): void;
@@ -597,7 +628,7 @@ declare class SdsCalendar {
     protected dayClass(cell: DayCell): string;
     protected cellClass(selected: boolean, current: boolean, disabled: boolean): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsCalendar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsCalendar, "sds-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "calendarLabel": { "alias": "calendarLabel"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "todayActionLabel": { "alias": "todayActionLabel"; "required": false; "isSignal": true; }; "clearActionLabel": { "alias": "clearActionLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "dateSelect": "dateSelect"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsCalendar, "sds-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "showDone": { "alias": "showDone"; "required": false; "isSignal": true; }; "timeLabel": { "alias": "timeLabel"; "required": false; "isSignal": true; }; "hoursLabel": { "alias": "hoursLabel"; "required": false; "isSignal": true; }; "minutesLabel": { "alias": "minutesLabel"; "required": false; "isSignal": true; }; "doneLabel": { "alias": "doneLabel"; "required": false; "isSignal": true; }; "calendarLabel": { "alias": "calendarLabel"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "todayActionLabel": { "alias": "todayActionLabel"; "required": false; "isSignal": true; }; "clearActionLabel": { "alias": "clearActionLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "dateSelect": "dateSelect"; "done": "done"; }, never, never, true, never>;
 }
 
 type SdsDatePickerSize = 'sm' | 'md' | 'lg';
@@ -627,8 +658,22 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly showActions: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** 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.
+     */
+    readonly showTime: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Custom display formatter for the DATE part (default dd/MM/yyyy). The time is appended as HH:mm. */
     readonly format: _angular_core.InputSignal<(d: Date) => string>;
+    /** Visible label of the time editor (forwarded to the calendar). See {@link showTime}. */
+    readonly timeLabel: _angular_core.InputSignal<string>;
+    /** Accessible name of the hours field (forwarded to the calendar). */
+    readonly hoursLabel: _angular_core.InputSignal<string>;
+    /** Accessible name of the minutes field (forwarded to the calendar). */
+    readonly minutesLabel: _angular_core.InputSignal<string>;
+    /** Visible text of the calendar's "done" action, shown in the overlay when {@link showTime}. */
+    readonly doneLabel: _angular_core.InputSignal<string>;
     /**
      * 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
@@ -671,6 +716,26 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
     protected close(returnFocus?: boolean): void;
     protected clear(event: Event): void;
     protected onCalendarValue(v: Date | null): void;
+    /**
+     * 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).
+     */
+    protected onDateSelect(): void;
+    /**
+     * 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.
+     */
+    protected onEscape(event: Event): void;
+    /** The readonly trigger is not a button, so open the overlay on Enter / Space / ArrowDown too. */
+    protected onTriggerKeydown(event: Event): void;
+    /**
+     * 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.
+     */
+    protected onPanelKeydown(event: KeyboardEvent): void;
     protected onDocumentClick(event: MouseEvent): void;
     private readonly reflow;
     private listening;
@@ -686,7 +751,7 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsDatePicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsDatePicker, "sds-date-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "openCalendarLabel": { "alias": "openCalendarLabel"; "required": false; "isSignal": true; }; "closeCalendarLabel": { "alias": "closeCalendarLabel"; "required": false; "isSignal": true; }; "panelLabel": { "alias": "panelLabel"; "required": false; "isSignal": true; }; "calendarLabel": { "alias": "calendarLabel"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "todayActionLabel": { "alias": "todayActionLabel"; "required": false; "isSignal": true; }; "clearActionLabel": { "alias": "clearActionLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsDatePicker, "sds-date-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "timeLabel": { "alias": "timeLabel"; "required": false; "isSignal": true; }; "hoursLabel": { "alias": "hoursLabel"; "required": false; "isSignal": true; }; "minutesLabel": { "alias": "minutesLabel"; "required": false; "isSignal": true; }; "doneLabel": { "alias": "doneLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "openCalendarLabel": { "alias": "openCalendarLabel"; "required": false; "isSignal": true; }; "closeCalendarLabel": { "alias": "closeCalendarLabel"; "required": false; "isSignal": true; }; "panelLabel": { "alias": "panelLabel"; "required": false; "isSignal": true; }; "calendarLabel": { "alias": "calendarLabel"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "todayActionLabel": { "alias": "todayActionLabel"; "required": false; "isSignal": true; }; "clearActionLabel": { "alias": "clearActionLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 type SdsSelectSize = 'sm' | 'md' | 'lg';
@@ -1871,5 +1936,5 @@ declare class SdsNavItem {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavItem, "sds-nav-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
 }
 
-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 };
 export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputShape, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize, SdsTopbarAppearance };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"