@orangelogic/design-system 2.75.0 → 2.76.0

package/library/components/atoms.js

@@ -70,7 +70,7 @@ import { default as ka } from "./stepper.js";
 import { default as Ea } from "./switch.js";
 import { default as La } from "./tab.js";
 import { C as ja } from "../chunks/tab-group.G24wrely.js";
-import { C as za } from "../chunks/table.p6kMJx5q.js";
+import { C as za } from "../chunks/table.D3Pc7KGF.js";
 import { default as qa } from "./tab-panel.js";
 import { default as Ka } from "./tag.js";
 import { default as Wa } from "./textarea.js";

package/library/components/color-swatch-group.js

@@ -1,10 +1,10 @@
 import "./space.js";
-import "../chunks/table.p6kMJx5q.js";
+import "../chunks/table.D3Pc7KGF.js";
 import "../chunks/typography.oDzoLbZS.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/color-swatch.BuUP5yG4.js";
 import "../chunks/component.styles.DMSLciL5.js";
-import { C as w } from "../chunks/color-swatch-group.DLgAN7p7.js";
+import { C as w } from "../chunks/color-swatch-group.BgI-HWS2.js";
 import "../chunks/content-builder.B4Tqoc6M.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";

package/library/components/list-editor.js

@@ -9,7 +9,7 @@ import "./radio.js";
 import "./radio-group.js";
 import "./select.js";
 import "./space.js";
-import "../chunks/table.p6kMJx5q.js";
+import "../chunks/table.D3Pc7KGF.js";
 import "../chunks/typography.oDzoLbZS.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "./dynamic-select.js";
@@ -18,7 +18,7 @@ import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";
 import "../chunks/i18n.BUW7B9hr.js";
 import "../chunks/watch.BCJD77bD.js";
-import { c as E, C as F } from "../chunks/list-editor.0Yd4kvV6.js";
+import { c as E, C as F } from "../chunks/list-editor.DpBm_m_b.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";

package/library/components/masonry.js

@@ -182,7 +182,7 @@ let r = class extends w {
     this.destroySortable(), this.sortable && this.initSortable();
   }
   connectedUpdatedCallback() {
-    this.sortable && this.initSortable();
+    this.handleSortableChange();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.destroySortable();

package/library/components/molecules.js

@@ -6,7 +6,7 @@ import { default as u } from "./corner-position-input-group.js";
 import { C as m } from "../chunks/cropper.D1lO3pl-.js";
 import { default as i } from "./dynamic-select.js";
 import { C as c } from "../chunks/folder-select.BqLmIlj6.js";
-import { C as P } from "../chunks/list-editor.0Yd4kvV6.js";
+import { C as P } from "../chunks/list-editor.DpBm_m_b.js";
 import { default as I } from "./masonry.js";
 import { default as y } from "./padding-input-group.js";
 import { default as w } from "./position-picker.js";

package/library/components/organisms.js

@@ -1,5 +1,5 @@
 import { default as a } from "./asset-link-format.js";
-import { C as t } from "../chunks/color-swatch-group.DLgAN7p7.js";
+import { C as t } from "../chunks/color-swatch-group.BgI-HWS2.js";
 import { C } from "../chunks/file-on-demand.BJZ5E8XT.js";
 export {
   a as CxAssetLinkFormat,

package/library/components/table.js

@@ -10,7 +10,7 @@ import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.DMSLciL5.js";
 import "../chunks/overlayscrollbars.XhGWx9Zk.js";
 import "../chunks/pagination.BXCr_5om.js";
-import { A as F, i as P, j as S, d as g, g as v, b as y, k as A, l as D, c as I, a0 as f, a1 as h, D as E, m as G, E as j, n as H, F as K, o as L, p as V, q as k, G as q, r as B, s as J, t as N, I as O, u as Q, K as U, v as W, M as X, w as Y, x as Z, y as _, z as $, B as oo, J as eo, L as ao, P as so, e as lo, N as to, h as uo, O as ro, Q as Mo, U as io, V as po, f as mo, R as no, X as Co, W as Ro, S as co, Y as bo, Z as wo, T as To, a as xo, _ as zo, $ as Fo, C as Po } from "../chunks/table.p6kMJx5q.js";
+import { A as F, i as P, j as S, d as g, g as v, b as y, k as A, l as D, c as I, a0 as f, a1 as h, D as E, m as G, E as j, n as H, F as K, o as L, p as V, q as k, G as q, r as B, s as J, t as N, I as O, u as Q, K as U, v as W, M as X, w as Y, x as Z, y as _, z as $, B as oo, J as eo, L as ao, P as so, e as lo, N as to, h as uo, O as ro, Q as Mo, U as io, V as po, f as mo, R as no, X as Co, W as Ro, S as co, Y as bo, Z as wo, T as To, a as xo, _ as zo, $ as Fo, C as Po } from "../chunks/table.D3Pc7KGF.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.BUW7B9hr.js";
 import "../chunks/watch.BCJD77bD.js";

package/library/components/types.js

@@ -71,7 +71,7 @@ import { default as aqt } from "./stepper.js";
 import Kb from "./switch.js";
 import G2 from "./tab.js";
 import { C as K2, T as e9, a as t9, b as n9, g as SO } from "../chunks/tab-group.G24wrely.js";
-import { C as r9 } from "../chunks/table.p6kMJx5q.js";
+import { C as r9 } from "../chunks/table.D3Pc7KGF.js";
 import i9 from "./tab-panel.js";
 import { default as cqt } from "./tag.js";
 import _K from "./textarea.js";
@@ -112,7 +112,7 @@ import { H as fR } from "../chunks/slot.j5oheLJC.js";
 import { a as iVt, g as oVt } from "../chunks/slot.j5oheLJC.js";
 import { b as NO, G as gh, c as Gd, T as vR, d as fn, i as yR, g as eY, t as LO, u as tY, f as y1, h as nY, F as Cf, M as Vv } from "../chunks/string.B_rEG27K.js";
 import { a as sVt, e as cVt, p as lVt, s as dVt, l as uVt, j as pVt, k as hVt, m as gVt } from "../chunks/string.B_rEG27K.js";
-import { a as l9, u as Ju, I as bR, C as rY } from "../chunks/list-editor.0Yd4kvV6.js";
+import { a as l9, u as Ju, I as bR, C as rY } from "../chunks/list-editor.DpBm_m_b.js";
 import iY from "./bicolor-picker.js";
 import wR from "./border-input-group.js";
 import { C as fVt } from "../chunks/color-swatch.BuUP5yG4.js";
@@ -165,8 +165,8 @@ import { c as mg } from "../chunks/math.DqTA6ya4.js";
 import { b as KO, e as BY } from "../chunks/number.CjNxU7Xs.js";
 import { a as YVt, c as XVt, f as JVt, r as ZVt, s as QVt } from "../chunks/number.CjNxU7Xs.js";
 import { t as DR } from "../chunks/event-options.CYHYGOd8.js";
-import { a as Uw } from "../chunks/color-swatch-group.DLgAN7p7.js";
-import { C as tWt } from "../chunks/color-swatch-group.DLgAN7p7.js";
+import { a as Uw } from "../chunks/color-swatch-group.BgI-HWS2.js";
+import { C as tWt } from "../chunks/color-swatch-group.BgI-HWS2.js";
 import { t as zY } from "../chunks/converters.DkDtLstb.js";
 import { i as FY } from "../chunks/user-agent.D9aPuOyL.js";
 import { a as MR, U as f9 } from "../chunks/url.LjsR2sB5.js";

package/library/package.json

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

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

@@ -367,6 +367,10 @@ export default class CxTable extends CortexElement {
      * Enabling the groupUpdateOnCellEdit option will cause a row to be regrouped when the cell it is grouped by is edited.
      */
     groupUpdateOnCellEdit: boolean;
+    /**
+     * Load-more state keyed by the serialized group path returned by `group.getPathKey()`.
+     */
+    groupLoadMoreMeta: Options['groupLoadMoreMeta'];
     /**
      * If true, the table will be rendered as a tree.
      */
@@ -711,6 +715,7 @@ export default class CxTable extends CortexElement {
     handleGroupByChange(): void;
     handleGroupHeaderChange(): void;
     handleGroupValuesChange(): void;
+    handleGroupLoadMoreMetaChange(): void;
     handlePaginationSizeChange(): void;
     handlePaginationInitialPageChange(): void;
     handleLoadingChange(): void;

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

@@ -21,6 +21,7 @@ declare class TabulatorFull extends Tabulator implements ITabulatorFull {
      * You can use the setGroupStartOpen function to change the default open state of groups. This function has one argument and takes the same values as passed to the groupStartOpen setup option.
      * Note: If you use the setGroupStartOpen or setGroupHeader before you have set any groups on the table, the table will not update until the setGroupBy function is called.
      */
+    setGroupLoadMoreMeta: (meta: Options['groupLoadMoreMeta']) => void;
     setGroupStartOpen: (values: Options['groupStartOpen']) => void;
     setGroupValues: (data: GroupValuesArg) => void;
     /**

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

@@ -1,4 +1,5 @@
 import { default as CxIconButton } from '../../../../icon-button/icon-button.ts';
+import { GroupLoadMoreEventPayload, GroupLoadMoreState } from '../../../../../../../types/src/table';
 import { default as Row } from '../../core/row/Row';
 import { default as GroupComponent } from './GroupComponent';
 import { default as GroupRows } from './GroupRows';
@@ -34,6 +35,8 @@ export default class Group {
     visible: boolean | ((key: any, count: number, data: any[], component: GroupComponent) => boolean);
     component: GroupComponent | null;
     addBindingsFlag?: boolean;
+    private _loadMoreRow;
+    private _loadMoreStateKey;
     constructor(groupManager: GroupRows, parent: Group | false, level: number, key: any, field: string | false, generator: GroupGenerator, oldGroup: Group | false);
     wipe(elementsOnly?: boolean): void;
     createElements(): void;
@@ -51,6 +54,11 @@ export default class Group {
     conformRowData(data: Record<string, any>): Record<string, any>;
     removeRow(row: Row): void;
     removeGroup(group: Group): void;
+    getPathKey(): string;
+    getLoadMoreState(): GroupLoadMoreState | undefined;
+    getGroupLoadMoreEventPayload(): GroupLoadMoreEventPayload;
+    generateLoadMoreRow(): Row | false;
+    private applyGroupIndent;
     getHeadersAndRows(): Array<Group | Row>;
     getData(visible?: boolean, transform?: string): any[];
     getRowCount(): number;

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

@@ -1,4 +1,4 @@
-import { IGroupComponent, ITabulator, ScrollToRowPosition } from '../../../../../../../types/src/table';
+import { GroupLoadMorePathSegment, IGroupComponent, ITabulator, ScrollToRowPosition } from '../../../../../../../types/src/table';
 import { default as Group } from './Group';
 
 export default class GroupComponent implements IGroupComponent {
@@ -11,6 +11,8 @@ export default class GroupComponent implements IGroupComponent {
     getRows(): any[];
     getSubGroups(): any[];
     getParentGroup(): GroupComponent | false;
+    getPath(): GroupLoadMorePathSegment[];
+    getPathKey(): string;
     isVisible(): boolean;
     show(): void;
     hide(): void;

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

@@ -0,0 +1,7 @@
+import { GroupLoadMoreEventPayload, GroupLoadMoreMeta, GroupLoadMorePathSegment, GroupLoadMoreState } from '../../../../../../../types/src/table';
+import { default as Group } from './Group';
+
+export declare function getGroupPath(group: Group): GroupLoadMorePathSegment[];
+export declare function getGroupPathKey(path: GroupLoadMorePathSegment[]): string;
+export declare function getGroupLoadMoreState(meta: GroupLoadMoreMeta | undefined, pathKey: string): GroupLoadMoreState | undefined;
+export declare function getGroupLoadMoreEventPayload(group: Group): GroupLoadMoreEventPayload;

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

@@ -1,3 +1,4 @@
+import { GroupLoadMoreMeta } from '../../../../../../../types/src/table';
 import { default as Module } from '../../core/Module';
 import { default as Row } from '../../core/row/Row';
 import { default as RowComponent } from '../../core/row/RowComponent';
@@ -38,6 +39,7 @@ export default class GroupRows extends Module {
     setGroupStartOpen(values: GroupStartOpen | GroupStartOpen[]): void;
     private updateGroupVisibility;
     setGroupHeader(values: GroupHeaderGenerator | GroupHeaderGenerator[] | false): void;
+    setGroupLoadMoreMeta(meta: GroupLoadMoreMeta | undefined): void;
     userGetGroups(_values?: boolean): GroupComponent[];
     userGetGroup(key: any): GroupComponent | false;
     private findGroupByKey;

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

@@ -903,6 +903,7 @@ export interface ITabulatorFull extends ITabulator {
     setSheetData: (lookup: string | SpreadsheetComponent, data: unknown[][]) => void;
     setGroupBy: (groups: GroupArg) => void;
     setGroupHeader: (values: Options['groupHeader']) => void;
+    setGroupLoadMoreMeta: (meta: GroupLoadMoreMeta | undefined) => void;
     setGroupStartOpen: (values: Options['groupStartOpen']) => void;
     setGroupValues: (data: GroupValuesArg) => void;
     setPageSize: (size: number | true) => void;
@@ -957,11 +958,27 @@ export interface ISheetComponent {
     setRows(rows: number): unknown;
     setTitle(title: string): unknown;
 }
+export interface GroupLoadMorePathSegment {
+    field: string | false;
+    key: unknown;
+}
+export interface GroupLoadMoreState {
+    hasMore: boolean;
+    loading?: boolean;
+}
+export type GroupLoadMoreMeta = Record<string, GroupLoadMoreState>;
+export interface GroupLoadMoreEventPayload {
+    path: GroupLoadMorePathSegment[];
+    pathKey: string;
+    rowCount: number;
+}
 export interface IGroupComponent {
     getElement(): HTMLElement | false;
     getField(): string | false;
     getKey(): unknown;
     getParentGroup(): IGroupComponent | false;
+    getPath(): GroupLoadMorePathSegment[];
+    getPathKey(): string;
     getRows(): IRowComponent[];
     getSubGroups(): IGroupComponent[];
     getTable(): unknown;
@@ -1310,6 +1327,8 @@ export interface OptionsRowGrouping {
     groupToggleElement?: 'arrow' | 'header' | false;
     /** show/hide column calculations when group is closed. */
     groupClosedShowCalcs?: boolean;
+    /** Load-more state keyed by serialized group path. */
+    groupLoadMoreMeta?: GroupLoadMoreMeta;
     groupUpdateOnCellEdit?: boolean;
 }
 export type FilterPredicate = (filterVal: any, rowVal: any, rowData: any, filterParams: FilterParams) => boolean;
@@ -2824,6 +2843,7 @@ export interface EventCallBackMethods {
     movableRowsElementDrop: (event: UIEvent, element: Element, row: IRowComponent) => void;
     dataGrouping: () => void;
     dataGrouped: (groups: IGroupComponent[]) => void;
+    groupLoadMore: (detail: GroupLoadMoreEventPayload) => void;
     groupVisibilityChanged: (group: IGroupComponent, visible: boolean) => void;
     localized: (locale: string, lang: any) => void;
     renderStarted: () => void;
@@ -2992,6 +3012,7 @@ export interface HeaderFilterFunc {
 }
 export type LangObject = Record<string, any>;
 export type TableSelector = string | HTMLElement | ITabulator | TableSelector[];
+export declare const DEFAULT_GROUP_INDENT = 36;
 /**
  * @typedef {Object} TrafficFormatterParams
  * @property {Record<any, string>} [colorMap] - Record mapping cell values to colors. Used when the cell value should be mapped to a specific color.

package/package.json

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