@pine-ds/core 1.1.0 → 1.3.0-dev.0

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css

@@ -1,54 +0,0 @@
-:host {
-  --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
-  --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);
-  --color-background-fixed: var(--pine-color-white);
-  --color-sorting: var(--pine-color-charcoal-500);
-  --color-text-default: var(--pine-color-charcoal-200);
-  --dimension-fixed-cell-position: 0;
-  --font-size-head-cell: var(--pine-font-size-087);
-  --font-weight-cell-default: var(--pine-font-weight-normal);
-  --line-height-cell-default: var(--pine-line-height-125);
-  --padding-cell-default: calc(var(--pine-spacing-300) / 2);
-  --spacing-margin-inline-start-arrow: var(--pine-spacing-050);
-  --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);
-  --spacing-padding-block-compact: var(--pine-spacing-050);
-  border-block-end: var(--border-head-cell-default);
-  color: var(--color-text-default);
-  display: table-cell;
-  font-size: var(--font-size-head-cell);
-  font-style: normal;
-  font-weight: var(--font-weight-cell-default);
-  line-height: var(--line-height-cell-default);
-  padding: var(--padding-cell-default);
-  text-align: start;
-  vertical-align: inherit;
-}
-
-:host(.is-compact) {
-  padding-block: var(--spacing-padding-block-compact);
-}
-
-:host(.is-fixed) {
-  background: var(--color-background-fixed);
-  left: var(--dimension-fixed-cell-position);
-  position: sticky;
-  z-index: 1;
-}
-
-:host(.has-scrolled.is-fixed) {
-  box-shadow: var(--box-shadow-default);
-}
-
-:host(.is-sortable) {
-  cursor: pointer;
-}
-:host(.is-sortable) pds-icon {
-  margin-inline-start: var(--spacing-margin-inline-start-arrow);
-  padding-block-start: var(--spacing-padding-arrow);
-  position: absolute;
-}
-
-:host(.is-sortable:hover),
-:host(.is-active) {
-  color: var(--color-sorting);
-}

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js

@@ -1,118 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { downSmall, upSmall } from "@pine-ds/icons/icons";
-export class PdsTableHeadCell {
-    constructor() {
-        this.handleScroll = () => {
-            if (this.tableRef.scrollLeft > 0) {
-                this.tableScrolling = true;
-            }
-            else {
-                this.tableScrolling = false;
-            }
-        };
-        this.toggleSort = () => {
-            if (this.sortable) {
-                const column = this.hostElement.innerText.trim();
-                this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';
-                this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {
-                    headCell.classList.remove('is-active');
-                });
-                this.hostElement.classList.toggle('is-active');
-                this.pdsTableSort.emit({ column, direction: this.sortingDirection });
-            }
-        };
-        this.sortable = undefined;
-        this.sortingDirection = 'asc';
-        this.tableScrolling = false;
-    }
-    componentWillRender() {
-        this.tableRef = this.hostElement.closest('pds-table');
-    }
-    componentDidLoad() {
-        if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
-            this.tableRef.addEventListener('scroll', this.handleScroll);
-        }
-    }
-    classNames() {
-        const classNames = [];
-        if (this.tableRef && this.tableRef.compact) {
-            classNames.push('is-compact');
-        }
-        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');
-        }
-        return classNames.join('  ');
-    }
-    render() {
-        return (h(Host, { key: 'b8b24eb690d19c1d6476fd44c69a3231b540d476', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
-                this.tableRef.fixedColumn &&
-                this.tableRef.selectable
-                ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '831ea922b3fb2166852208f2a9520414c93f6954' }), this.sortable && (h("pds-icon", { key: '0afb8d56992327112c64e79d6bfc7c1d192d9732', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
-    }
-    static get is() { return "pds-table-head-cell"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-table-head-cell.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-table-head-cell.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "sortable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines whether the table column is sortable when set to `true`."
-                },
-                "attribute": "sortable",
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "sortingDirection": {},
-            "tableScrolling": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "pdsTableSort",
-                "name": "pdsTableSort",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction."
-                },
-                "complexType": {
-                    "original": "{ column: string; direction: string }",
-                    "resolved": "{ column: string; direction: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "hostElement"; }
-}
-//# sourceMappingURL=pds-table-head-cell.js.map

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pds-table-head-cell.js","sourceRoot":"","sources":["../../../../src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-table-head-cell',\n  styleUrl: 'pds-table-head-cell.scss',\n  shadow: true,\n})\nexport class PdsTableHeadCell {\n  @Element() hostElement: HTMLPdsTableHeadCellElement;\n  tableRef: HTMLPdsTableElement;\n\n  /**\n   * Determines whether the table column is sortable when set to `true`.\n   */\n  @Prop() sortable: boolean;\n\n  /**\n   * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n   */\n  @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n  @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n  @State() private tableScrolling: boolean = false;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      this.tableRef.addEventListener('scroll', this.handleScroll);\n    }\n  }\n\n  private handleScroll = () => {\n    if (this.tableRef.scrollLeft > 0) {\n      this.tableScrolling = true;\n    } else {\n      this.tableScrolling = false;\n    }\n  };\n\n  private toggleSort = () => {\n    if (this.sortable) {\n      const column = this.hostElement.innerText.trim();\n      this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n\n      this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {\n        headCell.classList.remove('is-active');\n      });\n\n      this.hostElement.classList.toggle('is-active');\n      this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.sortable) {\n      classNames.push('is-sortable');\n    }\n\n    if (this.sortable && this.sortingDirection !== null) {\n      classNames.push('sort-' + this.sortingDirection);\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"columnheader\"\n        onClick={this.toggleSort}\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n        }\n      >\n        <slot></slot>\n        {this.sortable && (\n          <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-table/pds-table-head-cell/stories/pds-table-head-cell.stories.js

@@ -1,24 +0,0 @@
-import { html } from 'lit-html';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
-
-export default {
-  argTypes: extractArgTypes('pds-table-head-cell'),
-  component: 'pds-table-head-cell',
-  decorators: [withActions],
-  title: 'components/Table/Head',
-};
-
-const BaseTemplate = (args) => html`
-<pds-table>
-  <pds-table-head>
-    <pds-table-head-cell sortable=${args.sortable}>Column Heading Alpha</pds-table-head-cell>
-    <pds-table-head-cell sortable=${args.sortable}>Column Heading Beta</pds-table-head-cell>
-    <pds-table-head-cell sortable=${args.sortable}>Column Heading Charlie</pds-table-head-cell>
-  </pds-table-head>
-</pds-table>`;
-
-export const Default = BaseTemplate.bind();
-Default.args = {
-  sortable: false,
-};

package/dist/collection/components/pds-table/pds-table-row/pds-table-row.css

@@ -1,22 +0,0 @@
-:host {
-  --color-background-fixed: var(--pine-color-white);
-  --color-background-interactive: var(--pine-color-grey-200);
-  border-color: inherit;
-  display: table-row;
-  vertical-align: inherit;
-}
-:host::part(checkbox-cell) {
-  background-color: var(--color-background-fixed);
-  left: 0;
-  position: sticky;
-  z-index: 1;
-}
-
-: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);
-}

package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js

@@ -1,71 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class PdsTableRow {
-    constructor() {
-        this.handleCheckboxClick = () => {
-            this.isSelected = !this.isSelected; // Toggle the selected state
-            const selectedIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement);
-            this.pdsTableRowSelected.emit({ rowIndex: selectedIndex, isSelected: this.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;
-        };
-        this.isSelected = false;
-    }
-    classNames() {
-        const classNames = [];
-        if (this.isSelected) {
-            classNames.push("is-selected");
-        }
-        return classNames.join('  ');
-    }
-    componentWillRender() {
-        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");
-        }
-    }
-    render() {
-        return (h(Host, { key: '9ef478c127a101b918e3e444109a0a3b72d809d6', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'f7ecba3776fe1a5606ea66bc43f495e03635803f', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '6e4ebaa953542cb476f141818375b3ba8b490b2c', componentId: this.generateUniqueId(), onClick: this.handleCheckboxClick, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: '4ccbd6b1a81d420dec05acb4f7a404ee670959b3' })));
-    }
-    static get is() { return "pds-table-row"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-table-row.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-table-row.css"]
-        };
-    }
-    static get states() {
-        return {
-            "isSelected": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "pdsTableRowSelected",
-                "name": "pdsTableRowSelected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event that is emitted when the checkbox is clicked, carrying the selected value."
-                },
-                "complexType": {
-                    "original": "{ rowIndex: number; isSelected: boolean; }",
-                    "resolved": "{ rowIndex: number; isSelected: boolean; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "hostElement"; }
-}
-//# sourceMappingURL=pds-table-row.js.map

package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pds-table-row.js","sourceRoot":"","sources":["../../../../src/components/pds-table/pds-table-row/pds-table-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAOxF,MAAM,OAAO,WAAW;;QAcd,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,4BAA4B;YAChE,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACjG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAC1F,CAAC,CAAA;QAqBO,qBAAgB,GAAG,GAAG,EAAE;YAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAChE,MAAM,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;YACjE,MAAM,QAAQ,GAAG,GAAG,YAAY,IAAI,SAAS,EAAE,CAAC;YAEhD,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAA;0BAjC8B,KAAK;;IAQ5B,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;QAE7E,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;YAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;YACnE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IAUD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,KAAK;YAET,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,CAC5C,uEAAgB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC3H,qEACE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACpC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,IAAI,CAAC,UAAU,GACxB,CACa,CAClB;YACD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-row',\n  styleUrl: 'pds-table-row.scss',\n  shadow: true,\n})\nexport class PdsTableRow {\n  @Element() hostElement: HTMLPdsTableRowElement;\n  tableRef: HTMLPdsTableElement;\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableRowSelected: EventEmitter<{ rowIndex: number; isSelected: boolean; }>;\n\n  /**\n   * A local state to track whether the row is currently selected.\n   */\n  @State() isSelected: boolean = false;\n\n  private handleCheckboxClick = () => {\n    this.isSelected = !this.isSelected; // Toggle the selected state\n    const selectedIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement);\n    this.pdsTableRowSelected.emit({ rowIndex: selectedIndex, isSelected: this.isSelected });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.isSelected) {\n      classNames.push(\"is-selected\");\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-cell');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"row\"\n      >\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : ''} class={this.tableRef.selectable ? 'has-checkbox' : ''} >\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              onClick={this.handleCheckboxClick}\n              label={\"Select Row\"}\n              labelHidden={true}\n              checked={this.isSelected}\n            />\n          </pds-table-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-table/pds-table-row/stories/pds-table-row.stories.js

@@ -1,26 +0,0 @@
-import { html } from 'lit-html';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
-
-export default {
-  argTypes: extractArgTypes('pds-table-row'),
-  component: 'pds-table-row',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onclick', 'pdsTableRowSelected'],
-    },
-  },
-  title: 'components/Table/Rows',
-};
-
-const BaseTemplate = () => html`
-<pds-table>
-  <pds-table-row>
-    <pds-table-cell>Row Item Alpha</pds-table-cell>
-    <pds-table-cell>Row Item Beta</pds-table-cell>
-    <pds-table-cell>Row Item Charlie</pds-table-cell>
-  </pds-table-row>
-</pds-table>`;
-
-export const Default = BaseTemplate.bind();

package/dist/collection/components/pds-table/pds-table.css

@@ -1,21 +0,0 @@
-:host {
-  --color-background-default: var(--pine-color-white);
-  background: var(--color-background-default);
-  border-collapse: separate;
-  box-sizing: border-box;
-  display: table;
-  width: 100%;
-}
-
-:host(.is-responsive) {
-  background-attachment: local, local, scroll, scroll;
-  background-image: linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-  background-position: left center, right center, left center, right center;
-  background-repeat: no-repeat;
-  background-size: 4px 100%, 4px 100%, 4px 100%, 4px 100%;
-  display: block;
-  margin: 0 auto;
-  max-width: fit-content;
-  overflow-x: auto;
-  white-space: nowrap;
-}

package/dist/collection/components/pds-table/pds-table.js

@@ -1,181 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class PdsTable {
-    constructor() {
-        this.compact = undefined;
-        this.componentId = undefined;
-        this.responsive = undefined;
-        this.fixedColumn = undefined;
-        this.selectable = undefined;
-        this.sortingColumn = null;
-        this.sortingDirection = 'asc';
-    }
-    componentWillLoad() {
-        this.sortingColumn = null;
-    }
-    classNames() {
-        const classNames = ['pds-table'];
-        if (this.compact) {
-            classNames.push('is-compact');
-        }
-        if (this.responsive) {
-            classNames.push('is-responsive');
-        }
-        return classNames.join('  ');
-    }
-    sortTable(column, direction) {
-        const tableBody = this.el.querySelector('pds-table-body');
-        // Get the rows in the table body
-        const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));
-        // Find the column index based on the column name
-        const columnHeaderCells = Array.from(this.el.querySelectorAll('pds-table-head-cell[sortable]'));
-        const columnHeaderCell = columnHeaderCells.find((cell) => cell.innerText.trim() === column);
-        if (!columnHeaderCell) {
-            console.warn(`Column "${column}" not found.`);
-            return;
-        }
-        const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);
-        // Sort the rows based on the content of the specified column
-        tableRows.sort((a, b) => {
-            const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
-            const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
-            if (direction === 'asc') {
-                return valueA.localeCompare(valueB);
-            }
-            else {
-                return valueB.localeCompare(valueA);
-            }
-        });
-        // Clear and append the sorted rows back to the table body
-        tableBody.innerHTML = '';
-        tableRows.forEach((row) => {
-            tableBody.appendChild(row);
-        });
-    }
-    handleTableSort(event) {
-        const { direction } = event.detail;
-        this.sortTable(event.detail.column, direction);
-        this.sortingColumn = event.detail.column;
-        this.sortingDirection = direction;
-    }
-    render() {
-        return (h(Host, { key: 'ce58b1bccc1ff7ee6e38198e63a19fd88f2877e6', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable }, h("slot", { key: 'b748a8befdd212d16c2e6780551a8c11b1843faf' })));
-    }
-    static get is() { return "pds-table"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-table.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-table.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "compact": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines if table displays compact which reduces the spacing of table cells."
-                },
-                "attribute": "compact",
-                "reflect": false
-            },
-            "componentId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A unique identifier used for the table `id` attribute."
-                },
-                "attribute": "component-id",
-                "reflect": false
-            },
-            "responsive": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Enables the table to be responsive by horizontally scrolling on smaller screens."
-                },
-                "attribute": "responsive",
-                "reflect": false
-            },
-            "fixedColumn": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines if table displays fixed column which fixes the first column of the table."
-                },
-                "attribute": "fixed-column",
-                "reflect": false
-            },
-            "selectable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines if table displays checkboxes for selectable rows."
-                },
-                "attribute": "selectable",
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "sortingColumn": {},
-            "sortingDirection": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "pdsTableSort",
-                "method": "handleTableSort",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-//# sourceMappingURL=pds-table.js.map

package/dist/collection/components/pds-table/pds-table.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pds-table.js","sourceRoot":"","sources":["../../../src/components/pds-table/pds-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrl: 'pds-table.scss',\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n  tableRef: HTMLElement;\n\n  /**\n   * Determines if table displays compact which reduces the spacing of table cells.\n   */\n  @Prop() compact: boolean;\n\n  /**\n   * A unique identifier used for the table `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enables the table to be responsive by horizontally scrolling on smaller screens.\n   */\n  @Prop() responsive: boolean;\n\n  /**\n   * Determines if table displays fixed column which fixes the first column of the table.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  @State() sortingColumn: string | null = null;\n  @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n  componentWillLoad() {\n    this.sortingColumn = null;\n  }\n\n  private classNames() {\n    const classNames = ['pds-table'];\n\n    if (this.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.responsive) {\n      classNames.push('is-responsive');\n    }\n\n    return classNames.join('  ');\n  }\n\n  private sortTable(column: string, direction: 'asc' | 'desc') {\n    const tableBody = this.el.querySelector('pds-table-body');\n\n    // Get the rows in the table body\n    const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n    // Find the column index based on the column name\n    const columnHeaderCells: HTMLElement[] = Array.from(\n      this.el.querySelectorAll('pds-table-head-cell[sortable]')\n    );\n\n    const columnHeaderCell = columnHeaderCells.find(\n      (cell) => cell.innerText.trim() === column\n    );\n\n    if (!columnHeaderCell) {\n      console.warn(`Column \"${column}\" not found.`);\n      return;\n    }\n\n    const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n    // Sort the rows based on the content of the specified column\n    tableRows.sort((a, b) => {\n      const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n      const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n      if (direction === 'asc') {\n        return valueA.localeCompare(valueB);\n      } else {\n        return valueB.localeCompare(valueA);\n      }\n    });\n\n    // Clear and append the sorted rows back to the table body\n    tableBody.innerHTML = '';\n    tableRows.forEach((row) => {\n      tableBody.appendChild(row);\n    });\n  }\n\n  @Listen('pdsTableSort')\n  handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n    const { direction } = event.detail;\n    this.sortTable(event.detail.column, direction);\n    this.sortingColumn = event.detail.column;\n    this.sortingDirection = direction;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}