@orangelogic/design-system 2.111.0 → 2.113.0

package/library/packages/molecules/src/input-date-picker/input-date-picker.d.ts

@@ -0,0 +1,127 @@
+import { default as CxDateCalendar } from '../../../atoms/src/components/date-calendar/date-calendar.ts';
+import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
+import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
+import { default as CxInput } from '../../../atoms/src/components/input/input.ts';
+import { default as CxOption } from '../../../atoms/src/components/option/option.ts';
+import { default as CxPopup } from '../../../atoms/src/components/popup/popup.ts';
+import { default as CxSelect } from '../../../atoms/src/components/select/select.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary A date input field with a calendar picker and an optional time selector.
+ * Renders a label inside the input, a calendar popup, and optional
+ * hour/minute/second selects.
+ *
+ * @event cx-change - Emitted when the user commits a date or changes the time. Read `el.value` for the date and `el.timeValue` for the time.
+ *
+ * @csspart field - The outer wrapper element.
+ * @csspart calendar-panel - The popup panel wrapping the calendar.
+ * @csspart time-row - The row containing the time selects.
+ *
+ * @cssproperty [--input-date-picker-width] - Explicit field width. Overrides date-only and show-time default widths.
+ * @cssproperty [--date-field-width=15rem] - Default width when time selects are hidden.
+ * @cssproperty [--time-select-width=5.75rem] - Width of each time select.
+ */
+export default class CxInputDatePicker extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-date-calendar': typeof CxDateCalendar;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-input': typeof CxInput;
+        'cx-option': typeof CxOption;
+        'cx-popup': typeof CxPopup;
+        'cx-select': typeof CxSelect;
+    };
+    private readonly localize;
+    private readonly dateInputEl;
+    /** Display label for the field. */
+    label: string;
+    /** The name submitted as a name/value pair with form data. */
+    name: string;
+    /**
+     * The associated form element. Accepts a form `id` string or an `HTMLFormElement`.
+     * When set, overrides `closest('form')` lookup.
+     */
+    form: string | HTMLElement | undefined;
+    /** The selected date in YYYY-MM-DD format. Used internally for calendar and event detail. */
+    value: string;
+    /** The selected time in 24-hour `HH:mm:ss` format (e.g. `14:30:00`). Values outside this format are not parsed. */
+    timeValue: string;
+    /** Placeholder for the date input. Defaults to DD-MM-YYYY. */
+    placeholder: string;
+    /** Shows the hour/minute/second time selects below the date row. */
+    showTime: boolean;
+    /** The name submitted as a name/value pair for the time field. */
+    timeName: string;
+    /** Disables all inputs and the calendar picker. */
+    disabled: boolean;
+    /** Makes all inputs read-only. */
+    readonly: boolean;
+    /** Marks the field as required. */
+    required: boolean;
+    /** Minimum selectable date in YYYY-MM-DD format. */
+    min: string;
+    /** Maximum selectable date in YYYY-MM-DD format. */
+    max: string;
+    /**
+     * Custom validation message when the typed date is before `min`.
+     * Falls back to the localized `dateBeforeMin` term when omitted.
+     */
+    maskMinMessage: string;
+    /**
+     * Custom validation message when the typed date is after `max`.
+     * Falls back to the localized `dateAfterMax` term when omitted.
+     */
+    maskMaxMessage: string;
+    /** Controls whether the calendar popup is visible. */
+    private calendarOpen;
+    /** Date shown in the text input formatted as DD-MM-YYYY. */
+    private displayValue;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    runFirstUpdated(): Promise<void>;
+    private readonly dateMaskBlocks;
+    private get datePlaceholder();
+    getForm(): HTMLFormElement | undefined;
+    private get minDate();
+    private get maxDate();
+    /** Sets a custom validation message on the inner date input. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private validateInRange;
+    private emitTimeChange;
+    private get timeParts();
+    private updateTimePart;
+    private renderTimeSelects;
+    private renderHiddenTimeInput;
+    private handleTimePartChange;
+    handleValueChange(): void;
+    handleMinMaxChange(): void;
+    handleAccessStateChange(): void;
+    private resetDateValue;
+    private handleDateInput;
+    private handleDateKeydown;
+    private handleDateChange;
+    private handleDateBlur;
+    private handleShowCalender;
+    private handleCalendarPanelPointerDown;
+    private handleDocumentPointerDown;
+    private handleDocumentKeyDown;
+    private handleClearClick;
+    private handleCalendarDateSelect;
+    private commitFromCalendar;
+    private commitValue;
+    private closeCalendar;
+    private renderCalendarIcon;
+    private renderShowtime;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-input-date-picker': CxInputDatePicker;
+    }
+}

package/library/packages/molecules/src/input-date-picker/input-date-picker.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/molecules/src/input-date-range-picker/input-date-range-picker.d.ts

@@ -0,0 +1,90 @@
+import { default as CxOption } from '../../../atoms/src/components/option/option.ts';
+import { default as CxSelect } from '../../../atoms/src/components/select/select.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { default as CxInputDatePicker } from '../input-date-picker/input-date-picker.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary A date range input composed of two date pickers and an optional preset selector.
+ * Validates that the from date is not after the to date.
+ *
+ * @event cx-change - Emitted when the user commits any range value change. Read `el.fromDate`, `el.toDate`, `el.fromTime`, `el.toTime`, `el.preset` for the updated values.
+ *
+ * @csspart pickers-row - The row containing both date pickers.
+ * @csspart preset-row - The row containing the preset select.
+ *
+ * @cssproperty [--date-range-picker-width] - Explicit component width. Overrides date-only and show-time default widths.
+ * @cssproperty [--date-field-width=15rem] - Default width for each date picker when time selects are hidden.
+ * @cssproperty [--time-select-width=5.75rem] - Width of each child time select.
+ * @cssproperty [--date-range-picker-gap=var(--cx-spacing-small)] - Gap between the from and to date pickers.
+ */
+export default class CxInputDateRangePicker extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-input-date-picker': typeof CxInputDatePicker;
+        'cx-option': typeof CxOption;
+        'cx-select': typeof CxSelect;
+    };
+    private readonly localize;
+    /** Form submission key for the from date. */
+    fromName: string;
+    /** Form submission key for the to date. */
+    toName: string;
+    /** Form submission key for the from time. */
+    fromTimeName: string;
+    /** Form submission key for the to time. */
+    toTimeName: string;
+    /** The from date in YYYY-MM-DD format. */
+    fromDate: string;
+    /** The to date in YYYY-MM-DD format. */
+    toDate: string;
+    /** The from time in 24-hour `HH:mm:ss` format (e.g. `14:30:00`). Values outside this format are not parsed. */
+    fromTime: string;
+    /** The to time in 24-hour `HH:mm:ss` format (e.g. `14:30:00`). Values outside this format are not parsed. */
+    toTime: string;
+    /** The selected preset value. */
+    preset: string;
+    /** Label for the from date picker. */
+    fromLabel: string;
+    /** Label for the to date picker. */
+    toLabel: string;
+    /** Shared placeholder for both child date pickers. */
+    placeholder: string;
+    /** Shows the time selects on both child date pickers. */
+    showTime: boolean;
+    /** Shows the preset selector. */
+    showPreset: boolean;
+    /** Disables all inputs. */
+    disabled: boolean;
+    /** Makes all inputs read-only. */
+    readonly: boolean;
+    /** Marks the range as required — both dates must be filled. */
+    required: boolean;
+    /** Minimum selectable date in YYYY-MM-DD format. */
+    min: string;
+    /** Maximum selectable date in YYYY-MM-DD format. */
+    max: string;
+    /** The associated form target passed to child date pickers. */
+    form: string | HTMLElement | undefined;
+    handleShowTimeChange(): void;
+    handlePresetValueChange(): void;
+    getForm(): HTMLFormElement | undefined;
+    private get isTimeRangeInvalid();
+    private isDateRangePreset;
+    private get nextFromDate();
+    private clearRangeData;
+    private applyPreset;
+    private handlePresetChange;
+    private get resolvedFromLabel();
+    private get resolvedToLabel();
+    private handleFromDateChange;
+    private handleToDateChange;
+    private emitRangeChange;
+    private renderPresets;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-input-date-range-picker': CxInputDateRangePicker;
+    }
+}

package/library/packages/molecules/src/input-date-range-picker/input-date-range-picker.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/molecules/src/timeline/timeline.d.ts

@@ -23,7 +23,6 @@ export default class CxTimeline extends CortexElement {
     };
     private readonly localize;
     private apiSearchAssets;
-    private readonly searchToken;
     private thumbnailRequestVersion;
     private get isInEditMode();
     tabGroup?: CxTabGroup;
@@ -56,6 +55,7 @@ export default class CxTimeline extends CortexElement {
      * Asset transformations applied to the image.
      */
     transformations: Transformation[];
+    siteBuilderToken: string;
     /** Proxy URLs resolved from apiSearchAssets, keyed by item.id. */
     private resolvedThumbnails;
     handleDataChange(): Promise<void>;

package/library/packages/organisms/src/content-builder/components/config-form/config-form-controller.d.ts

@@ -7,7 +7,6 @@ export declare class ConfigFormController implements ReactiveController {
     host: ReactiveControllerHost & CxConfigForm;
     private readonly localize;
     private apiSearchAssets;
-    private readonly searchToken;
     private readonly pendingGalleryPickerSaves;
     constructor(host: ReactiveControllerHost & CxConfigForm);
     hostConnected(): void;

package/library/packages/services/src/api/asset/asset.d.ts

@@ -27,7 +27,7 @@ export declare const SEARCH_FIELDS: {
     ORIGINAL_VIEW_SIZE: string;
 };
 export declare function resolveAssetExtraFilters(selectedFacets?: Record<string, string[]>): Record<string, string[]>;
-export declare function apiSearchAssets({ cms5Token, countPerPage, fields, getPermanentAssetsPaths, pageNumber, query, siteUrl, sort, token, useSession, }: SearchAssetsParams): Promise<SearchAssetsResponse>;
+export declare function apiSearchAssets({ countPerPage, fields, getPermanentAssetsPaths, pageNumber, query, securityByPassToken, siteUrl, sort, token, useSession, }: SearchAssetsParams): Promise<SearchAssetsResponse>;
 export declare function apiGetTransformAssetLink({ assetId, extension, format, siteUrl, token, transformations, useSession, }: {
     assetId: string;
     extension?: string;
@@ -37,8 +37,8 @@ export declare function apiGetTransformAssetLink({ assetId, extension, format, s
     transformations?: string;
     useSession?: string;
 }): Promise<GetTransformAssetLinkResponse | null>;
-export declare function apiGetAssets({ cms5Token, extraFields, getPermanentAssetsPaths, recordIds, token, }: GetAssetsRequest): Promise<GetAssetsResponse>;
-export declare function apiGetAssetsInFolder({ cms5Token, countPerPage, extraFields, getPermanentAssetsPaths, limitedDocTypes, pageNumber, parentFolderIdentifier, searchTerm, sortOrder, token, }: GetAssetsInFolderRequest): Promise<GetAssetsInFolderResponse>;
+export declare function apiGetAssets({ extraFields, getPermanentAssetsPaths, recordIds, securityByPassToken, token, }: GetAssetsRequest): Promise<GetAssetsResponse>;
+export declare function apiGetAssetsInFolder({ countPerPage, directParentFolderIdentifier, extraFields, getPermanentAssetsPaths, limitedDocTypes, pageNumber, parentFolderIdentifier, searchTerm, securityByPassToken, sortOrder, token, }: GetAssetsInFolderRequest): Promise<GetAssetsInFolderResponse>;
 export declare function apiGetCropFocusMode({ autoCropMode, cropHeight, cropWidth, imageUrl, useSession, }: GetCropZoneSuggestionRequest): Promise<GetCropZoneSuggestionResponse | null>;
 export declare function apiGetAvailableProxies({ assetRecordId, siteUrl, token, useSession, }: {
     assetRecordId: string;

package/library/packages/tools/src/fetch-asset/fetch-asset.d.ts

@@ -4,10 +4,10 @@ export declare class FetchAssetController implements ReactiveController {
     private readonly host;
     private data;
     constructor(host: ReactiveElement);
-    fetchAssetByID({ cms5Token, extraFields, recordId, token, }: {
-        cms5Token?: string;
+    fetchAssetByID({ extraFields, recordId, securityByPassToken, token, }: {
         extraFields?: string[];
         recordId: string;
+        securityByPassToken?: string;
         token?: string;
     }): Promise<Record<string, string>>;
     hostConnected?(): void;

package/library/packages/tools/src/fetch-image/fetch-image.d.ts

@@ -6,9 +6,9 @@ export type ExtendedGalleryItem = GalleryItem & {
     [key: string]: string | undefined;
 };
 type FetchImageControllerOptions = {
-    cms5Token?: string;
     maxEnd?: number;
     pageSize?: number;
+    securityByPassToken?: string;
     token?: string;
 };
 export declare function isSupportedImageExtension(extension: string): boolean;
@@ -16,15 +16,16 @@ export declare class FetchImageController implements ReactiveController {
     private readonly host;
     private data;
     private folderId;
-    private parentFolderIdentifier;
     private readonly fetchedPages;
     private totalCount;
     private maxEnd;
     private pageSize;
     private readonly authToken;
-    private readonly cms5Token;
+    private securityByPassToken;
+    private requestEpoch;
     constructor(host: ReactiveElement, options?: FetchImageControllerOptions);
     get totalDataCount(): number;
+    setSecurityByPassToken(token: string | undefined): void;
     fetchImages({ end, extraFields, format, start, transformations, }: {
         end: number;
         extraFields: string[];
@@ -70,7 +71,6 @@ export declare class FetchImageController implements ReactiveController {
     }): AsyncGenerator<ExtendedGalleryItem[], void, unknown>;
     hostConnected?(): void;
     hostDisconnected?(): void;
-    private resolveParentFolderIdentifier;
     private resetPageCache;
     private resetFolderState;
 }

package/library/packages/types/src/date-picker.d.ts

@@ -0,0 +1,45 @@
+export interface TimeOption {
+    label: string;
+    value: string;
+}
+export declare const DEFAULT_TIME_PART = "00";
+export declare const DEFAULT_FROM_TIME = "00:00:00";
+export declare const DEFAULT_TO_TIME = "23:59:59";
+/** Hour options in 12-hour AM/PM display, mapping to 24-hour internal values. */
+export declare const HOUR_OPTIONS: readonly TimeOption[];
+/** 00-59 padded strings for minute and second selects. */
+export declare const PAD_OPTIONS: readonly string[];
+export declare const DATE_RANGE_PRESET: {
+    readonly last2Days: "last-2-days";
+    readonly last30Days: "last-30-days";
+    readonly last30Minutes: "last-30-minutes";
+    readonly last3Days: "last-3-days";
+    readonly lastDay: "last-day";
+    readonly lastHalfYear: "last-half-year";
+    readonly lastMonth: "last-month";
+    readonly lastQuarter: "last-quarter";
+    readonly lastWeek: "last-week";
+    readonly lastYear: "last-year";
+    readonly next30Days: "next-30-days";
+    readonly thisHalfYear: "this-half-year";
+    readonly thisMonth: "this-month";
+    readonly thisQuarter: "this-quarter";
+    readonly thisWeek: "this-week";
+    readonly thisYear: "this-year";
+    readonly today: "today";
+};
+export type DateRangePreset = (typeof DATE_RANGE_PRESET)[keyof typeof DATE_RANGE_PRESET];
+export declare const DATE_RANGE_PRESETS: readonly ["last-30-minutes", "today", "last-day", "last-2-days", "last-3-days", "last-30-days", "next-30-days", "this-week", "last-week", "this-month", "last-month", "last-quarter", "last-half-year", "this-quarter", "this-half-year", "this-year", "last-year"];
+/** Maps each preset value to the i18n translation key used for its label. */
+export declare const PRESET_TRANSLATION_KEY: Record<DateRangePreset, string>;
+export interface DateRangeResult {
+    fromDate: string;
+    fromTime: string;
+    toDate: string;
+    toTime: string;
+}
+export type DateParts = {
+    day: number;
+    month: number;
+    year: number;
+};

package/library/packages/types/src/faceted-filter.d.ts

@@ -0,0 +1,23 @@
+export declare enum FacetSelectionMode {
+    Multiple = "multiple",
+    Single = "single"
+}
+export type FacetDetails = {
+    displayName: string;
+    facetFieldName: string;
+    facetIndexedFieldName?: string;
+    /** Controls whether the facet allows single or multi-select. Defaults to single. */
+    selection?: FacetSelectionMode;
+};
+export type FacetValue = {
+    count: number;
+    displayValue: string;
+    /** Supports two-level hierarchical values using ">>" separator, e.g. "image>>png". */
+    value: string;
+};
+export type Facet = {
+    facetDetails: FacetDetails;
+    values: FacetValue[];
+};
+/** Selected filter values keyed by facetFieldName. e.g. `{ status: ['active'], category: ['image>>png'] }` */
+export type SelectedFacets = Record<string, string[]>;

package/library/packages/types/src/icon-picker.d.ts

@@ -0,0 +1,8 @@
+export declare enum IconPickerVariant {
+    Button = "button",
+    Select = "select"
+}
+export type IconPickerValue = {
+    name: string;
+    src: string;
+};

package/library/packages/types/src/index.d.ts

@@ -1,5 +1,6 @@
 type FakeString = string & Record<string, never>;
 export type EnumOrString<T> = T | FakeString;
+export * from './icon-picker';
 export type BaseVariant = 'primary' | 'success' | 'neutral' | 'warning' | 'danger';
 export declare enum ObjectFit {
     Contain = "contain",
@@ -55,4 +56,3 @@ export declare enum GsapEasing {
     'quad-in-out' = "power2.inOut",
     'quad-out' = "power2.out"
 }
-export {};

package/library/packages/types/src/table.d.ts

@@ -35,6 +35,12 @@ export declare enum TableClipboardAction {
     Copy = "copy",
     Paste = "paste"
 }
+export declare enum TableDataFormat {
+    Auto = "auto",
+    Csv = "csv",
+    Json = "json",
+    Xml = "xml"
+}
 /**
  * Tabulator Interface
  */
@@ -2237,6 +2243,12 @@ export interface ColumnDefinition extends ColumnLayout, CellCallbacks, Formatter
      * is found the click is a no-op.
      */
     clickableActionName?: string;
+    /**
+     * When set, clicking the cell fires `cx-table-row-action-click` directly with
+     * `detail.name` equal to this value — no hover menu is required. Takes
+     * priority over `clickableActionName` when both are set.
+     */
+    clickableEventName?: string;
 }
 export interface CellCallbacks {
     /** callback for when user clicks on a cell in this column. */

package/library/packages/utils/src/custom-element/form.d.ts

@@ -77,3 +77,8 @@ export declare class FormControlController implements ReactiveController {
 export declare const validValidityState: ValidityState;
 export declare const valueMissingValidityState: ValidityState;
 export declare const customErrorValidityState: ValidityState;
+/**
+ * Resolves the form associated with a custom element.
+ * Accepts an HTMLFormElement directly, a form `id` string, or falls back to `closest('form')`.
+ */
+export declare function getAssociatedForm(element: HTMLElement, form: string | HTMLElement | undefined): HTMLFormElement | undefined;

package/library/packages/utils/src/custom-element/i18n.d.ts

@@ -31,6 +31,7 @@ export interface Translation extends DefaultTranslation {
     addCurrent: string;
     addFolderCard: string;
     addLimitExceeded: (limit: number) => string;
+    addMarker: string;
     addPageCard: string;
     addParameter: string;
     addRemoveLink: string;
@@ -233,7 +234,13 @@ export interface Translation extends DefaultTranslation {
     dashSpacing: string;
     dashWidth: string;
     dashed: string;
+    date: string;
+    dateAfterMax: string;
+    dateBeforeMin: string;
     dateFormat: string;
+    dateInvalid: string;
+    dateRangeRequired: string;
+    dateRequired: string;
     decreaseFontSize: string;
     default: string;
     defaultDownloadLocation: string;
@@ -298,6 +305,7 @@ export interface Translation extends DefaultTranslation {
     editFolderCard: string;
     editImage: string;
     editLink: string;
+    editMarker: string;
     editPageCard: string;
     editSection: string;
     editSlide: string;
@@ -370,6 +378,7 @@ export interface Translation extends DefaultTranslation {
     folderCollection: string;
     folders: string;
     font: string;
+    fontAwesome: string;
     fontColor: string;
     fontKit: string;
     fontKitPreview: string;
@@ -380,8 +389,10 @@ export interface Translation extends DefaultTranslation {
     fontWeight: string;
     fonts: string;
     format: string;
+    formatDDMMYYYY: string;
     formats: string;
     forward: string;
+    fromLabel: string;
     fullscreen: string;
     gallery: string;
     galleryCardNthOfCards: (index: number, count: number) => string;
@@ -412,6 +423,7 @@ export interface Translation extends DefaultTranslation {
     history: string;
     hollowBullet: string;
     horizontalGap: string;
+    hour: string;
     hugContent: string;
     hugContentOnDesktopAndStretchesToFullWidthOnMobile: string;
     icon: string;
@@ -494,6 +506,7 @@ export interface Translation extends DefaultTranslation {
     marginTop: string;
     margins: string;
     markerImages: string;
+    markers: string;
     markersPerScreen: string;
     matchCase: string;
     max: string;
@@ -514,6 +527,7 @@ export interface Translation extends DefaultTranslation {
     minHeight: string;
     minWidth: string;
     minimize: string;
+    minute: string;
     more: string;
     moreOptions: string;
     moveBlockDown: string;
@@ -554,6 +568,7 @@ export interface Translation extends DefaultTranslation {
     numOptionsSelected: (num: number) => string;
     numberedListStyle: string;
     of: string;
+    off: string;
     ok: string;
     onHover: string;
     onThisPage: string;
@@ -617,6 +632,24 @@ export interface Translation extends DefaultTranslation {
     popOut: string;
     position: string;
     preserveMetadata: string;
+    preset: string;
+    presetLast2Days: string;
+    presetLast30Days: string;
+    presetLast30Minutes: string;
+    presetLast3Days: string;
+    presetLastDay: string;
+    presetLastHalfYear: string;
+    presetLastMonth: string;
+    presetLastQuarter: string;
+    presetLastWeek: string;
+    presetLastYear: string;
+    presetNext30Days: string;
+    presetThisHalfYear: string;
+    presetThisMonth: string;
+    presetThisQuarter: string;
+    presetThisWeek: string;
+    presetThisYear: string;
+    presetToday: string;
     pressEnterOrCtrlCToCopy: string;
     preview: string;
     previewText: string;
@@ -690,6 +723,7 @@ export interface Translation extends DefaultTranslation {
     searchFolders: string;
     searchOptions: string;
     searching: string;
+    second: string;
     secondary: string;
     sectionBackground: string;
     seeThru: string;
@@ -802,6 +836,8 @@ export interface Translation extends DefaultTranslation {
     timeline: string;
     title: string;
     titleImage: string;
+    toDateMustBeSameOrLaterThanFromDate: string;
+    toLabel: string;
     toViewAssetRetrieveFromColdStorage: string;
     today: string;
     toggleColorFormat: string;

package/library/packages/utils/src/date/calendar-grid.d.ts

@@ -0,0 +1,40 @@
+import { CalendarDate } from './date';
+
+export interface CalendarCell {
+    /** YYYY-MM-DD of this cell. */
+    date: CalendarDate;
+    /** Numeric day of the month (1-31). */
+    day: number;
+    isDisabled: boolean;
+    /** True when this cell belongs to a month other than viewMonth. */
+    isOutside: boolean;
+    isSelected: boolean;
+    isToday: boolean;
+    /** 1-based month of this cell. May differ from viewMonth for outside cells. */
+    month: number;
+    year: number;
+}
+export interface CalendarGridParams {
+    /** Maximum selectable date. Empty string means no maximum. */
+    maxDate: CalendarDate;
+    /** Minimum selectable date. Empty string means no minimum. */
+    minDate: CalendarDate;
+    /** Currently selected date. Empty string means no selection. */
+    selectedDate: CalendarDate;
+    /** Today's date used to highlight the current day. */
+    todayDate: CalendarDate;
+    /** 1-based month to render (1 = January … 12 = December). */
+    viewMonth: number;
+    viewYear: number;
+}
+export declare class CalendarGrid {
+    /**
+     * Generates a fixed 35-cell (5 weeks × 7 days) grid for the given month.
+     * The grid always starts on Sunday. Days before the 1st and after the last
+     * day of viewMonth are marked isOutside = true but remain selectable.
+     *
+     * Note: months that span more than 5 weeks (start on Fri/Sat with 30/31 days)
+     * will have their last 1-2 days truncated. This matches the fixed-height design.
+     */
+    static generate(params: CalendarGridParams): CalendarCell[];
+}

package/library/packages/utils/src/date/date-range-preset.d.ts

@@ -0,0 +1,12 @@
+import { DateRangePreset, DateRangeResult } from '../../../types/src/date-picker';
+
+export declare class DateRangePresets {
+    /**
+     * Computes a date range from a preset value.
+     *
+     * @param preset - One of the DATE_RANGE_PRESET values.
+     * @param now - Injectable reference to the current moment; use `new Date()` in production.
+     * @returns fromDate, toDate (YYYY-MM-DD) and fromTime, toTime (HH:mm:ss).
+     */
+    static getRange(preset: DateRangePreset, now: Date): DateRangeResult;
+}

package/library/packages/utils/src/date/date.d.ts

@@ -0,0 +1,42 @@
+/** Strict date-only string in YYYY-MM-DD format. No time, no timezone. */
+export type CalendarDate = string;
+/** Returns true only for well-formed, calendar-valid YYYY-MM-DD strings. */
+export declare function isValidIsoDate(value: string): value is CalendarDate;
+/** Builds a CalendarDate from numeric parts. Month is 1-based. */
+export declare function toIsoDate(year: number, month: number, day: number): CalendarDate;
+/** Splits a CalendarDate into numeric year/month/day. Month is 1-based. */
+export declare function parseIsoDate(date: CalendarDate): {
+    day: number;
+    month: number;
+    year: number;
+};
+/** Converts a valid CalendarDate into a local Date object. */
+export declare function isoToDate(value: string): Date | undefined;
+/** Converts YYYY-MM-DD to DD-MM-YYYY for date input display. */
+export declare function isoToDisplay(value: string): string;
+/** Converts complete DD-MM-YYYY display input to YYYY-MM-DD. Returns empty for partial input. */
+export declare function displayToIso(value: string): CalendarDate | '';
+/** Returns today's date as a CalendarDate in the browser's local timezone. */
+export declare function getTodayIsoDate(): CalendarDate;
+/**
+ * Adds (or subtracts) months from a given year/month pair.
+ * Native Date handles overflow — e.g. month 13 becomes January of next year.
+ */
+export declare function addMonths(year: number, month: number, delta: number): {
+    month: number;
+    year: number;
+};
+/** Formats a year/month pair as a human-readable label, e.g. "June 2026". */
+export declare function formatMonthYearLabel(year: number, month: number): string;
+/** Returns the 0-based day-of-week index for the 1st of the given month. 0 = Sunday. */
+export declare function getFirstDayOfWeek(year: number, month: number): number;
+/**
+ * Normalizes a consumer-provided value to a CalendarDate (YYYY-MM-DD).
+ *
+ * Supported formats:
+ *   - YYYY-MM-DD           → returned as-is after validation
+ *   - ISO UTC datetime (Z) → converted to the browser's local date
+ *
+ * Unsupported formats log a warning and return null.
+ */
+export declare function normalizeToIsoDate(value: string): CalendarDate | null;