@pine-ds/core 3.26.3 → 3.27.0

package/components/pds-table-head-cell2.js

@@ -1,254 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { u as upSmall, d as downSmall } from './index2.js';
-import { i as isScrolledFromInlineStart } from './scroll.js';
-import { d as defineCustomElement$1 } from './pds-icon2.js';
-
-const pdsTableHeadCellCss = ":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-sm);position:relative;text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(.is-fixed.has-head-background){background-color:var(--pine-color-background-subtle)}:host(.has-head-border){-webkit-border-before:var(--border-head-cell-default);border-block-start:var(--border-head-cell-default)}:host-context([dir=rtl]){--box-shadow-default:-3px 3px 6px -2px rgba(0, 0, 0, 0.1)}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);-webkit-padding-before:2px;padding-block-start:2px;position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--pine-color-text-strong)}:host(.pds-table-head-cell--align-start){text-align:start}:host(.pds-table-head-cell--align-center){text-align:center}:host(.pds-table-head-cell--align-end){text-align:end}:host(.pds-table-head-cell--align-justify){text-align:justify}";
-
-const PdsTableHeadCell = /*@__PURE__*/ proxyCustomElement(class PdsTableHeadCell extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.pdsTableSort = createEvent(this, "pdsTableSort", 7);
-        this.scrollContainer = null;
-        this.setupRetries = 0;
-        /**
-         * The direction of sorting.
-         */
-        this.sortingDirection = 'asc';
-        /**
-         * Determines if the table is currently scrolling.
-         * @defaultValue false
-         */
-        this.tableScrolling = false;
-        /**
-         * Determines if the table row is currently selected.
-         * @defaultValue false
-         */
-        this.isSelected = false;
-        /**
-         * Determines if the parent table-head has the border attribute.
-         * @defaultValue false
-         */
-        this.hasHeadBorder = false;
-        /**
-         * Determines if the parent table-head has the background attribute.
-         * @defaultValue false
-         */
-        this.hasHeadBackground = false;
-        /**
-         * Determines if this column is the currently active sorted column.
-         * @defaultValue false
-         */
-        this.isActive = false;
-        /**
-         * Handles scroll events to update fixed column shadow state.
-         * Updates the tableScrolling state to control CSS classes for fixed column shadows.
-         * @private
-         */
-        this.handleScroll = () => {
-            if (!this.scrollContainer) {
-                return;
-            }
-            try {
-                this.tableScrolling = isScrolledFromInlineStart(this.scrollContainer);
-            }
-            catch (error) {
-                console.warn('Scroll handler error:', error);
-            }
-        };
-        this.toggleSort = () => {
-            if (this.sortable) {
-                // Guard: return early if tableRef is not available
-                if (!this.tableRef) {
-                    return;
-                }
-                const column = this.hostElement.innerText.trim();
-                // Always toggle the direction (preserves original behavior)
-                this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';
-                // Reset all OTHER head cells to inactive state (skip the current one)
-                this.tableRef.querySelectorAll('pds-table-head-cell').forEach(async (headCell) => {
-                    // Skip clearing the current cell
-                    if (headCell !== this.hostElement) {
-                        const headCellComponent = headCell;
-                        await headCellComponent.clearActiveSort();
-                    }
-                });
-                // Mark this column as active
-                this.isActive = true;
-                this.hostElement.classList.add('is-active');
-                // Emit the sort event with the current direction
-                this.pdsTableSort.emit({ column, direction: this.sortingDirection });
-            }
-        };
-    }
-    /**
-     * Programmatically sets this column as the active sort column with the specified direction.
-     * Used by pds-table to apply a default sort on initial load.
-     * @param direction - The sort direction to apply ('asc' or 'desc')
-     */
-    async setActiveSort(direction) {
-        if (!this.sortable)
-            return;
-        this.sortingDirection = direction;
-        this.isActive = true;
-        this.hostElement.classList.add('is-active');
-    }
-    /**
-     * Clears the active sort state from this column.
-     * Used internally when another column becomes active.
-     */
-    async clearActiveSort() {
-        this.isActive = false;
-        this.hostElement.classList.remove('is-active');
-    }
-    componentWillLoad() {
-        // Set initial references and state before first render
-        this.tableRef = this.hostElement.closest('pds-table');
-        const tableHead = this.hostElement.closest('pds-table-head');
-        if (tableHead) {
-            this.hasHeadBorder = tableHead.hasAttribute('border');
-            this.hasHeadBackground = tableHead.hasAttribute('background');
-        }
-    }
-    componentDidLoad() {
-        if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
-            // For responsive tables with fixed columns, set up scroll detection
-            // This enables the first column header to show a shadow when the table is scrolled horizontally
-            this.setupScrollListener();
-        }
-        // Watch for changes to the parent table-head's border and background attributes
-        const tableHead = this.hostElement.closest('pds-table-head');
-        if (tableHead && typeof MutationObserver !== 'undefined') {
-            // Defensive guard: disconnect existing observer before creating a new one
-            if (this.headObserver) {
-                this.headObserver.disconnect();
-            }
-            this.headObserver = new MutationObserver(() => {
-                // Update state when border or background attributes change
-                this.hasHeadBorder = tableHead.hasAttribute('border');
-                this.hasHeadBackground = tableHead.hasAttribute('background');
-            });
-            this.headObserver.observe(tableHead, {
-                attributes: true,
-                attributeFilter: ['border', 'background']
-            });
-        }
-    }
-    disconnectedCallback() {
-        this.cleanupScrollListener();
-        if (this.headObserver) {
-            this.headObserver.disconnect();
-        }
-    }
-    setupScrollListener() {
-        var _a;
-        if (!this.tableRef)
-            return;
-        // Query shadowRoot once and cache the container
-        const container = (_a = this.tableRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-table-responsive-container');
-        if (container) {
-            // Container available immediately
-            this.scrollContainer = container;
-            this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
-            this.handleScroll(); // Initial check
-            this.setupRetries = 0; // Reset counter on success
-        }
-        else {
-            // Container not ready, set up timer for retry with bounds
-            this.setupTimer = window.setTimeout(() => {
-                if (this.scrollContainer)
-                    return; // Already found
-                this.setupRetries = (this.setupRetries || 0) + 1;
-                if (this.setupRetries <= 50) {
-                    this.setupScrollListener();
-                }
-                else {
-                    console.warn('Failed to find responsive container after 50 attempts');
-                }
-            }, 100);
-        }
-    }
-    cleanupScrollListener() {
-        if (this.scrollContainer) {
-            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
-            this.scrollContainer = null;
-        }
-        if (this.setupTimer !== undefined) {
-            window.clearTimeout(this.setupTimer);
-            this.setupTimer = undefined;
-        }
-        this.setupRetries = 0; // Reset retry counter
-    }
-    classNames() {
-        const classNames = [];
-        if (this.tableRef && this.tableRef.compact) {
-            classNames.push('is-compact');
-        }
-        if (this.cellAlign) {
-            classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);
-        }
-        if (this.sortable) {
-            classNames.push('is-sortable');
-        }
-        if (this.sortable && this.sortingDirection !== null) {
-            classNames.push('sort-' + this.sortingDirection);
-        }
-        if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {
-            classNames.push('has-scrolled');
-        }
-        if (this.hasHeadBackground) {
-            classNames.push('has-head-background');
-        }
-        if (this.hasHeadBorder) {
-            classNames.push('has-head-border');
-        }
-        return classNames.join(' ');
-    }
-    render() {
-        return (h(Host, { key: 'e0a30c326b81e0cc3fa8c0392b61f2a6625aad71', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
-                this.tableRef.fixedColumn &&
-                this.tableRef.selectable
-                ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '3d0012983b2b552e4e61a3d84717afb9de8e572f' }), this.sortable && this.isActive && (h("pds-icon", { key: '326607f90b12ecc26a731dc696d0a3b8ebb0960c', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
-    }
-    get hostElement() { return this; }
-    static get style() { return pdsTableHeadCellCss; }
-}, [257, "pds-table-head-cell", {
-        "cellAlign": [1, "cell-align"],
-        "sortable": [4],
-        "sortingDirection": [32],
-        "tableScrolling": [32],
-        "isSelected": [32],
-        "hasHeadBorder": [32],
-        "hasHeadBackground": [32],
-        "isActive": [32],
-        "setActiveSort": [64],
-        "clearActiveSort": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-table-head-cell", "pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-table-head-cell":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsTableHeadCell);
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PdsTableHeadCell as P, defineCustomElement as d };
-//# sourceMappingURL=pds-table-head-cell2.js.map
-
-//# sourceMappingURL=pds-table-head-cell2.js.map
+import{proxyCustomElement as t,HTMLElement as s,createEvent as e,h as i,Host as a,transformTag as o}from"@stencil/core/internal/client";import{u as r,d as n}from"./index2.js";import{i as l}from"./scroll.js";import{d as h}from"./pds-icon2.js";const d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.pdsTableSort=e(this,"pdsTableSort",7),this.scrollContainer=null,this.setupRetries=0,this.sortingDirection="asc",this.tableScrolling=!1,this.isSelected=!1,this.hasHeadBorder=!1,this.hasHeadBackground=!1,this.isActive=!1,this.handleScroll=()=>{if(this.scrollContainer)try{this.tableScrolling=l(this.scrollContainer)}catch(t){console.warn("Scroll handler error:",t)}},this.toggleSort=()=>{if(this.sortable){if(!this.tableRef)return;const t=this.hostElement.innerText.trim();this.sortingDirection="asc"===this.sortingDirection?"desc":"asc",this.tableRef.querySelectorAll("pds-table-head-cell").forEach((async t=>{if(t!==this.hostElement){const s=t;await s.clearActiveSort()}})),this.isActive=!0,this.hostElement.classList.add("is-active"),this.pdsTableSort.emit({column:t,direction:this.sortingDirection})}}}async setActiveSort(t){this.sortable&&(this.sortingDirection=t,this.isActive=!0,this.hostElement.classList.add("is-active"))}async clearActiveSort(){this.isActive=!1,this.hostElement.classList.remove("is-active")}componentWillLoad(){this.tableRef=this.hostElement.closest("pds-table");const t=this.hostElement.closest("pds-table-head");t&&(this.hasHeadBorder=t.hasAttribute("border"),this.hasHeadBackground=t.hasAttribute("background"))}componentDidLoad(){this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn&&this.setupScrollListener();const t=this.hostElement.closest("pds-table-head");t&&"undefined"!=typeof MutationObserver&&(this.headObserver&&this.headObserver.disconnect(),this.headObserver=new MutationObserver((()=>{this.hasHeadBorder=t.hasAttribute("border"),this.hasHeadBackground=t.hasAttribute("background")})),this.headObserver.observe(t,{attributes:!0,attributeFilter:["border","background"]}))}disconnectedCallback(){this.cleanupScrollListener(),this.headObserver&&this.headObserver.disconnect()}setupScrollListener(){var t;if(!this.tableRef)return;const s=null===(t=this.tableRef.shadowRoot)||void 0===t?void 0:t.querySelector(".pds-table-responsive-container");s?(this.scrollContainer=s,this.scrollContainer.addEventListener("scroll",this.handleScroll,{passive:!0}),this.handleScroll(),this.setupRetries=0):this.setupTimer=window.setTimeout((()=>{this.scrollContainer||(this.setupRetries=(this.setupRetries||0)+1,this.setupRetries<=50?this.setupScrollListener():console.warn("Failed to find responsive container after 50 attempts"))}),100)}cleanupScrollListener(){this.scrollContainer&&(this.scrollContainer.removeEventListener("scroll",this.handleScroll),this.scrollContainer=null),void 0!==this.setupTimer&&(window.clearTimeout(this.setupTimer),this.setupTimer=void 0),this.setupRetries=0}classNames(){const t=[];return this.tableRef&&this.tableRef.compact&&t.push("is-compact"),this.cellAlign&&t.push(`pds-table-head-cell--align-${this.cellAlign}`),this.sortable&&t.push("is-sortable"),this.sortable&&null!==this.sortingDirection&&t.push("sort-"+this.sortingDirection),this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling&&t.push("has-scrolled"),this.hasHeadBackground&&t.push("has-head-background"),this.hasHeadBorder&&t.push("has-head-border"),t.join(" ")}render(){return i(a,{key:"e0a30c326b81e0cc3fa8c0392b61f2a6625aad71",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,part:"head-cell",style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},i("slot",{key:"3d0012983b2b552e4e61a3d84717afb9de8e572f"}),this.sortable&&this.isActive&&i("pds-icon",{key:"326607f90b12ecc26a731dc696d0a3b8ebb0960c",icon:"asc"===this.sortingDirection?r:n,part:"sort-icon"}))}get hostElement(){return this}static get style(){return":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-sm);position:relative;text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(.is-fixed.has-head-background){background-color:var(--pine-color-background-subtle)}:host(.has-head-border){-webkit-border-before:var(--border-head-cell-default);border-block-start:var(--border-head-cell-default)}:host-context([dir=rtl]){--box-shadow-default:-3px 3px 6px -2px rgba(0, 0, 0, 0.1)}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);-webkit-padding-before:2px;padding-block-start:2px;position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--pine-color-text-strong)}:host(.pds-table-head-cell--align-start){text-align:start}:host(.pds-table-head-cell--align-center){text-align:center}:host(.pds-table-head-cell--align-end){text-align:end}:host(.pds-table-head-cell--align-justify){text-align:justify}"}},[257,"pds-table-head-cell",{cellAlign:[1,"cell-align"],sortable:[4],sortingDirection:[32],tableScrolling:[32],isSelected:[32],hasHeadBorder:[32],hasHeadBackground:[32],isActive:[32],setActiveSort:[64],clearActiveSort:[64]}]);function c(){"undefined"!=typeof customElements&&["pds-table-head-cell","pds-icon"].forEach((t=>{switch(t){case"pds-table-head-cell":customElements.get(o(t))||customElements.define(o(t),d);break;case"pds-icon":customElements.get(o(t))||h()}}))}export{d as P,c as d}

package/components/pds-table-head.js

@@ -1,102 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as closest } from './closest.js';
-import { d as defineCustomElement$4 } from './pds-checkbox2.js';
-import { d as defineCustomElement$3 } from './pds-icon2.js';
-import { d as defineCustomElement$2 } from './pds-table-head-cell2.js';
-
-const pdsTableHeadCss = ":host{--border-head-default:var(--pine-border-width-thin) solid var(--pine-color-background-subtle);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host pds-table-checkbox-cell{-webkit-border-after:var(--border-head-default);border-block-end:var(--border-head-default)}:host([border]){-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-webkit-border-before:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-start:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host([border]) pds-table-head-cell{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-webkit-border-before:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-start:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host([background]){background-color:var(--pine-color-background-subtle)}:host([background]) pds-table-head-cell{background-color:var(--pine-color-background-subtle)}";
-
-const PdsTableHead$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableHead extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.pdsTableSelectAll = createEvent(this, "pdsTableSelectAll", 7);
-        /**
-         * Adds top and bottom borders to the table head.
-         * @defaultValue false
-         */
-        this.border = false;
-        /**
-         * Adds a subtle background color to the table head.
-         * @defaultValue false
-         */
-        this.background = false;
-        this.generateUniqueId = () => {
-            const randomString = Math.random().toString(36).substring(2, 8);
-            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-            const uniqueId = `${randomString}-${timestamp}`;
-            return uniqueId;
-        };
-        this.handleInput = (ev) => {
-            this.isSelected = !ev.target.checked;
-            this.handleSelect(this.isSelected);
-        };
-        this.handleSelect = (isSelected) => {
-            this.indeterminate = false;
-            if (closest('pds-table-head', this.hostElement)) {
-                this.pdsTableSelectAll.emit({ isSelected });
-            }
-        };
-    }
-    componentWillLoad() {
-        if (this.isSelected) {
-            this.handleSelect(this.isSelected);
-        }
-    }
-    componentWillRender() {
-        this.tableRef = this.hostElement.closest('pds-table');
-        if (this.tableRef && this.tableRef.fixedColumn) {
-            const tableCell = this.hostElement.querySelector('pds-table-head-cell:first-child');
-            tableCell === null || tableCell === void 0 ? void 0 : tableCell.classList.add("is-fixed");
-        }
-    }
-    render() {
-        return (h(Host, { key: 'd5d5906bdb23794b911ecd5904a4cc58aa5380d6', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '85df57fb4371e4fba855e16ce62c8329b49e08cf', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: '92bd5565463e29d249d1ac71d9dc0d000f3eea79', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), h("slot", { key: '494dc0395da229a264c38540479f36967601cc26' })));
-    }
-    get hostElement() { return this; }
-    static get style() { return pdsTableHeadCss; }
-}, [257, "pds-table-head", {
-        "indeterminate": [1028],
-        "isSelected": [1028, "is-selected"],
-        "border": [516],
-        "background": [516]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-table-head", "pds-checkbox", "pds-icon", "pds-table-head-cell"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-table-head":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsTableHead$1);
-            }
-            break;
-        case "pds-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pds-table-head-cell":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsTableHead = PdsTableHead$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsTableHead, defineCustomElement };
-//# sourceMappingURL=pds-table-head.js.map
-
-//# sourceMappingURL=pds-table-head.js.map
+import{proxyCustomElement as e,HTMLElement as r,createEvent as t,h as o,Host as d,transformTag as i}from"@stencil/core/internal/client";import{c as s}from"./closest.js";import{d as l}from"./pds-checkbox2.js";import{d as a}from"./pds-icon2.js";import{d as c}from"./pds-table-head-cell2.js";const b=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsTableSelectAll=t(this,"pdsTableSelectAll",7),this.border=!1,this.background=!1,this.generateUniqueId=()=>`${Math.random().toString(36).substring(2,8)}-${(new Date).toISOString().replace(/[:.]/g,"-")}`,this.handleInput=e=>{this.isSelected=!e.target.checked,this.handleSelect(this.isSelected)},this.handleSelect=e=>{this.indeterminate=!1,s("pds-table-head",this.hostElement)&&this.pdsTableSelectAll.emit({isSelected:e})}}componentWillLoad(){this.isSelected&&this.handleSelect(this.isSelected)}componentWillRender(){if(this.tableRef=this.hostElement.closest("pds-table"),this.tableRef&&this.tableRef.fixedColumn){const e=this.hostElement.querySelector("pds-table-head-cell:first-child");null==e||e.classList.add("is-fixed")}}render(){return o(d,{key:"d5d5906bdb23794b911ecd5904a4cc58aa5380d6",role:"row",part:"head"},this.tableRef&&this.tableRef.selectable&&o("pds-table-head-cell",{key:"85df57fb4371e4fba855e16ce62c8329b49e08cf",part:this.tableRef.selectable?"checkbox-cell":""},!this.tableRef.disableSelectAll&&o("pds-checkbox",{key:"92bd5565463e29d249d1ac71d9dc0d000f3eea79",componentId:this.generateUniqueId(),indeterminate:this.indeterminate,onInput:this.handleInput,label:"Select All Rows",hideLabel:!0,checked:this.isSelected,part:"select-all-checkbox"})),o("slot",{key:"494dc0395da229a264c38540479f36967601cc26"}))}get hostElement(){return this}static get style(){return":host{--border-head-default:var(--pine-border-width-thin) solid var(--pine-color-background-subtle);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host pds-table-checkbox-cell{-webkit-border-after:var(--border-head-default);border-block-end:var(--border-head-default)}:host([border]){-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-webkit-border-before:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-start:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host([border]) pds-table-head-cell{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-webkit-border-before:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-start:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host([background]){background-color:var(--pine-color-background-subtle)}:host([background]) pds-table-head-cell{background-color:var(--pine-color-background-subtle)}"}},[257,"pds-table-head",{indeterminate:[1028],isSelected:[1028,"is-selected"],border:[516],background:[516]}]),n=b,h=function(){"undefined"!=typeof customElements&&["pds-table-head","pds-checkbox","pds-icon","pds-table-head-cell"].forEach((e=>{switch(e){case"pds-table-head":customElements.get(i(e))||customElements.define(i(e),b);break;case"pds-checkbox":customElements.get(i(e))||l();break;case"pds-icon":customElements.get(i(e))||a();break;case"pds-table-head-cell":customElements.get(i(e))||c()}}))};export{n as PdsTableHead,h as defineCustomElement}

package/components/pds-table-row.js

@@ -1,197 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as closest } from './closest.js';
-import { d as defineCustomElement$4 } from './pds-checkbox2.js';
-import { d as defineCustomElement$3 } from './pds-icon2.js';
-import { d as defineCustomElement$2 } from './pds-table-cell2.js';
-
-const pdsTableRowCss = ":host{--color-background-interactive:var(--pine-color-background-subtle);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}:host(.has-divider) ::slotted(pds-table-cell),:host(.has-divider) pds-table-cell{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host(.has-divider.is-last-row) ::slotted(pds-table-cell),:host(.has-divider.is-last-row) pds-table-cell{-webkit-border-after:0;border-block-end:0}";
-
-const PdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableRow extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.pdsTableRowSelected = createEvent(this, "pdsTableRowSelected", 7);
-        this.observer = null;
-        this.bodyObserver = null;
-        /**
-         * Determines if the row should have a divider border.
-         * @defaultValue false
-         */
-        this.hasDivider = false;
-        /**
-         * Determines if this is the last row in the table body.
-         * @defaultValue false
-         */
-        this.isLastRow = false;
-        this.handleCheckboxChange = (event) => {
-            this.isSelected = event.detail.checked;
-            this.handleSelect(this.isSelected);
-        };
-        this.handleSelect = (isSelected) => {
-            this.indeterminate = false;
-            if (!closest('pds-table-head', this.hostElement)) {
-                const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement);
-                this.pdsTableRowSelected.emit({
-                    rowIndex,
-                    isSelected,
-                });
-            }
-        };
-        this.generateUniqueId = () => {
-            const randomString = Math.random().toString(36).substring(2, 8);
-            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-            const uniqueId = `${randomString}-${timestamp}`;
-            return uniqueId;
-        };
-    }
-    classNames() {
-        const classNames = [];
-        if (this.isSelected) {
-            classNames.push("is-selected");
-        }
-        if (this.hasDivider) {
-            classNames.push("has-divider");
-        }
-        if (this.isLastRow) {
-            classNames.push("is-last-row");
-        }
-        return classNames.join(' ');
-    }
-    componentWillRender() {
-        // Always refresh tableRef to get latest prop values
-        // This ensures we pick up changes to parent table props
-        this.tableRef = this.hostElement.closest('pds-table');
-        if (this.tableRef && this.tableRef.fixedColumn) {
-            const tableCell = this.hostElement.querySelector('pds-table-cell');
-            tableCell === null || tableCell === void 0 ? void 0 : tableCell.classList.add("is-fixed");
-        }
-    }
-    componentWillLoad() {
-        // Handle initial selection state
-        if (this.isSelected) {
-            this.handleSelect(this.isSelected);
-        }
-        // Note: tableRef, observers, and divider state are set up in connectedCallback
-        // which runs before componentWillLoad and also handles row re-attachment after sorting
-    }
-    connectedCallback() {
-        // When a row is re-attached to the DOM (e.g., after sorting),
-        // we need to re-setup the observers since disconnectedCallback cleared them
-        // Note: componentDidLoad only fires once, but connectedCallback fires every time
-        // the element is attached to the DOM (including after being moved)
-        this.tableRef = this.hostElement.closest('pds-table');
-        this.setupObservers();
-        this.updateDividerState();
-    }
-    disconnectedCallback() {
-        this.cleanupObservers();
-    }
-    cleanupObservers() {
-        if (this.observer) {
-            this.observer.disconnect();
-            this.observer = null;
-        }
-        if (this.bodyObserver) {
-            this.bodyObserver.disconnect();
-            this.bodyObserver = null;
-        }
-    }
-    setupObservers() {
-        // Clean up any existing observers first
-        this.cleanupObservers();
-        // Watch for changes to the parent table's row-dividers attribute
-        if (this.tableRef && typeof MutationObserver !== 'undefined') {
-            this.observer = new MutationObserver(() => {
-                this.updateDividerState();
-            });
-            this.observer.observe(this.tableRef, {
-                attributes: true,
-                attributeFilter: ['row-dividers']
-            });
-        }
-        // Watch for child list changes in table body (e.g., when rows are reordered during sorting)
-        const tableBody = this.hostElement.closest('pds-table-body');
-        if (tableBody && typeof MutationObserver !== 'undefined') {
-            this.bodyObserver = new MutationObserver(() => {
-                this.updateLastRowState();
-            });
-            this.bodyObserver.observe(tableBody, {
-                childList: true
-            });
-        }
-    }
-    shouldHaveDivider() {
-        if (!this.tableRef) {
-            this.tableRef = this.hostElement.closest('pds-table');
-        }
-        // Reads the parent pds-table component's rowDividers property value directly
-        return !!(this.tableRef && this.tableRef.rowDividers);
-    }
-    updateDividerState() {
-        this.hasDivider = this.shouldHaveDivider();
-        this.updateLastRowState();
-    }
-    updateLastRowState() {
-        if (!this.hasDivider) {
-            this.isLastRow = false;
-            return;
-        }
-        const tableBody = this.hostElement.closest('pds-table-body');
-        if (tableBody) {
-            const rows = Array.from(tableBody.querySelectorAll('pds-table-row'));
-            this.isLastRow = rows[rows.length - 1] === this.hostElement;
-        }
-        else {
-            this.isLastRow = false;
-        }
-    }
-    render() {
-        return (h(Host, { key: '6bbd8bb7cd1f90de0e418748bf8d3b9240ab0cb8', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '9a92396654e7cdf819536335ebe95169d4d4c26d', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: 'bf61a00da4d3c19280aae90d8eaff9515a716c52', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: 'f77887e878913bea5e0ca0a281a639285a65f1c1' })));
-    }
-    get hostElement() { return this; }
-    static get style() { return pdsTableRowCss; }
-}, [257, "pds-table-row", {
-        "indeterminate": [1028],
-        "isSelected": [1028, "is-selected"],
-        "hasDivider": [32],
-        "isLastRow": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-table-row", "pds-checkbox", "pds-icon", "pds-table-cell"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-table-row":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsTableRow$1);
-            }
-            break;
-        case "pds-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pds-table-cell":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsTableRow = PdsTableRow$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsTableRow, defineCustomElement };
-//# sourceMappingURL=pds-table-row.js.map
-
-//# sourceMappingURL=pds-table-row.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,Host as o,transformTag as r}from"@stencil/core/internal/client";import{c as l}from"./closest.js";import{d}from"./pds-checkbox2.js";import{d as a}from"./pds-icon2.js";import{d as c}from"./pds-table-cell2.js";const h=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsTableRowSelected=s(this,"pdsTableRowSelected",7),this.observer=null,this.bodyObserver=null,this.hasDivider=!1,this.isLastRow=!1,this.handleCheckboxChange=e=>{this.isSelected=e.detail.checked,this.handleSelect(this.isSelected)},this.handleSelect=e=>{if(this.indeterminate=!1,!l("pds-table-head",this.hostElement)){const t=Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement);this.pdsTableRowSelected.emit({rowIndex:t,isSelected:e})}},this.generateUniqueId=()=>`${Math.random().toString(36).substring(2,8)}-${(new Date).toISOString().replace(/[:.]/g,"-")}`}classNames(){const e=[];return this.isSelected&&e.push("is-selected"),this.hasDivider&&e.push("has-divider"),this.isLastRow&&e.push("is-last-row"),e.join(" ")}componentWillRender(){if(this.tableRef=this.hostElement.closest("pds-table"),this.tableRef&&this.tableRef.fixedColumn){const e=this.hostElement.querySelector("pds-table-cell");null==e||e.classList.add("is-fixed")}}componentWillLoad(){this.isSelected&&this.handleSelect(this.isSelected)}connectedCallback(){this.tableRef=this.hostElement.closest("pds-table"),this.setupObservers(),this.updateDividerState()}disconnectedCallback(){this.cleanupObservers()}cleanupObservers(){this.observer&&(this.observer.disconnect(),this.observer=null),this.bodyObserver&&(this.bodyObserver.disconnect(),this.bodyObserver=null)}setupObservers(){this.cleanupObservers(),this.tableRef&&"undefined"!=typeof MutationObserver&&(this.observer=new MutationObserver((()=>{this.updateDividerState()})),this.observer.observe(this.tableRef,{attributes:!0,attributeFilter:["row-dividers"]}));const e=this.hostElement.closest("pds-table-body");e&&"undefined"!=typeof MutationObserver&&(this.bodyObserver=new MutationObserver((()=>{this.updateLastRowState()})),this.bodyObserver.observe(e,{childList:!0}))}shouldHaveDivider(){return this.tableRef||(this.tableRef=this.hostElement.closest("pds-table")),!(!this.tableRef||!this.tableRef.rowDividers)}updateDividerState(){this.hasDivider=this.shouldHaveDivider(),this.updateLastRowState()}updateLastRowState(){if(!this.hasDivider)return void(this.isLastRow=!1);const e=this.hostElement.closest("pds-table-body");if(e){const t=Array.from(e.querySelectorAll("pds-table-row"));this.isLastRow=t[t.length-1]===this.hostElement}else this.isLastRow=!1}render(){return i(o,{key:"6bbd8bb7cd1f90de0e418748bf8d3b9240ab0cb8",class:this.classNames(),role:"row",part:"row"},this.tableRef&&this.tableRef.selectable&&i("pds-table-cell",{key:"9a92396654e7cdf819536335ebe95169d4d4c26d",part:"checkbox-cell",class:this.tableRef.selectable?"has-checkbox":""},i("pds-checkbox",{key:"bf61a00da4d3c19280aae90d8eaff9515a716c52",componentId:this.generateUniqueId(),onPdsCheckboxChange:this.handleCheckboxChange,indeterminate:this.indeterminate,label:"Select Row",hideLabel:!0,checked:this.isSelected,part:"row-checkbox"})),i("slot",{key:"f77887e878913bea5e0ca0a281a639285a65f1c1"}))}get hostElement(){return this}static get style(){return":host{--color-background-interactive:var(--pine-color-background-subtle);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}:host(.has-divider) ::slotted(pds-table-cell),:host(.has-divider) pds-table-cell{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host(.has-divider.is-last-row) ::slotted(pds-table-cell),:host(.has-divider.is-last-row) pds-table-cell{-webkit-border-after:0;border-block-end:0}"}},[257,"pds-table-row",{indeterminate:[1028],isSelected:[1028,"is-selected"],hasDivider:[32],isLastRow:[32]}]),n=h,b=function(){"undefined"!=typeof customElements&&["pds-table-row","pds-checkbox","pds-icon","pds-table-cell"].forEach((e=>{switch(e){case"pds-table-row":customElements.get(r(e))||customElements.define(r(e),h);break;case"pds-checkbox":customElements.get(r(e))||d();break;case"pds-icon":customElements.get(r(e))||a();break;case"pds-table-cell":customElements.get(r(e))||c()}}))};export{n as PdsTableRow,b as defineCustomElement}