@orangelogic/design-system 2.148.0 → 2.150.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.C-rHqDVB.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.BwXikn4k.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.150.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/hybrid/table-core/src/tabulator-tables/core/TabulatorFull.d.ts

@@ -2,7 +2,7 @@ import { default as Filter } from '../modules/Filter/Filter';
 import { default as Page } from '../modules/Page/Page';
 import { default as SelectRow } from '../modules/SelectRow/SelectRow';
 import { default as Tabulator } from './Tabulator';
-import { GroupArg, GroupValuesArg, ITabulatorFull, Options, SheetLookup, SortDirection, Sorter, SpreadsheetComponent } from './types';
+import { GroupArg, GroupValuesArg, ICellComponent, ITabulatorFull, Options, SheetLookup, SortDirection, Sorter, SpreadsheetComponent, ValidationSummary } from './types';
 
 declare class TabulatorFull extends Tabulator implements ITabulatorFull {
     static extendModule(...args: Parameters<typeof Tabulator._extendModule>): void;
@@ -50,5 +50,10 @@ declare class TabulatorFull extends Tabulator implements ITabulatorFull {
     deselectRow: SelectRow['deselectRows'];
     toggleSelectRow: SelectRow['toggleRow'];
     setSort: (sortList: string | Sorter[], dir?: SortDirection) => void;
+    validate: () => true | ICellComponent[];
+    validateAsync: () => Promise<ValidationSummary>;
+    getValidationSummary: () => ValidationSummary;
+    getInvalidCells: () => ICellComponent[];
+    clearCellValidation: (cells?: ICellComponent | ICellComponent[]) => void;
 }
 export default TabulatorFull;

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/index.d.ts

@@ -40,6 +40,7 @@ export { default as CxStatCard } from './stat-card/stat-card';
 export { default as CxStepperWizard } from './stepper-wizard/stepper-wizard';
 export { default as CxStorybook } from './storybook/storybook';
 export { default as CxTypeface } from './typeface/typeface';
+export { default as CxTypeSubtypeSelect } from './type-subtype-select/type-subtype-select';
 export { default as CxAssetFormatPicker } from './asset-format-picker/asset-format-picker';
 export { default as CxInputDatePicker } from './input-date-picker/input-date-picker';
 export { default as CxInputDateRangePicker } from './input-date-range-picker/input-date-range-picker';

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/molecules/src/type-subtype-select/type-subtype-select.d.ts

@@ -0,0 +1,64 @@
+import { default as CxButton } from '../../../atoms/src/components/button/button.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 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 { TypeSubtypeOption, TypeSubtypeSelectRow } from '../../../types/src/type-subtype-select';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Cascading type/subtype picker. Renders one or more rows of a
+ * "type" select and a dependent "subtype" select (disabled until a type is
+ * chosen). In `multiple` mode, rows can be added and removed with `+` / `-`
+ * controls. The emitted `value` is a space-separated list of one token per
+ * row, each token being `{type}.{subtype}`. In single mode, exactly one row
+ * is rendered and `value` is that row's single token.
+ *
+ * @event cx-change - Emitted whenever the selected type/subtype rows change.
+ */
+export default class CxTypeSubtypeSelect extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-option': typeof CxOption;
+        'cx-select': typeof CxSelect;
+    };
+    /** Encodes one row's type/subtype pair into the token format used by `value`. */
+    static encodeRowToken(row: TypeSubtypeSelectRow): string;
+    /** Decodes one `value` token back into its type/subtype pair. */
+    static decodeRowToken(token: string): TypeSubtypeSelectRow;
+    private readonly localize;
+    /** Available types, each with its own list of subtypes. */
+    options: TypeSubtypeOption[];
+    /** When true, allows multiple type/subtype rows (add with `+`, remove with `-`). */
+    multiple: boolean;
+    /**
+     * Space-separated row tokens, each `{type}.{subtype}`. In single mode,
+     * holds at most one token.
+     */
+    value: string;
+    /** When true, each row's type select participates in native form validation. */
+    required: boolean;
+    /** Editable rows, derived from `value` whenever it changes externally. */
+    private rows;
+    /** Row ids are only used for keyed rendering; they never leave the component. */
+    private rowIds;
+    syncRowsFromValue(): void;
+    private subOptionsFor;
+    private applyRows;
+    private rowIndexOf;
+    private handleTypeChange;
+    private handleSubtypeChange;
+    private handleAddRowClick;
+    private handleRemoveRowClick;
+    private renderRow;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-type-subtype-select': CxTypeSubtypeSelect;
+    }
+}

package/library/packages/molecules/src/type-subtype-select/type-subtype-select.styles.d.ts

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

package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts

@@ -196,6 +196,12 @@ export default class CxAssetLinkFormat extends CortexElement {
      * been applied yet.
      */
     get lastAppliedCropUnit(): Unit;
+    /**
+     * The focus mode of the last applied crop transformation, for the no-asset case only.
+     * Reflects whatever focus mode the last committed Crop transformation used, or 'manual'
+     * when nothing has been applied yet.
+     */
+    get lastAppliedCropFocusMode(): string;
     /**
      * Checks if the crop apply button should be disabled.
      * This is determined by comparing the current crop size with the last crop size.

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-crop/asset-link-format-crop.d.ts

@@ -41,7 +41,7 @@ export type CxAssetLinkFormatCropFocusModeChangeEvent = CustomEvent<{
  * @event `cx-asset-link-format-crop-apply` - Emitted when the crop settings are applied.
  * @event `cx-asset-link-format-crop-auto` - Emitted when the auto cropping is applied.
  *
- * @property {boolean} no-ratio-modes - When true, hides the ratio mode select (Free, Widescreen, Square, etc.).
+ * @property {boolean} no-ratio-modes - When true, hides the ratio mode select (Free, Widescreen, Square, etc.) and the unit select (Pixels / Aspect Ratio).
  */
 export default class CxAssetLinkFormatCrop extends CortexElement {
     static readonly styles: CSSResultGroup;
@@ -109,9 +109,10 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
      */
     disabledApply: boolean;
     /**
-     * Whether to hide the ratio mode select (Free, Widescreen, Square, etc.).
-     * Useful when no asset is attached yet, since switching between ratios
-     * without known dimensions only produces tiny, meaningless pixel values.
+     * Whether to hide the ratio mode select (Free, Widescreen, Square, etc.) and the
+     * unit select (Pixels / Aspect Ratio). Useful when no asset is attached yet, since
+     * switching between ratios or units without known dimensions only produces tiny,
+     * meaningless pixel values.
      */
     noRatioModes: boolean;
     /**

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-resize/asset-link-format-resize.d.ts

@@ -27,6 +27,8 @@ export type CxAssetLinkFormatResizeApplyEvent = CustomEvent<{
  * @summary The `cx-asset-link-format-resize` component is used to define resize values for an asset link.
  *
  * @event `cx-asset-link-format-resize-change` - Emitted when the resize values are changed.
+ *
+ * @property {boolean} no-ratio-modes - When true, hides the unit select (Pixels / Aspect Ratio).
  */
 export default class CxAssetLinkFormatResize extends CortexElement {
     static readonly styles: CSSResultGroup;
@@ -104,6 +106,12 @@ export default class CxAssetLinkFormatResize extends CortexElement {
      * @default false
      */
     loading: boolean;
+    /**
+     * Whether to hide the unit select (Pixels / Aspect Ratio). Useful when no asset is
+     * attached yet, since switching between units without known dimensions only
+     * produces tiny, meaningless pixel values.
+     */
+    noRatioModes: boolean;
     /**
      * Whether to keep the aspect ratio when changing width or height.
      * This is used to automatically adjust the other dimension when one is changed.

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

@@ -10,6 +10,8 @@ export declare class ConfigFormController implements ReactiveController {
     private readonly pendingGalleryPickerSaves;
     private readonly fontFamiliesCache;
     private readonly pendingFontFamilyFetches;
+    private readonly typeSubtypeOptionsCache;
+    private readonly pendingTypeSubtypeOptionsFetches;
     constructor(host: ReactiveControllerHost & CxConfigForm);
     hostConnected(): void;
     /**

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

@@ -40,6 +40,7 @@ import { default as CxPaddingInputGroup } from '../../../../../molecules/src/pad
 import { default as CxPositionPicker } from '../../../../../molecules/src/position-picker/position-picker.ts';
 import { default as CxShadowInputGroup } from '../../../../../molecules/src/shadow-input-group/shadow-input-group.ts';
 import { default as CxSizeInputGroup } from '../../../../../molecules/src/size-input-group/size-input-group.ts';
+import { default as CxTypeSubtypeSelect } from '../../../../../molecules/src/type-subtype-select/type-subtype-select.ts';
 import { default as CxAssetTransformationDialog } from '../../../asset-transformation-dialog/asset-transformation-dialog.ts';
 import { AssetFormatValue } from '../../../../../types/src/asset-format-picker';
 import { Asset, AssetTypeString, EditorMode, PropertyConfig } from '../../../../../types/src/content-builder';
@@ -125,6 +126,7 @@ export default class CxConfigForm extends CortexElement {
         'cx-tab-panel': typeof CxTabPanel;
         'cx-textarea': typeof CxTextarea;
         'cx-tooltip': typeof CxTooltip;
+        'cx-type-subtype-select': typeof CxTypeSubtypeSelect;
         'cx-typography': typeof CxTypography;
         'cx-visually-hidden': typeof CxVisuallyHidden;
     };

package/library/packages/organisms/src/content-builder/styleController.d.ts

@@ -74,7 +74,7 @@ export default class StyleController {
         checkedValue?: string | boolean;
         children?: PropertyConfig[];
         clearable?: boolean;
-        controlType: "asset-transformation" | "bicolor-picker" | "border-input-group" | "button-group" | "checkbox" | "checkbox-group" | "color-swatch-picker" | "corner-position-input-group" | "dam-custom-toolbar-buttons" | "download-format-picker" | "file" | "folder-picker" | "gallery-picker" | "group" | "group-heading" | "icon-picker" | "image-picker" | "info-text" | "input" | "list-editor" | "all-picker" | "other-picker" | "padding-input-group" | "page-picker" | "placeholder" | "position-picker" | "radio-card-group" | "radio-group" | "select" | "shadow-input-group" | "size-input-group" | "switch" | "table" | "text" | "audio-picker" | "asset-format-picker" | "font-picker" | "video-picker";
+        controlType: "asset-transformation" | "bicolor-picker" | "border-input-group" | "button-group" | "checkbox" | "checkbox-group" | "color-swatch-picker" | "corner-position-input-group" | "dam-custom-toolbar-buttons" | "download-format-picker" | "file" | "folder-picker" | "gallery-picker" | "group" | "group-heading" | "icon-picker" | "image-picker" | "info-text" | "input" | "list-editor" | "all-picker" | "other-picker" | "padding-input-group" | "page-picker" | "placeholder" | "position-picker" | "radio-card-group" | "radio-group" | "select" | "shadow-input-group" | "size-input-group" | "switch" | "table" | "text" | "type-subtype-select" | "audio-picker" | "asset-format-picker" | "font-picker" | "video-picker";
         cornerStyleKey?: {
             offsetX: string;
             offsetY: string;
@@ -166,6 +166,10 @@ export default class StyleController {
         translatable?: boolean;
         translateGroup?: string;
         type: "attribute" | "property" | "style" | "decorative";
+        typeSubtypeSelectConfigs?: {
+            api: () => Promise<import('../../../types/src/type-subtype-select').TypeSubtypeOption[]>;
+            multiple?: boolean;
+        };
         uncheckedValue?: string | boolean;
         useSearchTerm?: boolean;
         width?: ((record: Record<string, unknown>) => string | number) | string | number;

package/library/packages/organisms/src/dam-custom-toolbar-buttons-editor/dam-custom-toolbar-buttons-editor.d.ts

@@ -17,6 +17,7 @@ import { CxAssetRequestStatusEvent, CxChangeEvent, CxRequestCloseEvent } from '.
 import { default as CxConfirmPopover } from '../../../molecules/src/confirm-popover/confirm-popover.ts';
 import { default as CxDynamicSelect } from '../../../molecules/src/dynamic-select/dynamic-select.ts';
 import { default as CxIconPicker } from '../../../molecules/src/icon-picker/icon-picker.ts';
+import { default as CxTypeSubtypeSelect } from '../../../molecules/src/type-subtype-select/type-subtype-select.ts';
 import { Option } from '../../../types/src/content-builder';
 import { DamCustomToolbarButton } from '../../../types/src/dam-view';
 import { CSSResultGroup } from 'lit';
@@ -59,6 +60,7 @@ export default class CxDamCustomToolbarButtonsEditor extends CortexElement {
         'cx-radio-group': typeof CxRadioGroup;
         'cx-select': typeof CxSelect;
         'cx-space': typeof CxSpace;
+        'cx-type-subtype-select': typeof CxTypeSubtypeSelect;
         'cx-typography': typeof CxTypography;
     };
     private readonly localize;
@@ -120,6 +122,7 @@ export default class CxDamCustomToolbarButtonsEditor extends CortexElement {
     private availableButtonsApi;
     private get pageSelectColumns();
     private get addSelectColumns();
+    private get typeSubtypeOptions();
     handleCreateNewClick(): void;
     handleAvailableButtonSelect(event: CustomEvent<Option>): void;
     handleListEditorEdit(event: CxListEditorRowActionEvent): void;
@@ -141,17 +144,12 @@ export default class CxDamCustomToolbarButtonsEditor extends CortexElement {
     handleFormIdChange(event: CustomEvent<Option>): void;
     handlePageChange(event: CxChangeEvent): void;
     handleSpaceIdChange(event: CustomEvent<Option>): void;
-    handleRecordTypeChange(event: CxChangeEvent): void;
-    handleRecordSubTypeChange(event: CxChangeEvent): void;
+    handleRecordTypeSubtypeChange(event: CxChangeEvent): void;
     handleAccessLevelChange(event: CustomEvent<Option>): void;
     handleConfigureWorkflowClick(): Promise<void>;
     handleSaveClick(): void;
     handleDialogFormSubmit(event: SubmitEvent): void;
     private loadSubTypesIfNeeded;
-    /** Returns the `typeLabel` key (underscored) that matches a given `typeDbBOName`. */
-    private findTypeKeyByDbBOName;
-    /** Picks the wildcard subTypeValue (or first available) for a given `typeDbBOName`. */
-    private findDefaultSubTypeFor;
     private createNewButton;
     private updateEditedItem;
     /**

package/library/packages/types/src/content-builder.d.ts

@@ -5,6 +5,7 @@ import { DownloadDocType } from './download-format-picker';
 import { FolderSelectApi, FolderSelectVariant } from './folder-select';
 import { FontTypeface } from './font-picker';
 import { TableSelectColumn } from './table-select';
+import { TypeSubtypeOption } from './type-subtype-select';
 
 export declare const SPACE_DEFAULT_FONT_FAMILY = "space-default";
 export declare enum DeviceType {
@@ -80,7 +81,7 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
     checkedValue?: string | boolean;
     children?: PropertyConfig[];
     clearable?: boolean;
-    controlType: 'asset-transformation' | 'bicolor-picker' | 'border-input-group' | 'button-group' | 'checkbox' | 'checkbox-group' | 'color-swatch-picker' | 'corner-position-input-group' | 'dam-custom-toolbar-buttons' | 'download-format-picker' | 'file' | 'folder-picker' | 'gallery-picker' | 'group' | 'group-heading' | 'icon-picker' | 'image-picker' | 'info-text' | 'input' | 'list-editor' | 'all-picker' | 'other-picker' | 'padding-input-group' | 'page-picker' | 'placeholder' | 'position-picker' | 'radio-card-group' | 'radio-group' | 'select' | 'shadow-input-group' | 'size-input-group' | 'switch' | 'table' | 'text' | 'audio-picker' | 'asset-format-picker' | 'font-picker' | 'video-picker';
+    controlType: 'asset-transformation' | 'bicolor-picker' | 'border-input-group' | 'button-group' | 'checkbox' | 'checkbox-group' | 'color-swatch-picker' | 'corner-position-input-group' | 'dam-custom-toolbar-buttons' | 'download-format-picker' | 'file' | 'folder-picker' | 'gallery-picker' | 'group' | 'group-heading' | 'icon-picker' | 'image-picker' | 'info-text' | 'input' | 'list-editor' | 'all-picker' | 'other-picker' | 'padding-input-group' | 'page-picker' | 'placeholder' | 'position-picker' | 'radio-card-group' | 'radio-group' | 'select' | 'shadow-input-group' | 'size-input-group' | 'switch' | 'table' | 'text' | 'type-subtype-select' | 'audio-picker' | 'asset-format-picker' | 'font-picker' | 'video-picker';
     cornerStyleKey?: {
         offsetX: string;
         offsetY: string;
@@ -190,6 +191,12 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
     translatable?: boolean;
     translateGroup?: string;
     type: 'attribute' | 'property' | 'style' | 'decorative';
+    typeSubtypeSelectConfigs?: {
+        /** Resolves the available type/subtype options. Fetched once and cached by trait id. */
+        api: () => Promise<TypeSubtypeOption[]>;
+        /** Whether multiple type/subtype rows can be added (space-separated subtype values). */
+        multiple?: boolean;
+    };
     uncheckedValue?: string | boolean;
     useSearchTerm?: boolean;
     width?: ((record: Record<string, unknown>) => string | number) | string | number;

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;
@@ -939,6 +938,7 @@ export interface Translation extends DefaultTranslation {
     styling: string;
     subfolders: string;
     subscript: string;
+    subtype: string;
     suggestDeletion: string;
     suggestedEdits: string;
     superscript: 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;
 /**