@orangelogic/design-system 2.70.0 → 2.71.0

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

@@ -2,6 +2,7 @@ import { default as CortexElement } from '../../../../base/src/cortex-element.ts
 import { DialogDividerPosition } from '../../../../types/src/dialog';
 import { default as Modal } from '../../../../utils/src/custom-element/modal';
 import { CSSResultGroup, PropertyValues } from 'lit';
+import { ScrollbarsAutoHideBehavior } from 'overlayscrollbars';
 import { default as CxDivider } from '../divider/divider';
 import { default as CxIconButton } from '../icon-button/icon-button';
 import { default as CxPopup } from '../popup/popup';
@@ -103,8 +104,17 @@ export default class CxDialog extends CortexElement {
     /**
      * Enables the overlay scrollbar plugin, which provides a custom scrollbar that does not take up any content space.
      * This is useful for dialogs that contain scrollable content.
+     * Note that the scrollbar will only be visible when the content is overflowing.
      */
     useOverlayScrollbar: boolean;
+    /**
+     * The `autoHide` behavior of the overlay scrollbar. This controls when the scrollbar will be hidden. It can be set to 'scroll' (the default), which will hide the scrollbar when not scrolling, 'leave' which will hide the scrollbar when not scrolling and the mouse is not over the scrollable area, or 'never' which will never hide the scrollbar.
+     */
+    overlayScrollbarAutoHide: ScrollbarsAutoHideBehavior;
+    /**
+     * The `autoHideDelay` of the overlay scrollbar. This controls how long to wait before hiding the scrollbar when `autoHide` is set to 'scroll' or 'leave'. The default is 1000ms.
+     */
+    overlayScrollbarAutoHideDelay: number;
     /**
      * Preventing the dialog from closing when clicking the overlay.
      */

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

@@ -1,5 +1,6 @@
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
 import { ButtonVariant } from '../../../../types/src/button';
+import { IconButtonSize } from '../../../../types/src/icon-button';
 import { CSSResultGroup } from 'lit';
 import { default as CxIcon } from '../icon/icon';
 import { default as CxSpinner } from '../spinner/spinner';
@@ -73,7 +74,7 @@ export default class CxIconButton extends CortexElement {
     /**
      * The button's size.
      */
-    size: 'small' | 'medium' | 'large' | 'x-large';
+    size: IconButtonSize;
     /**
      * Draws an outlined button.
      */

package/library/packages/atoms/src/components/input/auto-grow-controller.d.ts

@@ -0,0 +1,23 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+interface AutoGrowHost extends ReactiveControllerHost {
+    autoGrow: boolean;
+    autoGrowMirror?: HTMLSpanElement;
+    input: HTMLInputElement;
+    placeholder: string;
+    type: string;
+    value: string;
+}
+/**
+ * Reactive controller that keeps `cx-input` width in sync with its content when auto-grow is enabled.
+ */
+export declare class AutoGrowController implements ReactiveController {
+    private readonly host;
+    constructor(host: AutoGrowHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    sync(): void;
+    private measureWidth;
+}
+export {};

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

@@ -38,6 +38,7 @@ import { default as CxIcon } from '../icon/icon';
  * @csspart file-button - The 'Choose file' button.
  * @csspart file-result - The text that displays the selected file name.
  * @csspart character-count-text - The text that displays the character count.
+ * @cssproperty [--cx-input-auto-grow-min-width=0] - The minimum width used when `auto-grow` is enabled.
  */
 export default class CxInput extends CortexElement implements CortexFormControl {
     #private;
@@ -48,7 +49,9 @@ export default class CxInput extends CortexElement implements CortexFormControl
     private readonly formControlController;
     private readonly hasSlotController;
     private readonly localize;
+    private readonly autoGrowController;
     input: HTMLInputElement;
+    autoGrowMirror: HTMLSpanElement;
     inputContainer: HTMLElement;
     labelElement: HTMLElement;
     private hasFocus;
@@ -66,6 +69,11 @@ export default class CxInput extends CortexElement implements CortexFormControl
     name: string;
     /** The current value of the input, submitted as a name/value pair with form data. */
     value: string;
+    /**
+     * When enabled, the input width grows and shrinks with its current value.
+     * This only applies to non-file input types.
+     */
+    autoGrow: boolean;
     /** If used with mask, this stores the input's value, with fixed strings omitted. */
     unmaskedValue: string;
     /** The default value of the form control. Primarily used for resetting the form control. */
@@ -215,6 +223,7 @@ export default class CxInput extends CortexElement implements CortexFormControl
     handleDisabledChange(): void;
     handleStepChange(): void;
     handleValueChange(): Promise<void>;
+    handleAutoGrowChange(): Promise<void>;
     /** Sets focus on the input. */
     focus(options?: FocusOptions): void;
     /** Removes focus from the input. */

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

@@ -1,8 +1,11 @@
+import { default as CxSpace } from '../space/space.ts';
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { IconButtonSize } from '../../../../types/src/icon-button';
 import { PaginationCounter } from '../../../../types/src/pagination';
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { default as CxButton } from '../button/button';
 import { default as CxIconButton } from '../icon-button/icon-button';
+import { default as CxInput } from '../input/input';
 import { default as CxOption } from '../option/option';
 import { default as CxSelect } from '../select/select';
 import { default as CxTooltip } from '../tooltip/tooltip';
@@ -10,6 +13,7 @@ import { default as CxTypography } from '../typography/typography';
 
 /**
  * @summary Pagination component displays the current page and allows the user to navigate through pages.
+ * @description Set `show-pagination-input` to render an editable page input in page counters. Leave it unset to keep the original plain-text counters. Use `back-icon-name` and `next-icon-name` to override the previous/next icon-button glyphs (see the icon component for available names). Use `icon-button-size` for all navigation icon buttons (`small`, `medium`, `large`, `x-large`).
  *
  * @cssproperty --width - The width of the select
  *
@@ -22,8 +26,10 @@ export default class CxPagination extends CortexElement {
     static readonly dependencies: {
         'cx-button': typeof CxButton;
         'cx-icon-button': typeof CxIconButton;
+        'cx-input': typeof CxInput;
         'cx-option': typeof CxOption;
         'cx-select': typeof CxSelect;
+        'cx-space': typeof CxSpace;
         'cx-tooltip': typeof CxTooltip;
         'cx-typography': typeof CxTypography;
     };
@@ -63,8 +69,26 @@ export default class CxPagination extends CortexElement {
      * The type of pagination counter to display.
      */
     paginationCounter: PaginationCounter;
+    /**
+     * Whether to show an editable page input in page counters.
+     */
+    showPaginationInput: boolean;
+    /**
+     * Icon name for the previous (back) navigation button.
+     */
+    backIconName: string;
+    /**
+     * Icon name for the next navigation button.
+     */
+    nextIconName: string;
+    /**
+     * Size passed to each `cx-icon-button` in the navigation controls (first, previous, next, last).
+     */
+    iconButtonSize: IconButtonSize;
     private _pageIndex;
     private _pageCount;
+    /** Tracks the user-entered page value before committing navigation. */
+    private _pageInputValue;
     get pageIndex(): number;
     set pageIndex(value: number);
     get pageStart(): number;
@@ -77,14 +101,19 @@ export default class CxPagination extends CortexElement {
     private handleBack;
     private handleForward;
     private handleLast;
+    private commitPageInputValue;
+    private handlePageInput;
+    private handlePageInputKeyDown;
+    private handlePageInputBlur;
+    private renderCounterInput;
     handleCountChange(): Promise<void>;
     handlePageChange(): void;
     handlePageSizeChange(): void;
     private handlePageClick;
     private renderPageButton;
     private renderPageButtons;
-    renderPageCount(): TemplateResult<1>;
-    renderRowCount(): TemplateResult<1>;
+    private renderPageCount;
+    private renderRowCount;
     render(): TemplateResult;
 }
 declare global {

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

@@ -209,7 +209,15 @@ export default class CxTable extends CortexElement {
      */
     canExportCustom: boolean;
     canSaveReport: boolean;
+    /**
+     * Endpoint URL for the saved search dropdown when `show-saved-search` is enabled.
+     * When set (non-empty), it takes precedence over `savedSearchItems` and the dropdown loads paged data via `fetch`.
+     */
     savedSearchURL: string;
+    /**
+     * Static saved searches for the toolbar dropdown when `show-saved-search` is enabled and `savedSearchURL` is empty.
+     * Each item uses `{ recordID, name }` (see `SavedSearchItem`).
+     */
     savedSearchItems: SavedSearchItem[];
     /**
      * The parameter name for the page size for the saved search dropdown
@@ -557,12 +565,16 @@ export default class CxTable extends CortexElement {
      * Whether to show the pagination buttons.
      */
     showPaginationButtons: boolean;
+    /**
+     * Whether to hide an editable input for the current page in the pagination counter.
+     */
+    hidePaginationInput: boolean;
     /**
      * Controls page size options. Either:
      * - true: Page size options will be multiples of the current page size.
      * - array: Page size options will be the numbers in the array. If 'true' is in the array, 'All' will be added to the list of options.
      */
-    paginationSizeSelector: true | Array<number | boolean> | undefined;
+    pageSizeOptions: true | Array<number | boolean> | undefined;
     /**
      * When using the addRow function on a paginated table, rows will be added relative to the current page (ie to the top or bottom of the current page), with overflowing rows being shifted onto the next page.
      *

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Page/Page.d.ts

@@ -4,7 +4,7 @@ import { default as Module } from '../../core/Module';
 import { default as Tabulator } from '../../core/Tabulator';
 
 export default class Page extends Module implements IPage {
-    static moduleName: string;
+    static readonly moduleName = "page";
     paginationElement: CxPagination;
     element: HTMLElement | null;
     size: number | true;
@@ -44,7 +44,7 @@ export default class Page extends Module implements IPage {
     /**
      * Pagination is mounted on `table.toolbar` (outside Tabulator's root element).
      * Tabulator.destroy() only clears the table element, so we must detach on destroy
-     * or a full re-init (e.g. paginationSizeSelector change) leaves duplicate cx-pagination nodes.
+     * or a full re-init (e.g. pageSizeOptions change) leaves duplicate cx-pagination nodes.
      */
     cleanup(): void;
     initializePaginator(): void;

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

@@ -0,0 +1,7 @@
+/** Sizes supported by `cx-icon-button`. */
+export declare enum IconButtonSize {
+    Large = "large",
+    Medium = "medium",
+    Small = "small",
+    XLarge = "x-large"
+}

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

@@ -1217,7 +1217,7 @@ export interface OptionsPagination {
      *
      *  When using the page size selector like this, if you use the setPageSize function to set the page size to a value not in the list, the list will be regenerated using the new page size as the starting valuer
      */
-    paginationSizeSelector?: true | number[] | any[];
+    pageSizeOptions?: true | number[] | any[];
     /** By default the pagination controls are added to the footer of the table. If you wish the controls to be created in another element pass a DOM node or a CSS selector for that element to the paginationElement option. */
     paginationElement?: HTMLElement | string;
     /**
@@ -1270,6 +1270,8 @@ export interface OptionsPagination {
     paginationShowLast?: boolean;
     /** Whether to show the pagination buttons. */
     showPaginationButtons?: boolean;
+    /** Whether to show an editable input for the current page in the pagination counter. */
+    showPaginationInput?: boolean;
 }
 export type GroupArg = string | string[] | ((data: any) => any) | Array<string | ((data: any) => any)>;
 export interface OptionsRowGrouping {

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

@@ -388,8 +388,8 @@ export interface Translation extends DefaultTranslation {
     interpretTextAs: string;
     itCanTakeAFewMinutesForThisSettingToTakeEffect: string;
     italic: string;
-    itemOfTotal: (curr: number, total: number) => string;
-    itemRangeOfTotal: (start: number, end: number, total: number) => string;
+    itemOfTotal: (curr: number | string, total: number) => string;
+    itemRangeOfTotal: (start: number | string, end: number | string, total: number) => string;
     itemsGap: string;
     jump: string;
     justify: string;

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

@@ -188,7 +188,7 @@
         /**
           * The button's size.
         */
-        size?: 'small' | 'medium' | 'large' | 'x-large';
+        size?: 'large' | 'medium' | 'small' | 'x-large';
         /**
           * Draws an outlined button.
         */
@@ -615,6 +615,10 @@
           * The current value of the input, submitted as a name/value pair with form data.
         */
         value?: string;
+        /**
+          * When enabled, the input width grows and shrinks with its current value. This only applies to non-file input types.
+        */
+        autoGrow?: boolean;
         /**
           * If used with mask, this stores the input's value, with fixed strings omitted.
         */
@@ -1956,9 +1960,17 @@
         */
         dividerPosition?: 'both' | 'footer' | 'header' | 'none';
         /**
-          * Enables the overlay scrollbar plugin, which provides a custom scrollbar that does not take up any content space. This is useful for dialogs that contain scrollable content.
+          * Enables the overlay scrollbar plugin, which provides a custom scrollbar that does not take up any content space. This is useful for dialogs that contain scrollable content. Note that the scrollbar will only be visible when the content is overflowing.
         */
         useOverlayScrollbar?: boolean;
+        /**
+          * The `autoHide` behavior of the overlay scrollbar. This controls when the scrollbar will be hidden. It can be set to 'scroll' (the default), which will hide the scrollbar when not scrolling, 'leave' which will hide the scrollbar when not scrolling and the mouse is not over the scrollable area, or 'never' which will never hide the scrollbar.
+        */
+        overlayScrollbarAutoHide?: 'scroll' | 'never' | 'move' | 'leave';
+        /**
+          * The `autoHideDelay` of the overlay scrollbar. This controls how long to wait before hiding the scrollbar when `autoHide` is set to 'scroll' or 'leave'. The default is 1000ms.
+        */
+        overlayScrollbarAutoHideDelay?: number;
         /**
           * Preventing the dialog from closing when clicking the overlay.
         */
@@ -2746,7 +2758,7 @@
         /**
           * The spacing between child elements
         */
-        spacing?: 'small' | 'medium' | 'large' | 'x-large' | 'x-small' | '3x-small' | '2x-small' | '2x-large' | '3x-large' | '4x-large';
+        spacing?: 'small' | 'medium' | 'large' | 'x-small' | 'x-large' | '3x-small' | '2x-small' | '2x-large' | '3x-large' | '4x-large';
         /**
           * The wrap behavior of the container.
         */
@@ -3379,6 +3391,22 @@
           * The type of pagination counter to display.
         */
         paginationCounter?: 'both' | 'pages' | 'rows';
+        /**
+          * Whether to show an editable page input in page counters.
+        */
+        showPaginationInput?: boolean;
+        /**
+          * Icon name for the previous (back) navigation button.
+        */
+        backIconName?: string;
+        /**
+          * Icon name for the next navigation button.
+        */
+        nextIconName?: string;
+        /**
+          * Size passed to each `cx-icon-button` in the navigation controls (first, previous, next, last).
+        */
+        iconButtonSize?: 'large' | 'medium' | 'small' | 'x-large';
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */
@@ -4416,11 +4444,11 @@
         */
         canSaveReport?: boolean;
         /**
-          * 
+          * Endpoint URL for the saved search dropdown when `show-saved-search` is enabled. When set (non-empty), it takes precedence over `savedSearchItems` and the dropdown loads paged data via `fetch`.
         */
         savedSearchUrl?: string;
         /**
-          * 
+          * Static saved searches for the toolbar dropdown when `show-saved-search` is enabled and `savedSearchURL` is empty. Each item uses `{ recordID, name }` (see `SavedSearchItem`).
         */
         savedSearchItems?: CxTableSavedSearchItem[];
         /**
@@ -4687,10 +4715,14 @@
           * Whether to show the pagination buttons. <br/> Whether to show the pagination buttons.
         */
         showPaginationButtons?: boolean;
+        /**
+          * Whether to hide an editable input for the current page in the pagination counter.
+        */
+        hidePaginationInput?: boolean;
         /**
           * Controls page size options. Either: - true: Page size options will be multiples of the current page size. - array: Page size options will be the numbers in the array. If 'true' is in the array, 'All' will be added to the list of options.
         */
-        paginationSizeSelector?: any | number | any[];
+        pageSizeOptions?: any | number | any[];
         /**
           * When using the addRow function on a paginated table, rows will be added relative to the current page (ie to the top or bottom of the current page), with overflowing rows being shifted onto the next page. <br/> If you would prefer rows to be added relative to the table (firs/last page) then you can use the paginationAddRow option. it can take one of two values: <br/> page - add rows relative to current page (default) table - add rows relative to the table
         */
@@ -6224,7 +6256,7 @@
         /**
           * The spacing between items in the masonry layout. This can be set to one of the predefined spacing values.
         */
-        spacing?: 'small' | 'medium' | 'large' | 'x-large' | 'x-small' | '3x-small' | '2x-small' | '2x-large' | '3x-large' | '4x-large';
+        spacing?: 'small' | 'medium' | 'large' | 'x-small' | 'x-large' | '3x-small' | '2x-small' | '2x-large' | '3x-large' | '4x-large';
         /**
           * The key to use for the id of the items in the masonry layout.
         */

package/library/utils.js

@@ -1,4 +1,4 @@
-import { C as s, D as t, H as o, P as r, m as i, e as l, f as n, u as m, x as p, g as c, h as g, p as d, d as f, i as x, o as u, j as C, k as A, l as T, y as I, r as E, v, s as y, q as S, n as L, t as R, w as F } from "./chunks/index.CmVKj_wl.js";
+import { C as s, D as t, H as o, P as r, m as i, e as l, f as n, u as m, x as p, g as c, h as g, p as d, d as f, i as x, o as u, j as C, k as A, l as T, y as I, r as E, v, s as y, q as S, n as L, t as R, w as F } from "./chunks/index.xnuklZH8.js";
 import { l as b, f as h, g as D, j as P, i as _, e as B, k as M, m as O, h as w, r as H } from "./chunks/content-builder.B4Tqoc6M.js";
 import { e as G, a as N, f as X, g as U, d as z, b as j, c as K, i as W, p as Z, s as q } from "./chunks/browser.BHOCIF_A.js";
 import { d as J, C as Q, e as $, H as aa, R as ea, c as sa, h as ta, f as oa, g as ra, l as ia, p as la, a as na, b as ma } from "./chunks/color.vLD2sNTs.js";
@@ -11,7 +11,7 @@ import { d as Fa } from "./chunks/default-value.COZopaet.js";
 import { d as ba } from "./chunks/drag.DXEXVXPv.js";
 import { w as Da } from "./chunks/event.mFzZi4sr.js";
 import { F as _a, c as Ba, f as Ma, v as Oa, a as wa } from "./chunks/form.DgwYWi0O.js";
-import { L as ka, r as Ga } from "./chunks/i18n.C0iakJkV.js";
+import { L as ka, r as Ga } from "./chunks/i18n.BU7mYVLM.js";
 import { c as Xa } from "./chunks/math.DqTA6ya4.js";
 import { g as za, l as ja, s as Ka, u as Wa } from "./chunks/scroll.xtO5yojm.js";
 import { H as qa, a as Ya, g as Ja } from "./chunks/slot.j5oheLJC.js";

package/package.json

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