@orangelogic/design-system 2.56.0 → 2.57.0

package/library/components/video.js

@@ -1,10 +1,10 @@
 import { a as Ab, c as ps, g as kn } from "../chunks/_commonjsHelpers.ByX85dGu.js";
-import { r as Tb, C as Eb, R as wb } from "../chunks/image.BJfasRY_.js";
+import { r as Tb, C as Eb, R as wb } from "../chunks/image.gpleN29o.js";
 import Sb from "./resize-observer.js";
 import { c as Cb } from "../chunks/component.styles.CI-v8BZa.js";
 import { b as Mb } from "../chunks/browser.Va59Ix3P.js";
 import { i as Db, n as ki, x as Kc, c as Pb } from "../chunks/custom-element.vnXBMQxc.js";
-import { L as Lb } from "../chunks/i18n.C3Z8Xe8q.js";
+import { L as Lb } from "../chunks/i18n.dCiJrmqj.js";
 import { w as Bn } from "../chunks/watch.BCJD77bD.js";
 import { r as Fn } from "../chunks/state.Cw55xXlb.js";
 import { e as ao } from "../chunks/query.BBf1UFkC.js";

package/library/package.json

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

package/library/packages/atoms/src/components/button/button.d.ts

@@ -126,6 +126,9 @@ export default class CxButton extends CortexElement implements CortexFormControl
     get validity(): ValidityState;
     /** Gets the validation message */
     get validationMessage(): string;
+    get hasPrefix(): boolean;
+    get hasSuffix(): boolean;
+    get hasLabel(): boolean;
     runFirstUpdated(): void;
     connectedUpdatedCallback(): void;
     disconnectedCallback(): void;
@@ -152,6 +155,7 @@ export default class CxButton extends CortexElement implements CortexFormControl
     reportValidity(): boolean;
     /** Sets a custom validation message. Pass an empty string to restore validity. */
     setCustomValidity(message: string): void;
+    protected renderLabel(): import('lit').TemplateResult;
     render(): import('lit').TemplateResult;
 }
 declare global {

package/library/packages/atoms/src/components/line-clamp/line-clamp.d.ts

@@ -64,8 +64,10 @@ export default class CxLineClamp extends CortexElement {
      * The tooltip element.
      */
     tooltipElement: HTMLElement;
+    private mutationObserver;
+    connectedUpdatedCallback(): void;
+    disconnectedCallback(): void;
     updateTooltipContent(): Promise<void>;
-    runFirstUpdated(): void;
     /**
      * Safari has a bug where -webkit-line-clamp with mixed content (text + elements)
      * can lose text nodes when tooltip hides. This forces a reflow to fix it.

package/library/packages/atoms/src/components/table/components/table-toolbar/table-saved-search-dropdown.d.ts

@@ -0,0 +1,60 @@
+import { default as CxButton } from '../../../button/button.ts';
+import { default as CxDropdown } from '../../../dropdown/dropdown.ts';
+import { default as CxIcon } from '../../../icon/icon.ts';
+import { default as CxMenu } from '../../../menu/menu.ts';
+import { default as CxMenuItem } from '../../../menu-item/menu-item.ts';
+import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
+import { SavedSearchItem } from '../../../../../../types/src/table';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary CxTableSavedSearchDropdown
+ */
+export default class CxTableSavedSearchDropdown extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-dropdown': typeof CxDropdown;
+        'cx-icon': typeof CxIcon;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
+    };
+    private readonly localize;
+    private fetchController;
+    /**
+     * The URL to load the saved searches from
+     */
+    savedSearchURL: string;
+    /**
+     * The items to display in the saved search dropdown if savedSearchURL is not provided
+     */
+    savedSearchItems: SavedSearchItem[];
+    /**
+     * The parameter name for the page size for the saved search dropdown
+     */
+    savedSearchPageSizeParam: string;
+    /**
+     * The page size for the saved search dropdown
+     */
+    savedSearchPageSize: number;
+    /**
+     * The parameter name for the page number for the saved search dropdown
+     */
+    savedSearchPageNumberParam: string;
+    totalCount: number;
+    loading: boolean;
+    private currentPage;
+    createRenderRoot(): this;
+    private get hasMore();
+    private resetSavedSearchState;
+    private getSavedSearchItems;
+    private handleLoadMore;
+    handleSavedSearchURLChange(): void;
+    private handleSavedSearchItemSelect;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-table-saved-search-dropdown': CxTableSavedSearchDropdown;
+    }
+}

package/library/packages/atoms/src/components/table/components/table-toolbar/table-toolbar.d.ts

@@ -9,7 +9,9 @@ import { default as CxSpace } from '../../../space/space.ts';
 import { default as CxTooltip } from '../../../tooltip/tooltip.ts';
 import { default as CxTypography } from '../../../typography/typography.ts';
 import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
+import { SavedSearchItem } from '../../../../../../types/src/table';
 import { CSSResultGroup } from 'lit';
+import { default as CxTableSavedSearchDropdown } from './table-saved-search-dropdown';
 
 /**
  * @summary <cx-table-toolbar> is a component that displays a toolbar for a table.
@@ -26,11 +28,12 @@ export default class CxTableToolbar extends CortexElement {
         'cx-menu': typeof CxMenu;
         'cx-menu-item': typeof CxMenuItem;
         'cx-space': typeof CxSpace;
+        'cx-table-saved-search-dropdown': typeof CxTableSavedSearchDropdown;
         'cx-tooltip': typeof CxTooltip;
         'cx-typography': typeof CxTypography;
     };
-    private form;
-    private searchInput;
+    private readonly form;
+    private readonly searchInput;
     /**
      * The label of the table.
      */
@@ -63,6 +66,34 @@ export default class CxTableToolbar extends CortexElement {
      * Whether to display a export custom button
      */
     canExportCustom: boolean;
+    /**
+     * Whether to display a save report button
+     */
+    canSaveReport: boolean;
+    /**
+     * The URL to load the saved searches from
+     */
+    savedSearchURL: string;
+    /**
+     * The items to display in the saved search dropdown if savedSearchURL is not provided
+     */
+    savedSearchItems: SavedSearchItem[];
+    /**
+     * The parameter name for the page size for the saved search dropdown
+     */
+    savedSearchPageSizeParam: string;
+    /**
+     * The page size for the saved search dropdown
+     */
+    savedSearchPageSize: number;
+    /**
+     * The parameter name for the page number for the saved search dropdown
+     */
+    savedSearchPageNumberParam: string;
+    /**
+     * Whether to display the saved search dropdown
+     */
+    showSavedSearch: boolean;
     searchValue: string;
     private handleSearchSubmit;
     private handleAdvancedSearchClick;
@@ -71,9 +102,11 @@ export default class CxTableToolbar extends CortexElement {
     private handleExportCsv;
     private handleExportXml;
     private handleExportCustom;
-    renderSearch(): import('lit').TemplateResult<1>;
-    renderAddButton(): import('lit').TemplateResult<1>;
-    renderExportDropdown(): import('lit').TemplateResult<1>;
+    private handleSaveReport;
+    private renderSearch;
+    private renderAddButton;
+    private renderSavedSearchDropdown;
+    private renderExportDropdown;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/library/packages/atoms/src/components/table/table.d.ts

@@ -6,7 +6,7 @@ import { default as CxSpinner } from '../spinner/spinner.ts';
 import { default as CxTag } from '../tag/tag.ts';
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
 import { PaginationCounter } from '../../../../types/src/pagination';
-import { HoverMenuOptions, ColumnDefinition, Options, OptionsColumns, OptionsSpreadsheet, SheetDefinition } from '../../../../types/src/table';
+import { HoverMenuOptions, SavedSearchItem, ColumnDefinition, Options, OptionsColumns, OptionsSpreadsheet, SheetDefinition } from '../../../../types/src/table';
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { CxTableRowActions, CxTableToolbar } from './components';
 import { RowComponent, TabulatorFull as Tabulator } from './tabulator-tables';
@@ -71,10 +71,10 @@ export default class CxTable extends CortexElement {
     private osInstance;
     private resizeObserver;
     private overflowObserver;
-    private tabulatorHolder;
-    private tabulatorElement;
-    private table;
-    private tableToolbar;
+    private readonly tabulatorHolder;
+    private readonly tabulatorElement;
+    private readonly table;
+    private readonly tableToolbar;
     movableRows: boolean;
     movableColumns: boolean;
     data: Options['data'];
@@ -168,6 +168,10 @@ export default class CxTable extends CortexElement {
      * Whether to hide the advanced search button
      */
     noAdvancedSearch: boolean;
+    /**
+     * Whether to display the saved search dropdown
+     */
+    showSavedSearch: boolean;
     /**
      * Fields to search in the table.
      */
@@ -192,6 +196,21 @@ export default class CxTable extends CortexElement {
      * Whether to display a export custom button
      */
     canExportCustom: boolean;
+    canSaveReport: boolean;
+    savedSearchURL: string;
+    savedSearchItems: SavedSearchItem[];
+    /**
+     * The parameter name for the page size for the saved search dropdown
+     */
+    savedSearchPageSizeParam: string;
+    /**
+     * The page size for the saved search dropdown
+     */
+    savedSearchPageSize: number;
+    /**
+     * The parameter name for the page number for the saved search dropdown
+     */
+    savedSearchPageNumberParam: string;
     /**
      * The URL to load the data from.
      */
@@ -609,7 +628,10 @@ export default class CxTable extends CortexElement {
      * This set stores the names of the event names that are being watched.
      */
     private readonly watchedEvents;
+    private activeSearchValue;
     get initialized(): boolean | undefined;
+    get searchValue(): string;
+    get showTableToolbar(): string | boolean;
     initTable(): Promise<void>;
     handleUseOverlayScrollbarChange(): void;
     constructor();
@@ -632,6 +654,7 @@ export default class CxTable extends CortexElement {
     handleGroupValuesChange(): void;
     handlePaginationSizeChange(): void;
     handlePaginationInitialPageChange(): void;
+    search(searchText: string): void;
     private handleSearch;
     handleSearchFieldsChange(): void;
     private handleTableExport;

package/library/packages/atoms/src/components/table/tabulator-tables/core/row/Row.d.ts

@@ -1,4 +1,4 @@
-import { ICell, IColumn, IColumnComponent, IRow, IRowManager } from '../../../../../../../types/src/table';
+import { ICell, IColumn, IColumnComponent, IRow, IRowManager, RowModules } from '../../../../../../../types/src/table';
 import { default as CoreFeature } from '../CoreFeature';
 import { default as RowComponent } from './RowComponent';
 
@@ -7,7 +7,7 @@ export default class Row extends CoreFeature implements IRow {
     data: Record<string, any>;
     type: string;
     element: HTMLElement | false;
-    modules: Record<string, any>;
+    modules: RowModules;
     cells: ICell[];
     height: number;
     heightStyled: string;

package/library/packages/events/src/cx-content-builder-translatable-value-change.d.ts

@@ -0,0 +1,13 @@
+export type CxContentBuilderTranslatableValueChangeEvent = CustomEvent<{
+    language: string;
+    values: Array<{
+        attribute: string;
+        type: 'attribute';
+        value: string;
+    }>;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-content-builder-translatable-value-change': CxContentBuilderTranslatableValueChangeEvent;
+    }
+}

package/library/packages/events/src/cx-table-export.d.ts

@@ -1,7 +1,7 @@
 export type CxTableExportEvent = CustomEvent<{
     data?: unknown[];
     searchValue?: string;
-    type: 'csv' | 'xml' | 'custom';
+    type: 'csv' | 'xml' | 'custom' | 'report';
 }>;
 declare global {
     interface GlobalEventHandlersEventMap {

package/library/packages/events/src/cx-table-save-search-select.d.ts

@@ -0,0 +1,8 @@
+export type CxTableSaveSearchSelectEvent = CustomEvent<{
+    id: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-save-search-select': CxTableSaveSearchSelectEvent;
+    }
+}

package/library/packages/events/src/events.d.ts

@@ -39,6 +39,7 @@ export * from './cx-connected';
 export * from './cx-content-builder-gallery-change';
 export * from './cx-content-builder-page-change';
 export * from './cx-content-builder-page-delete';
+export * from './cx-content-builder-translatable-value-change';
 export * from './cx-copy';
 export * from './cx-corner-position-input-group-change';
 export * from './cx-disconnect';
@@ -120,6 +121,7 @@ export * from './cx-tab-show';
 export * from './cx-table-advanced-search-click';
 export * from './cx-table-export';
 export * from './cx-table-row-action-click';
+export * from './cx-table-save-search-select';
 export * from './cx-time-based-change';
 export * from './cx-time-update';
 export * from './cx-typeface-change';

package/library/packages/molecules/src/data-tab-group/data-tab-group.d.ts

@@ -26,6 +26,7 @@ export default class CxDataTabGroup extends CortexElement {
     hidePanelVariant: TabGroupHidePanelVariant;
     /** Use max panel height. */
     useMaxPanelHeight: boolean;
+    multiLanguage: boolean;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/library/packages/molecules/src/details-group/details-group.d.ts

@@ -16,6 +16,7 @@ export default class CxDetailsGroup extends CortexElement {
     private readonly localize;
     data: DetailsItem[];
     defaultOpenIndexes?: number[];
+    multiLanguage: boolean;
     runFirstUpdated(): void;
     render(): import('lit').TemplateResult<1>;
 }

package/library/packages/molecules/src/list-editor/list-editor.d.ts

@@ -17,6 +17,10 @@ import { default as CxAssetPicker } from '../asset-picker/asset-picker';
 export declare const columnDefaults: {
     resizable: boolean;
 };
+declare enum TabType {
+    General = "general",
+    Translation = "translation"
+}
 /**
  * @summary CxListEditor
  */
@@ -54,6 +58,12 @@ export default class CxListEditor extends CortexElement {
     columns: Array<Record<string, unknown>>;
     noHeader: boolean;
     rowHeight: number;
+    defaultLanguage: string;
+    /**
+     * The list of languages available in the content builder.
+     * This is the list of languages that will be used to store the translatable texts.
+     */
+    supportedLanguages: string[];
     /**
      * The boundary property of the confirm popover's dropdown/dialog popup.
      */
@@ -71,7 +81,9 @@ export default class CxListEditor extends CortexElement {
     isAdding: boolean;
     private columnsMap;
     private sortedEntries;
+    private translatableControls;
     private disableCloseConfigDialog;
+    get tabs(): TabType[];
     handleColumnsChange(): void;
     handleEditedItemChange(): void;
     private readonly hoverMenu;
@@ -84,6 +96,7 @@ export default class CxListEditor extends CortexElement {
     private handleTableRowMoved;
     private handleAssetRequestStatus;
     handleLoadingEventChange(): Promise<void>;
+    private renderControls;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {
@@ -91,3 +104,4 @@ declare global {
         'cx-list-editor': CxListEditor;
     }
 }
+export {};

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

@@ -34,6 +34,10 @@ export default class CxTimeline extends CortexElement {
      * The number of tabs per page. This applies when overflow variant is pagination.
      */
     tabsPerPage: number;
+    /**
+     * Whether to show multi-language.
+     */
+    multiLanguage: boolean;
     /**
      * The minimum width of the tab.
      */

package/library/packages/organisms/src/color-swatch-group/color-swatch-group.d.ts

@@ -62,6 +62,7 @@ export default class CxColorSwatchGroup extends CortexElement {
      * Color codes to show in the swatches
      */
     showCodes: string[];
+    multiLanguage: boolean;
     /**
      * Breakpoints for responsive design
      */

package/library/packages/organisms/src/comment/comment.d.ts

@@ -71,6 +71,19 @@ export default class CxComment extends CortexElement {
      * Whether the time based feature is enabled.
      */
     timeBased: boolean;
+    /**
+     * When true, hides the time based icon button in the comment menu while
+     * still allowing the time based feature to function (e.g. `timeBased`
+     * state is still respected). Useful when the parent wants to enable the
+     * feature without exposing the toggle button to end users.
+     */
+    hideTimeBasedIcon: boolean;
+    /**
+     * When true, hides the fullscreen icon button and prevents entering
+     * fullscreen. `toggleFullscreen()` becomes a no-op when not already
+     * fullscreen, but still allows exiting fullscreen if currently open.
+     */
+    disableFullscreen: boolean;
     /**
      * The time values for the time based feature.
      */

package/library/packages/organisms/src/comment/components/comment-menu/comment-menu.d.ts

@@ -41,6 +41,20 @@ export default class CxCommentMenu extends CortexElement {
      * Whether the time based feature is enabled.
      */
     timeBased: boolean;
+    /**
+     * When true, hides the time based icon button in the menu while still
+     * allowing the time based feature to function (e.g. `timeBased` state
+     * is still respected and `cx-time-based-change` events can still be
+     * emitted programmatically). Set this when the host component wants to
+     * expose the time based feature without showing the toggle button.
+     */
+    hideTimeBasedIcon: boolean;
+    /**
+     * When true, hides the fullscreen icon button and disables fullscreen
+     * toggling entirely. Both the menu button and programmatic calls to
+     * `toggleFullscreen()` become no-ops.
+     */
+    disableFullscreen: boolean;
     private showTextFormats;
     private showLinkPopup;
     private linkTextValue;

package/library/packages/organisms/src/content-builder/components/color-swatch-picker/color-swatch-picker.d.ts

@@ -16,6 +16,10 @@ import { ColorSwatchData } from '../../../../../types/src/color-swatch';
 
 export type CxContentBuilderColorSwatchSelectEvent = CustomEvent<ColorSwatchData | ColorSwatchData[]>;
 export type CxContentBuilderColorSwatchDeleteEvent = CustomEvent<void>;
+declare enum TabType {
+    General = "general",
+    Translation = "translation"
+}
 /**
  * @summary The `cx-color-swatch-picker` component is used to select and manage color swatches in the content builder.
  *
@@ -55,6 +59,15 @@ export default class CxColorSwatchPicker extends CortexElement {
      * Whether the table can be loaded.
      */
     disableTableLoad: boolean;
+    /**
+     * The list of languages available in the content builder.
+     * This is the list of languages that will be used to store the translatable texts.
+     */
+    supportedLanguages: string[];
+    /**
+     * The default language of the content builder.
+     */
+    defaultLanguage: string;
     /**
      * The type of dialog to open since it can be either add new or edit from row selection.
      */
@@ -67,6 +80,10 @@ export default class CxColorSwatchPicker extends CortexElement {
      * The name of the color swatch.
      */
     private dialogName;
+    /**
+     * The translations of the color swatch name.
+     */
+    private dialogNameTranslations;
     /**
      * The palette of the color swatch.
      */
@@ -95,6 +112,7 @@ export default class CxColorSwatchPicker extends CortexElement {
      * The palettes of current color swatches.
      */
     private palettes;
+    get tabs(): TabType[];
     /**
      * Opens the add color dialog.
      */
@@ -122,6 +140,7 @@ export default class CxColorSwatchPicker extends CortexElement {
     handleDataChange(): void;
     runFirstUpdated(): void;
     private handleChangeName;
+    private handleChangeNameTranslation;
     private handleChangePalette;
     private handleCreatePalette;
     private handleColorPickerChange;
@@ -134,6 +153,7 @@ export default class CxColorSwatchPicker extends CortexElement {
      */
     private handleTableRowMoved;
     private handleTableRowDeleted;
+    private renderControls;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {
@@ -145,3 +165,4 @@ declare global {
         'cx-content-builder-color-swatch-select': CxContentBuilderColorSwatchSelectEvent;
     }
 }
+export {};

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

@@ -0,0 +1,19 @@
+import { PropertyConfig } from '../../../../../types/src/content-builder';
+import { CxConfigForm } from '.';
+import { ReactiveController, ReactiveControllerHost, TemplateResult } from 'lit';
+import { TabType } from './config-form';
+
+export declare class ConfigFormController implements ReactiveController {
+    host: ReactiveControllerHost & CxConfigForm;
+    private readonly localize;
+    constructor(host: ReactiveControllerHost & CxConfigForm);
+    hostConnected(): void;
+    private handleStyleChange;
+    private handleAttributeChange;
+    private handlePropertyChange;
+    private handleConfigChange;
+    private renderControl;
+    private renderBasicControl;
+    renderBasicControls(configs: PropertyConfig[], parent?: PropertyConfig, tab?: TabType): TemplateResult<1>;
+    renderTranslationControls(): TemplateResult<1>;
+}

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

@@ -60,9 +60,9 @@ export type CxContentBuilderFormSaveEvent = CustomEvent<{
     isNewTemplate: boolean;
 }>;
 export declare enum TabType {
-    Content = "Content",
-    Effects = "Effects",
-    Styling = "Styling"
+    Content = "content",
+    Effects = "effects",
+    Styling = "styling"
 }
 /**
  * @summary The `cx-config-form` component is used to configure the attributes, properties, styles, and traits of a block in the content builder.
@@ -119,6 +119,7 @@ export default class CxConfigForm extends CortexElement {
         'cx-visually-hidden': typeof CxVisuallyHidden;
     };
     private readonly localize;
+    private readonly configFormController;
     /**
      * The dialog element used to display the configuration manager.
      * This is used to show and hide the configuration manager dialog.
@@ -162,6 +163,23 @@ export default class CxConfigForm extends CortexElement {
      * This is used to validate the template id when the user is saving the configuration.
      */
     templateId: string;
+    /**
+     * The list of languages available in the content builder.
+     * This is the list of languages that will be used to store the translatable texts.
+     */
+    supportedLanguages: string[];
+    /**
+     * The values of the translatable controls.
+     * This is used to store the values of the translatable controls.
+     * @default []
+     */
+    translatableControlValues: Record<string, Record<string, string>>;
+    /**
+     * The default language of the translatable controls.
+     * This is used to store the default language of the translatable controls.
+     * @default 'en'
+     */
+    defaultLanguage: string;
     /**
      * The boundary property of the confirm popover's dropdown/dialog popup.
      */
@@ -212,6 +230,11 @@ export default class CxConfigForm extends CortexElement {
      * @default []
      */
     traits: PropertyConfig[];
+    /**
+     * The list of input controls to render in the configuration form.
+     * These are the input controls that will support multiple languages.
+     */
+    translatableControls: PropertyConfig[];
     /**
      * The name of the block being configured.
      * This is used to display the block name in the dialog header.
@@ -259,6 +282,7 @@ export default class CxConfigForm extends CortexElement {
      * @default false
      */
     isAfterShow: boolean;
+    sortedLanguages: string[];
     /**
      * Whether the template is editable.
      * This is used to determine if the user can save the settings as a template.
@@ -282,10 +306,7 @@ export default class CxConfigForm extends CortexElement {
      */
     get tabMap(): Record<string, TabType>;
     handleTabMapChange(): Promise<void>;
-    private handleAttributeChange;
-    private handleStyleChange;
-    private handlePropertyChange;
-    private handleConfigChange;
+    handleSupportedLanguagesChange(): Promise<void>;
     private handleClose;
     private handleAfterShow;
     private handleAfterHide;
@@ -299,7 +320,6 @@ export default class CxConfigForm extends CortexElement {
     private handleFormSubmit;
     show(): void;
     hide(): void;
-    private renderControls;
     private renderTemplateForm;
     render(): import('lit').TemplateResult<1>;
 }