@xplortech/apollo-core 2.5.0 → 2.7.0

package/dist/types/components/{xpl-table-header → xpl-table/xpl-table-header}/table-header.stories.d.ts

@@ -1,6 +1,13 @@
 declare const _default: {
     title: string;
     component: string;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
     argTypes: {
         firstCellType: {
             control: "select";
@@ -16,9 +23,6 @@ declare const _default: {
         firstCellWidth: {
             control: "number";
         };
-        firstCellSortable: {
-            control: "boolean";
-        };
         secondCellType: {
             control: "select";
             options: string[];
@@ -33,9 +37,6 @@ declare const _default: {
         secondCellWidth: {
             control: "number";
         };
-        secondCellSortable: {
-            control: "boolean";
-        };
         thirdCellType: {
             control: "select";
             options: string[];
@@ -50,49 +51,45 @@ declare const _default: {
         thirdCellWidth: {
             control: "number";
         };
-        thirdCellSortable: {
-            control: "boolean";
-        };
     };
     tags: string[];
 };
 export default _default;
 export declare const TableHeader: {
-    ({ firstCellType, firstCellLabel, firstCellIcon, firstCellWidth, firstCellSortable, secondCellType, secondCellLabel, secondCellIcon, secondCellWidth, secondCellSortable, thirdCellType, thirdCellLabel, thirdCellIcon, thirdCellWidth, thirdCellSortable, }: {
+    ({ firstCellType, firstCellLabel, firstCellIcon, firstCellWidth, secondCellType, secondCellLabel, secondCellIcon, secondCellWidth, thirdCellType, thirdCellLabel, thirdCellIcon, thirdCellWidth, }: {
         firstCellType: any;
         firstCellLabel: any;
         firstCellIcon: any;
         firstCellWidth: any;
-        firstCellSortable: any;
         secondCellType: any;
         secondCellLabel: any;
         secondCellIcon: any;
         secondCellWidth: any;
-        secondCellSortable: any;
         thirdCellType: any;
         thirdCellLabel: any;
         thirdCellIcon: any;
         thirdCellWidth: any;
-        thirdCellSortable: any;
     }): string;
     args: {
         firstCellType: string;
         firstCellLabel: string;
         firstCellIcon: string;
         firstCellWidth: number;
-        firstCellSortable: boolean;
         secondCellType: string;
         secondCellLabel: string;
         secondCellIcon: string;
         secondCellWidth: number;
-        secondCellSortable: boolean;
         thirdCellType: string;
         thirdCellLabel: string;
         thirdCellIcon: string;
         thirdCellWidth: number;
-        thirdCellSortable: boolean;
     };
     parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
         'web-component': {
             render: string;
         };

package/dist/types/components/xpl-table/xpl-table-header/xpl-table-header.d.ts

@@ -0,0 +1,3 @@
+export declare class TableHeader {
+    render(): any;
+}

package/dist/types/components/{xpl-table-header-cell → xpl-table/xpl-table-header-cell}/table-header-cell.stories.d.ts

@@ -1,6 +1,13 @@
 declare const _default: {
     title: string;
     component: string;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
     argTypes: {
         type: {
             control: "select";
@@ -13,43 +20,40 @@ declare const _default: {
             control: "select";
             options: string[];
         };
-        width: {
-            control: "number";
+        align: {
+            control: "select";
+            options: string[];
         };
-        sortable: {
+        checked: {
             control: "boolean";
         };
+        indeterminate: {
+            control: "boolean";
+        };
+        checkboxAriaLabel: {
+            control: "text";
+        };
     };
     tags: string[];
 };
 export default _default;
 export declare const TableHeaderCell: {
-    ({ type, label, icon, width, sortable }: {
-        type: any;
-        label: any;
-        icon: any;
-        width: any;
-        sortable: any;
-    }): string;
+    (args: Record<string, unknown>): string;
     args: {
         type: string;
         label: string;
         icon: string;
-        width: any;
-        sortable: boolean;
+        align: string;
+        checked: boolean;
+        indeterminate: boolean;
+        checkboxAriaLabel: string;
     };
     parameters: {
         'web-component': {
-            render: string;
+            render: (args: Record<string, unknown>) => string;
         };
         html: {
-            render: ({ type, label, icon, width, sortable }: {
-                type: any;
-                label: any;
-                icon: any;
-                width: any;
-                sortable: any;
-            }) => string;
+            render: (args: Record<string, unknown>) => string;
         };
         design: {
             type: string;

package/dist/types/components/xpl-table/xpl-table-header-cell/xpl-table-header-cell.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export interface HeaderSortChangeDetail {
+    columnIndex: number;
+    sortKey: string;
+}
+export declare class TableHeaderCell {
+    el: HTMLXplTableHeaderCellElement;
+    align: 'left' | 'right' | 'center';
+    checkboxAriaLabel?: string;
+    checked: boolean;
+    columnWidth?: string;
+    watchColumnWidth(): void;
+    icon?: string;
+    indeterminate: boolean;
+    label?: string;
+    sortable: boolean;
+    sortDirection?: 'asc' | 'desc' | null;
+    sortKey?: string;
+    type: 'label' | 'checkbox' | 'icon' | 'empty';
+    width?: number;
+    watchWidth(): void;
+    headerCheckboxChange: EventEmitter<boolean>;
+    headerSortChange: EventEmitter<HeaderSortChangeDetail>;
+    componentDidLoad(): void;
+    private notifyColumnWidthsChange;
+    private onHeaderInnerCheckboxChange;
+    private getColumnIndex0;
+    private getSortKeySlug;
+    private onSortActivate;
+    private renderLabelContent;
+    render(): any;
+}

package/dist/types/components/xpl-table/xpl-table-row/xpl-table-row.d.ts

@@ -0,0 +1,13 @@
+export declare class XplTableRow {
+    private cellObserver?;
+    el: HTMLElement;
+    disabled: boolean;
+    onDisabledChange(): void;
+    rowId?: string;
+    selected: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    private propagateDisabledToCells;
+    render(): any;
+}

package/dist/types/components/xpl-table/xpl-table.d.ts

@@ -1,40 +1,142 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export declare class XplTable {
+export interface XplTableRowOrderChangeDetail {
+    rowId: string;
+    direction: 'up' | 'down';
+    orderedRowIds: string[];
+    fromIndex: number;
+    toIndex: number;
+}
+export interface XplTableSortChangedDetail {
+    colNum?: number;
+    colName?: string;
+    sortTypeArr?: ('asc' | 'desc' | null)[];
+    [slug: string]: 'asc' | 'desc' | null | number | string | ('asc' | 'desc' | null)[] | undefined;
+}
+export declare class Table {
+    private container;
+    private columnWidthsToken;
+    private lastEmittedRowSelectionKey;
+    private selectAllValue;
+    private tableInstanceId?;
+    private draggedRow;
+    private pendingDragRow;
+    private pointerUpClearPending;
+    private reorderAnnounceRaf?;
+    private reorderKeyboardTimers;
+    private readonly onReorderHandleKeydown;
     el: HTMLXplTableElement;
+    areAllSelected: boolean;
+    colCount: number;
+    hasScrolled: boolean;
+    private keyboardReorderRowId;
+    private reorderLiveMessage;
+    rowData: string[][];
+    rowFooterData: string[][];
+    selected: (string | boolean)[];
+    selectedRowIds: string[];
+    sortTypeArray: ('asc' | 'desc' | null)[];
     columns?: string[];
+    watchColumns(): void;
     data?: string[][];
+    watchData(): void;
     footer?: string[][];
+    watchFooterData(): void;
     freeze?: boolean;
+    isSortable?: boolean;
+    label?: string;
     multiselect?: boolean;
-    striped?: boolean;
+    reorderHandleIcon?: string;
+    watchReorderHandleIcon(): void;
+    reorderHandleIconKeyboard?: string;
+    watchReorderHandleIconKeyboard(): void;
+    rowReorderable?: boolean;
+    watchRowReorderable(next?: boolean): void;
+    selectable?: boolean;
+    watchSelectable(next?: boolean): void;
     selectedValues?: string[];
-    isSortable?: boolean;
     sortableColumns?: boolean[];
-    areAllSelected: boolean;
-    rowData: string[][];
-    rowFooterData: string[][];
-    hasScrolled: boolean;
-    selected: (string | boolean)[];
-    sortTypeArray: ('asc' | 'desc' | null)[];
+    striped?: boolean;
+    rowOrderChange: EventEmitter<XplTableRowOrderChangeDetail>;
+    rowSelectionChange: EventEmitter<{
+        selectedRowIds: string[];
+    }>;
+    sortChanged: EventEmitter<XplTableSortChangedDetail>;
     tableSelect: EventEmitter;
-    private selectAllValue;
-    private container;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    handleHeaderCellColumnWidthsChange(ev: Event): void;
+    handleCompositionalCheckboxChange(ev: CustomEvent<string | boolean>): void;
+    handleCompositionalHeaderCheckboxChange(ev: CustomEvent<boolean>): void;
+    handlePointerDownExitKeyboardReorder(ev: PointerEvent): void;
+    private handleReorderHandleKeyDown;
+    handleRowReorderPointerDown(ev: PointerEvent): void;
+    handleRowReorderDragStart(ev: DragEvent): void;
+    handleRowReorderDragEnd(ev: DragEvent): void;
+    handleRowReorderDragOver(ev: DragEvent): void;
+    handleRowReorderDragEnter(ev: DragEvent): void;
+    handleRowReorderDragLeave(ev: DragEvent): void;
+    handleRowReorderDrop(ev: DragEvent): void;
+    private get isLegacyMode();
+    private ensureTableInstanceId;
+    private generateRowId;
+    private syncCompositionalLayout;
+    private getDirectChildTableSection;
+    private isDirectChildBodyRow;
+    private isCellInOurCompositionalHeader;
+    private getSelectionColumnIndex;
+    private static getBodyRowCells;
+    private queryBodyRows;
+    private querySelectableBodyRows;
+    private static getRowIdForRow;
+    private ensureBodyRowIds;
+    private removeManagedReorderCells;
+    private getSelectionSlotCellForReorderOrder;
+    private normalizeManagedColumnsOrder;
+    private syncReorderColumn;
+    private ensureHeaderReorderCell;
+    private ensureBodyReorderCells;
+    private getResolvedIconForRow;
+    private syncInjectedReorderHandleIcons;
+    private syncReorderHandleKeyboardA11y;
+    private attachReorderHandleKeydownListeners;
+    private detachReorderHandleKeydownListeners;
+    private performKeyboardRowReorder;
+    private ensureFooterReorderCells;
+    private static supportsSubgridBodyRow;
+    private applyReorderRowDraggableState;
+    private getVisibleBodyRowsForReorder;
+    private clearReorderDragOverClasses;
+    private clearPendingDragListeners;
+    private announceRowReorder;
+    private pruneStaleSelectedRowIds;
+    private static getBodyRowCheckboxAriaLabel;
+    private applyBodyCheckboxStates;
+    private getHeaderCheckboxCell;
+    private applyHeaderCheckboxState;
+    private syncRowSelectedProps;
+    private emitCompositionalSelection;
+    private isEventFromThisTable;
+    private static sortKeyFromHeaderCell;
+    handleCompositionalHeaderSort(ev: CustomEvent<{
+        columnIndex: number;
+        sortKey: string;
+    }>): void;
+    private legacySortStatePayload;
+    private legacySortChangedDetail;
+    private getCompositionalHeaderCells;
+    private updateColumnWidths;
+    private onGridScroll;
     private selectAll;
     private selectOne;
-    private onChange;
-    private onScroll;
+    private onSelectionChange;
+    private onLegacyScroll;
     private sortBy;
-    sortChanged: EventEmitter<{
-        colNum: number;
-        colName: string;
-        sortTypeArr: string[];
-    }>;
     private handleSort;
     private setData;
     private setFooterData;
-    watchData(): void;
-    watchFooterData(): void;
-    watchColumns(): void;
-    componentWillLoad(): void;
+    private renderLegacy;
+    private renderCompositional;
     render(): any;
 }

package/dist/types/components/xpl-tabs/segment-control.stories.d.ts

@@ -0,0 +1,112 @@
+import { type TabsStoryArgs, type TabsStoryRenderContext } from './tabs.shared';
+declare const _default: {
+    title: string;
+    component: string;
+    parameters: {
+        actions: {
+            handles: string[];
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        type: {
+            table: {
+                disable: true;
+            };
+            options: string[];
+            control: {
+                type: "select";
+            };
+            description: string;
+        };
+        disabled: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        fullWidth: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        value: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        tabCount: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        tabDisabled: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        icon: {
+            table: {
+                category: string;
+            };
+            control: {
+                type: "text";
+            };
+            description: string;
+        };
+        iconPosition: {
+            table: {
+                category: string;
+            };
+            options: string[];
+            control: {
+                type: "radio";
+            };
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const SegmentControl: {
+    (args: TabsStoryArgs, context?: TabsStoryRenderContext): string;
+    args: TabsStoryArgs;
+    parameters: {
+        layout: string;
+        'web-component': {
+            render: string;
+        };
+        html: {
+            render: string;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};

package/dist/types/components/xpl-tabs/tabs.shared.d.ts

@@ -0,0 +1,156 @@
+export interface TabsStoryArgs {
+    type: 'tabs' | 'segment';
+    disabled: boolean;
+    fullWidth: boolean;
+    value: string;
+    tabCount: number;
+    tabDisabled: boolean;
+    icon: string;
+    iconPosition: 'start' | 'end';
+}
+export declare function escapeHtmlAttr(value: string): string;
+export declare function clampTabCount(n: number): number;
+export declare function coerceTabsStoryValue(args: TabsStoryArgs): string;
+export declare function buildTabsMarkup(args: TabsStoryArgs): string;
+export interface TabsStoryRenderContext {
+    updateArgs?: (next: Partial<TabsStoryArgs>) => void;
+}
+export declare function renderTabsStoryMarkup(args: TabsStoryArgs, context?: TabsStoryRenderContext): string;
+export declare const tabsPlainDomUnderlineStoryHtml = "<---- Non-interactive plain DOM (tabs.css BEM). Not the <xpl-tabs> API; use the Web Component tab for that. Ids mirror the scoped pattern (data-tabs-instance-id + target). ---->\n<div class=\"xpl-tabs\" data-tabs-instance-id=\"xpl-tg-1\">\n    <xpl-select class-names=\"xpl-tabs__mobile-select\" selected-values=\"tab0\"></xpl-select>\n    <nav class=\"xpl-tabs__headings\" role=\"tablist\" aria-orientation=\"horizontal\">\n        <div class=\"xpl-tabs__active-bar\"></div>\n        <div class=\"xpl-tab xpl-tab--selected\">\n            <button class=\"xpl-tab__button\" type=\"button\" role=\"tab\" id=\"xpl-tg-1-tab-tab0\" aria-controls=\"xpl-tg-1-panel-tab0\" aria-selected=\"true\">Tab 1</button>\n        </div>\n        <div class=\"xpl-tab\">\n            <button class=\"xpl-tab__button\" type=\"button\" role=\"tab\" id=\"xpl-tg-1-tab-tab1\" aria-controls=\"xpl-tg-1-panel-tab1\" aria-selected=\"false\">Tab 2</button>\n        </div>\n    </nav>\n    <div class=\"xpl-tabs__panels\">\n        <div class=\"xpl-tab-panel xpl-tab-panel--selected\" role=\"tabpanel\" id=\"xpl-tg-1-panel-tab0\" aria-labelledby=\"xpl-tg-1-tab-tab0\">Content for tab 1</div>\n        <div class=\"xpl-tab-panel\" role=\"tabpanel\" id=\"xpl-tg-1-panel-tab1\" aria-labelledby=\"xpl-tg-1-tab-tab1\">Content for tab 2</div>\n    </div>\n</div>";
+export declare const tabsPlainDomSegmentStoryHtml = "<---- Segment (type='segment'): Stencil renders xpl-tab.xpl-tab--segment > xpl-button; xpl-tab assigns id, role, and aria-* on the inner native <button>. Plain buttons below only illustrate tablist \u2194 tabpanel id wiring (not .xpl-tab__button). ---->\n<div class=\"xpl-tabs xpl-tabs--segment\" data-tabs-instance-id=\"xpl-tg-2\">\n    <xpl-select class-names=\"xpl-tabs__mobile-select\" selected-values=\"tab0\"></xpl-select>\n    <nav class=\"xpl-tabs__headings\" role=\"tablist\" aria-orientation=\"horizontal\">\n        <div class=\"xpl-tab xpl-tab--segment xpl-tab--selected\">\n            <button type=\"button\" role=\"tab\" id=\"xpl-tg-2-tab-tab0\" aria-controls=\"xpl-tg-2-panel-tab0\" aria-selected=\"true\">Segment 1</button>\n        </div>\n        <div class=\"xpl-tab xpl-tab--segment\">\n            <button type=\"button\" role=\"tab\" id=\"xpl-tg-2-tab-tab1\" aria-controls=\"xpl-tg-2-panel-tab1\" aria-selected=\"false\">Segment 2</button>\n        </div>\n    </nav>\n    <div class=\"xpl-tabs__panels\">\n        <div class=\"xpl-tab-panel xpl-tab-panel--selected\" role=\"tabpanel\" id=\"xpl-tg-2-panel-tab0\" aria-labelledby=\"xpl-tg-2-tab-tab0\">Content for segment 1</div>\n        <div class=\"xpl-tab-panel\" role=\"tabpanel\" id=\"xpl-tg-2-panel-tab1\" aria-labelledby=\"xpl-tg-2-tab-tab1\">Content for segment 2</div>\n    </div>\n</div>";
+export declare const tabsStoryBaseArgTypes: {
+    type: {
+        options: string[];
+        control: {
+            type: "select";
+        };
+        description: string;
+    };
+    disabled: {
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    fullWidth: {
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    value: {
+        control: {
+            type: "text";
+        };
+        description: string;
+    };
+    tabCount: {
+        control: {
+            type: "number";
+            min: number;
+            max: number;
+            step: number;
+        };
+        description: string;
+    };
+    tabDisabled: {
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    icon: {
+        control: {
+            type: "text";
+        };
+        description: string;
+    };
+    iconPosition: {
+        options: string[];
+        control: {
+            type: "radio";
+        };
+        description: string;
+    };
+};
+export declare const segmentControlStoryArgTypes: {
+    type: {
+        table: {
+            disable: true;
+        };
+        options: string[];
+        control: {
+            type: "select";
+        };
+        description: string;
+    };
+    disabled: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    fullWidth: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    value: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "text";
+        };
+        description: string;
+    };
+    tabCount: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "number";
+            min: number;
+            max: number;
+            step: number;
+        };
+        description: string;
+    };
+    tabDisabled: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
+    icon: {
+        table: {
+            category: string;
+        };
+        control: {
+            type: "text";
+        };
+        description: string;
+    };
+    iconPosition: {
+        table: {
+            category: string;
+        };
+        options: string[];
+        control: {
+            type: "radio";
+        };
+        description: string;
+    };
+};
+export declare const tabsUnderlineDefaultArgs: TabsStoryArgs;
+export declare const segmentControlDefaultArgs: TabsStoryArgs;