@orangelogic/design-system 2.148.0 → 2.149.0

package/library/components/video.js

@@ -1,13 +1,13 @@
 import { _ as kd, a as Sa, b as Be, c as Je } from "../chunks/inheritsLoose.BuSn_CvZ.js";
 import { c as ps, a as Bn } from "../chunks/_commonjsHelpers.DQNKXVTB.js";
 import { r as Sb } from "../chunks/___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
-import { C as Cb } from "../chunks/image.DaYfKRf4.js";
+import { C as Cb } from "../chunks/image.C1a_eXtI.js";
 import Mb from "./resize-observer.js";
 import { r as Db, R as Pb, a as Rp, b as Lb } from "../chunks/resizable-component.styles.CAfXABBc.js";
 import { c as Rb } from "../chunks/component.styles.CRO4Odto.js";
 import { b as Ib } from "../chunks/browser.BHOCIF_A.js";
 import { c as Ob } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as kb } from "../chunks/i18n.D07sG_CU.js";
+import { L as kb } from "../chunks/i18n.S781IU3H.js";
 import { w as Ki } from "../chunks/watch.K-dbDP6P.js";
 import { i as Bb, x as Qc } from "../chunks/lit-element.jLBm65_O.js";
 import { n as Ri } from "../chunks/lib-cortex-element.CVMmyPMC.js";

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.148.0",
+  "version": "2.149.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/molecules/src/faceted-filter/components/facet-date-picker/facet-date-picker.d.ts

@@ -1,6 +1,7 @@
 import { default as CxDetails } from '../../../../../atoms/src/components/details/details.ts';
 import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
 import { default as CxInputDatePicker } from '../../../input-date-picker/input-date-picker.ts';
+import { DateDisplayFormat } from '../../../../../types/src/date-picker';
 import { CSSResultGroup } from 'lit';
 
 /**
@@ -32,6 +33,8 @@ export default class CxFacetDatePicker extends CortexElement {
     min: string;
     /** Maximum selectable date in `YYYY-MM-DD`. */
     max: string;
+    /** How the date is shown/typed in the picker. Committed value stays ISO. */
+    displayFormat: DateDisplayFormat;
     private handleChange;
     private emitFacetChange;
     render(): import('lit').TemplateResult<1>;

package/library/packages/molecules/src/faceted-filter/components/facet-date-range/facet-date-range.d.ts

@@ -1,6 +1,7 @@
 import { default as CxDetails } from '../../../../../atoms/src/components/details/details.ts';
 import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
 import { default as CxInputDateRangePicker } from '../../../input-date-range-picker/input-date-range-picker.ts';
+import { DateDisplayFormat } from '../../../../../types/src/date-picker';
 import { CSSResultGroup } from 'lit';
 
 /**
@@ -40,6 +41,8 @@ export default class CxFacetDateRange extends CortexElement {
     min: string;
     /** Maximum selectable date in `YYYY-MM-DD`. */
     max: string;
+    /** How the date is shown/typed in both pickers. Committed value stays ISO. */
+    displayFormat: DateDisplayFormat;
     private handleChange;
     private emitFacetChange;
     render(): import('lit').TemplateResult<1>;

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

@@ -67,7 +67,10 @@ export default class CxFacetedFilter extends CortexElement {
     private internalDateRanges;
     /** Maps facetFieldName → (value → displayValue) for rendering applied-filter tags. */
     private mappedDisplayNames;
+    /** field → facet config from both bound sources (availableFacets wins). Rebuilt only when the sources change, not per render. */
+    private facetDetailsByField;
     handleFacetsChange(): void;
+    rebuildFacetDetailsByField(): void;
     handleSelectedFacetsChange(): void;
     handleSelectedDateRangesChange(): void;
     handleInternalSelectionChange(): void;
@@ -81,7 +84,12 @@ export default class CxFacetedFilter extends CortexElement {
     private handleClearAllClick;
     private emitChange;
     private renderAppliedFilters;
-    private getDateFacetLabel;
+    /**
+     * Resolves the display pattern (e.g. `DD/MM/YYYY`) configured for a date facet,
+     * so chip labels match how the facet's picker renders dates. Falls back to the
+     * default format when the facet has none.
+     */
+    private getDateFacetPattern;
     private formatDateRangeDisplay;
     private renderDateTags;
     private renderExternalFilterTags;

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

@@ -6,6 +6,7 @@ import { default as CxOption } from '../../../atoms/src/components/option/option
 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 { DateDisplayFormat } from '../../../types/src/date-picker';
 import { CSSResultGroup } from 'lit';
 
 /**
@@ -49,8 +50,15 @@ export default class CxInputDatePicker extends CortexElement {
     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 for the date input. Defaults to the current `displayFormat`. */
     placeholder: string;
+    /**
+     * Controls how the date is shown and parsed in the text field. Accepts a
+     * `DateDisplayFormat` token or a literal pattern (e.g. `MM/DD/YYYY` from the
+     * backend). Defaults to `DD/MM/YYYY`. The committed `value` (read via
+     * `el.value` when `cx-change` fires) always stays ISO `YYYY-MM-DD`.
+     */
+    displayFormat: DateDisplayFormat;
     /** 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. */
@@ -77,15 +85,17 @@ export default class CxInputDatePicker extends CortexElement {
     maskMaxMessage: string;
     /** Controls whether the calendar popup is visible. */
     private calendarOpen;
-    /** Date shown in the text input formatted as DD-MM-YYYY. */
+    /** Date shown in the text input, formatted according to `displayFormat`. */
     private displayValue;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     runFirstUpdated(): Promise<void>;
     private readonly dateMaskBlocks;
-    private get datePlaceholder();
     getForm(): HTMLFormElement | undefined;
+    /** The concrete pattern (e.g. `DD/MM/YYYY`) resolved from `displayFormat`. */
+    private get datePattern();
+    private get datePlaceholder();
     private get minDate();
     private get maxDate();
     /** Sets a custom validation message on the inner date input. Pass an empty string to restore validity. */
@@ -100,6 +110,7 @@ export default class CxInputDatePicker extends CortexElement {
     private renderHiddenTimeInput;
     private handleTimePartChange;
     handleValueChange(): void;
+    handleDisplayFormatChange(): void;
     handleMinMaxChange(): void;
     handleAccessStateChange(): void;
     private resetDateValue;

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

@@ -2,6 +2,7 @@ import { default as CxOption } from '../../../atoms/src/components/option/option
 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 { DateDisplayFormat } from '../../../types/src/date-picker';
 import { CSSResultGroup } from 'lit';
 
 /**
@@ -50,6 +51,13 @@ export default class CxInputDateRangePicker extends CortexElement {
     toLabel: string;
     /** Shared placeholder for both child date pickers. */
     placeholder: string;
+    /**
+     * Shared date display format for both child date pickers. Accepts a
+     * `DateDisplayFormat` token or a literal pattern (e.g. `MM/DD/YYYY` from the
+     * backend). Defaults to `DD/MM/YYYY`. The committed `fromDate`/`toDate` stay
+     * ISO `YYYY-MM-DD`.
+     */
+    displayFormat: DateDisplayFormat;
     /** Shows the time selects on both child date pickers. */
     showTime: boolean;
     /** Shows the preset selector. */

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

@@ -43,3 +43,23 @@ export type DateParts = {
     month: number;
     year: number;
 };
+/**
+ * Selectable date display formats. The enum value is a separator-neutral token
+ * (safe to embed in packed config strings like `cx-table`'s `facet-config`); the
+ * concrete pattern — including the separator — lives only in
+ * `DATE_DISPLAY_PATTERN`. New formats or a different separator are added there
+ * without touching parsers or config strings.
+ */
+export declare enum DateDisplayFormat {
+    DdMmYyyy = "ddmmyyyy",
+    MmDdYyyy = "mmddyyyy",
+    YyyyMmDd = "yyyymmdd"
+}
+/** Maps each format token to its concrete display pattern. Separators live only here. */
+export declare const DATE_DISPLAY_PATTERN: Record<DateDisplayFormat, string>;
+/**
+ * Resolves a display format to its concrete pattern. Accepts either a
+ * `DateDisplayFormat` token or an already-literal pattern (e.g. a value the
+ * backend sends such as `MM/DD/YYYY`), which is returned unchanged.
+ */
+export declare function toDatePattern(format: string): string;

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

@@ -1,3 +1,5 @@
+import { DateDisplayFormat } from './date-picker';
+
 export declare enum FacetSelectionMode {
     Multiple = "multiple",
     Single = "single"
@@ -21,6 +23,8 @@ export type CheckboxFacetDetails = {
 };
 /** Single date-picker facet. */
 export type DatePickerFacetDetails = {
+    /** How the date is shown/typed in the picker. Committed value stays ISO. */
+    displayFormat?: DateDisplayFormat;
     displayName: string;
     facetFieldName: string;
     facetIndexedFieldName?: string;
@@ -35,6 +39,8 @@ export type DatePickerFacetDetails = {
 };
 /** From/to date-range facet. */
 export type DateRangeFacetDetails = {
+    /** How the date is shown/typed in both pickers. Committed value stays ISO. */
+    displayFormat?: DateDisplayFormat;
     displayName: string;
     facetFieldName: string;
     facetIndexedFieldName?: string;

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

@@ -471,7 +471,6 @@ export interface Translation extends DefaultTranslation {
     fonts: string;
     formToOpen: string;
     format: string;
-    formatDDMMYYYY: string;
     formats: string;
     forward: string;
     fourPageView: string;

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

@@ -12,10 +12,18 @@ export declare function parseIsoDate(date: CalendarDate): {
 };
 /** 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 the IMask pattern for a display format, e.g. `DD/MM/YYYY` -> `d{/}m{/}Y`. */
+export declare function getDateMask(format: string): string;
+/**
+ * Converts a YYYY-MM-DD value to the given display format, e.g.
+ * `2026-06-08` + `MM/DD/YYYY` -> `06/08/2026`. Returns empty for empty input.
+ */
+export declare function formatIsoToDisplay(value: string, format: string): string;
+/**
+ * Converts a complete display-format string back to YYYY-MM-DD, honoring the
+ * part order of `format`. Returns empty for partial input.
+ */
+export declare function parseDisplayToIso(value: string, format: string): CalendarDate | '';
 /** Returns today's date as a CalendarDate in the browser's local timezone. */
 export declare function getTodayIsoDate(): CalendarDate;
 /**

package/library/react-web-component.d.ts

@@ -9,8 +9,8 @@
             export type CxDetailsGroupDetailsItem = { id: string; label: string; };
             export type CxFacetedFilterFacet = { facetDetails: CxFacetedFilterCheckboxFacetDetails | CxFacetedFilterDatePickerFacetDetails | CxFacetedFilterDateRangeFacetDetails; values: CxFacetedFilterFacetValue[]; };
             export type CxFacetedFilterCheckboxFacetDetails = { displayName: string; facetFieldName: string; facetIndexedFieldName: string; selection: 'multiple' | 'single'; type: 'checkbox'; };
-            export type CxFacetedFilterDatePickerFacetDetails = { displayName: string; facetFieldName: string; facetIndexedFieldName: string; max: string; min: string; selection: 'multiple' | 'single'; showTime: boolean; type: 'date-picker'; };
-            export type CxFacetedFilterDateRangeFacetDetails = { displayName: string; facetFieldName: string; facetIndexedFieldName: string; max: string; min: string; selection: 'multiple' | 'single'; showPreset: boolean; showTime: boolean; type: 'date-range'; };
+            export type CxFacetedFilterDatePickerFacetDetails = { displayFormat: 'ddmmyyyy' | 'mmddyyyy' | 'yyyymmdd'; displayName: string; facetFieldName: string; facetIndexedFieldName: string; max: string; min: string; selection: 'multiple' | 'single'; showTime: boolean; type: 'date-picker'; };
+            export type CxFacetedFilterDateRangeFacetDetails = { displayFormat: 'ddmmyyyy' | 'mmddyyyy' | 'yyyymmdd'; displayName: string; facetFieldName: string; facetIndexedFieldName: string; max: string; min: string; selection: 'multiple' | 'single'; showPreset: boolean; showTime: boolean; type: 'date-range'; };
             export type CxFacetedFilterFacetValue = { count: number; displayValue: string; value: string; };
             export type CxFacetedFilterDateRangeValue = { fromDate: string; fromTime: string; preset: string; showTime: boolean; toDate: string; toTime: string; type: 'date-picker' | 'date-range'; };
             export type CxGraphViewWorkflow = { data: CxGraphViewData; description: string; id: string; links: CxGraphViewEdge[]; name: string; node_types: dictionary; nodes: CxGraphViewNode[]; type: string; };
@@ -6076,9 +6076,13 @@
         */
         timeValue?: string;
         /**
-          * Placeholder for the date input. Defaults to DD-MM-YYYY.
+          * Placeholder for the date input. Defaults to the current `displayFormat`.
         */
         placeholder?: string;
+        /**
+          * Controls how the date is shown and parsed in the text field. Accepts a `DateDisplayFormat` token or a literal pattern (e.g. `MM/DD/YYYY` from the backend). Defaults to `DD/MM/YYYY`. The committed `value` (read via `el.value` when `cx-change` fires) always stays ISO `YYYY-MM-DD`.
+        */
+        displayFormat?: 'ddmmyyyy' | 'mmddyyyy' | 'yyyymmdd';
         /**
           * Shows the hour/minute/second time selects below the date row.
         */
@@ -6165,6 +6169,10 @@
           * Maximum selectable date in `YYYY-MM-DD`.
         */
         max?: string;
+        /**
+          * How the date is shown/typed in the picker. Committed value stays ISO.
+        */
+        displayFormat?: 'ddmmyyyy' | 'mmddyyyy' | 'yyyymmdd';
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */
@@ -6235,6 +6243,10 @@
           * Shared placeholder for both child date pickers.
         */
         placeholder?: string;
+        /**
+          * Shared date display format for both child date pickers. Accepts a `DateDisplayFormat` token or a literal pattern (e.g. `MM/DD/YYYY` from the backend). Defaults to `DD/MM/YYYY`. The committed `fromDate`/`toDate` stay ISO `YYYY-MM-DD`.
+        */
+        displayFormat?: 'ddmmyyyy' | 'mmddyyyy' | 'yyyymmdd';
         /**
           * Shows the time selects on both child date pickers.
         */
@@ -6333,6 +6345,10 @@
           * Maximum selectable date in `YYYY-MM-DD`.
         */
         max?: string;
+        /**
+          * How the date is shown/typed in both pickers. Committed value stays ISO.
+        */
+        displayFormat?: 'ddmmyyyy' | 'mmddyyyy' | 'yyyymmdd';
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */