npm - @pine-ds/core - Versions diffs - 3.17.0 → 3.18.0 - Mend

@pine-ds/core 3.17.0 → 3.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (334) hide show

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

	@@ -1 +1 @@
1	- {"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,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE9F,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAOjD,MAAM,OAAO,WAAW;IALxB;QAQU,aAAQ,GAA4B,IAAI,CAAC;QACzC,iBAAY,GAA4B,IAAI,CAAC;QAYrD;;;WAGG;QACc,eAAU,GAAY,KAAK,CAAC;QAE7C;;;WAGG;QACc,cAAS,GAAY,KAAK,CAAC;QAOpC,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,4BAA4B;YAChE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACrC,CAAC,CAAA;QAEO,iBAAY,GAAG,CAAC,UAAmB,EAAE,EAAE;YAC7C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAE3B,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;gBACjD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;gBAC3F,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;oBAC5B,QAAQ;oBACR,UAAU;iBACX,CAAC,CAAA;YACJ,CAAC;QACH,CAAC,CAAA;QA0HO,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;KA0BF;IAxJS,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,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,mBAAmB;QACjB,oDAAoD;QACpD,wDAAwD;QACxD,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;IAED,iBAAiB;QACf,iCAAiC;QACjC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACrC,CAAC;QACD,+EAA+E;QAC/E,uFAAuF;IACzF,CAAC;IAED,iBAAiB;QACf,8DAA8D;QAC9D,4EAA4E;QAC5E,iFAAiF;QACjF,mEAAmE;QACnE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;QAC7E,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,wCAAwC;QACxC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,iEAAiE;QACjE,IAAI,IAAI,CAAC,QAAQ,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE,CAAC;YAC7D,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;gBACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC5B,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACnC,UAAU,EAAE,IAAI;gBAChB,eAAe,EAAE,CAAC,cAAc,CAAC;aAClC,CAAC,CAAC;QACL,CAAC;QAED,4FAA4F;QAC5F,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC7D,IAAI,SAAS,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE,CAAC;YACzD,IAAI,CAAC,YAAY,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;gBAC5C,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC5B,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,SAAS,EAAE;gBACnC,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;QAC/E,CAAC;QACD,6EAA6E;QAC7E,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IACxD,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3C,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,OAAO;QACT,CAAC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC7D,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;YACrE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC;QAC9D,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAUD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,KAAK,EACV,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;gBACxI,qEACE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACpC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,IAAI,EAAC,cAAc,GACnB,CACa,CAClB;YACD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Event, EventEmitter, Prop, State } from '@stencil/core';\n\nimport { closest } from '../../../utils/closest';\n\n@Component({\n tag: 'pds-table-row',\n styleUrls: ['pds-table-row.scss'],\n shadow: true,\n})\nexport class PdsTableRow {\n @Element() hostElement: HTMLPdsTableRowElement;\n private tableRef: HTMLPdsTableElement;\n private observer: MutationObserver \| null = null;\n private bodyObserver: MutationObserver \| null = null;\n\n /*\n Determines if the row selected is in an indeterminate state.\n /\n @Prop({ mutable: true }) indeterminate?: boolean;\n\n /\n Determines if the table row is currently selected.\n /\n @Prop({ mutable: true }) isSelected?: boolean;\n\n /\n Determines if the row should have a divider border.\n * @defaultValue false\n /\n @State() private hasDivider: boolean = false;\n\n /\n Determines if this is the last row in the table body.\n * @defaultValue false\n /\n @State() private isLastRow: boolean = false;\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 private handleClick = () => {\n this.isSelected = !this.isSelected; // Toggle the selected state\n this.handleSelect(this.isSelected);\n }\n\n private handleSelect = (isSelected: boolean) => {\n this.indeterminate = false;\n\n if (!closest('pds-table-head', this.hostElement)) {\n const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement)\n this.pdsTableRowSelected.emit({\n rowIndex,\n isSelected,\n })\n }\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.isSelected) {\n classNames.push(\"is-selected\");\n }\n\n if (this.hasDivider) {\n classNames.push(\"has-divider\");\n }\n\n if (this.isLastRow) {\n classNames.push(\"is-last-row\");\n }\n\n return classNames.join(' ');\n }\n\n componentWillRender() {\n // Always refresh tableRef to get latest prop values\n // This ensures we pick up changes to parent table props\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 componentWillLoad() {\n // Handle initial selection state\n if (this.isSelected) {\n this.handleSelect(this.isSelected);\n }\n // Note: tableRef, observers, and divider state are set up in connectedCallback\n // which runs before componentWillLoad and also handles row re-attachment after sorting\n }\n\n connectedCallback() {\n // When a row is re-attached to the DOM (e.g., after sorting),\n // we need to re-setup the observers since disconnectedCallback cleared them\n // Note: componentDidLoad only fires once, but connectedCallback fires every time\n // the element is attached to the DOM (including after being moved)\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n this.setupObservers();\n this.updateDividerState();\n }\n\n disconnectedCallback() {\n this.cleanupObservers();\n }\n\n private cleanupObservers() {\n if (this.observer) {\n this.observer.disconnect();\n this.observer = null;\n }\n if (this.bodyObserver) {\n this.bodyObserver.disconnect();\n this.bodyObserver = null;\n }\n }\n\n private setupObservers() {\n // Clean up any existing observers first\n this.cleanupObservers();\n\n // Watch for changes to the parent table's row-dividers attribute\n if (this.tableRef && typeof MutationObserver !== 'undefined') {\n this.observer = new MutationObserver(() => {\n this.updateDividerState();\n });\n\n this.observer.observe(this.tableRef, {\n attributes: true,\n attributeFilter: ['row-dividers']\n });\n }\n\n // Watch for child list changes in table body (e.g., when rows are reordered during sorting)\n const tableBody = this.hostElement.closest('pds-table-body');\n if (tableBody && typeof MutationObserver !== 'undefined') {\n this.bodyObserver = new MutationObserver(() => {\n this.updateLastRowState();\n });\n\n this.bodyObserver.observe(tableBody, {\n childList: true\n });\n }\n }\n\n private shouldHaveDivider(): boolean {\n if (!this.tableRef) {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n // Reads the parent pds-table component's rowDividers property value directly\n return !!(this.tableRef && this.tableRef.rowDividers);\n }\n\n private updateDividerState() {\n this.hasDivider = this.shouldHaveDivider();\n this.updateLastRowState();\n }\n\n private updateLastRowState() {\n if (!this.hasDivider) {\n this.isLastRow = false;\n return;\n }\n\n const tableBody = this.hostElement.closest('pds-table-body');\n if (tableBody) {\n const rows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n this.isLastRow = rows[rows.length - 1] === this.hostElement;\n } else {\n this.isLastRow = false;\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 part=\"row\"\n >\n {this.tableRef && this.tableRef.selectable && (\n <pds-table-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell'} class={this.tableRef.selectable ? 'has-checkbox' : ''} >\n <pds-checkbox\n componentId={this.generateUniqueId()}\n onClick={this.handleClick}\n indeterminate={this.indeterminate}\n label={\"Select Row\"}\n hideLabel={true}\n checked={this.isSelected}\n part=\"row-checkbox\"\n />\n </pds-table-cell>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pds-table-row.js","sourceRoot":"","sources":["../../../../../src/components/pds-table/pds-table-row/pds-table-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Event, EventEmitter, Prop, State } from '@stencil/core';\n\nimport { CheckboxChangeEventDetail } from '../../pds-checkbox/checkbox-interface';\nimport { closest } from '../../../utils/closest';\n\n@Component({\n tag: 'pds-table-row',\n styleUrls: ['pds-table-row.scss'],\n shadow: true,\n})\nexport class PdsTableRow {\n @Element() hostElement: HTMLPdsTableRowElement;\n private tableRef: HTMLPdsTableElement;\n private observer: MutationObserver \| null = null;\n private bodyObserver: MutationObserver \| null = null;\n\n /*\n Determines if the row selected is in an indeterminate state.\n /\n @Prop({ mutable: true }) indeterminate?: boolean;\n\n /\n Determines if the table row is currently selected.\n /\n @Prop({ mutable: true }) isSelected?: boolean;\n\n /\n Determines if the row should have a divider border.\n * @defaultValue false\n /\n @State() private hasDivider: boolean = false;\n\n /\n Determines if this is the last row in the table body.\n * @defaultValue false\n /\n @State() private isLastRow: boolean = false;\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 private handleCheckboxChange = (event: CustomEvent<CheckboxChangeEventDetail>) => {\n this.isSelected = event.detail.checked;\n this.handleSelect(this.isSelected);\n }\n\n private handleSelect = (isSelected: boolean) => {\n this.indeterminate = false;\n\n if (!closest('pds-table-head', this.hostElement)) {\n const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement)\n this.pdsTableRowSelected.emit({\n rowIndex,\n isSelected,\n })\n }\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.isSelected) {\n classNames.push(\"is-selected\");\n }\n\n if (this.hasDivider) {\n classNames.push(\"has-divider\");\n }\n\n if (this.isLastRow) {\n classNames.push(\"is-last-row\");\n }\n\n return classNames.join(' ');\n }\n\n componentWillRender() {\n // Always refresh tableRef to get latest prop values\n // This ensures we pick up changes to parent table props\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 componentWillLoad() {\n // Handle initial selection state\n if (this.isSelected) {\n this.handleSelect(this.isSelected);\n }\n // Note: tableRef, observers, and divider state are set up in connectedCallback\n // which runs before componentWillLoad and also handles row re-attachment after sorting\n }\n\n connectedCallback() {\n // When a row is re-attached to the DOM (e.g., after sorting),\n // we need to re-setup the observers since disconnectedCallback cleared them\n // Note: componentDidLoad only fires once, but connectedCallback fires every time\n // the element is attached to the DOM (including after being moved)\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n this.setupObservers();\n this.updateDividerState();\n }\n\n disconnectedCallback() {\n this.cleanupObservers();\n }\n\n private cleanupObservers() {\n if (this.observer) {\n this.observer.disconnect();\n this.observer = null;\n }\n if (this.bodyObserver) {\n this.bodyObserver.disconnect();\n this.bodyObserver = null;\n }\n }\n\n private setupObservers() {\n // Clean up any existing observers first\n this.cleanupObservers();\n\n // Watch for changes to the parent table's row-dividers attribute\n if (this.tableRef && typeof MutationObserver !== 'undefined') {\n this.observer = new MutationObserver(() => {\n this.updateDividerState();\n });\n\n this.observer.observe(this.tableRef, {\n attributes: true,\n attributeFilter: ['row-dividers']\n });\n }\n\n // Watch for child list changes in table body (e.g., when rows are reordered during sorting)\n const tableBody = this.hostElement.closest('pds-table-body');\n if (tableBody && typeof MutationObserver !== 'undefined') {\n this.bodyObserver = new MutationObserver(() => {\n this.updateLastRowState();\n });\n\n this.bodyObserver.observe(tableBody, {\n childList: true\n });\n }\n }\n\n private shouldHaveDivider(): boolean {\n if (!this.tableRef) {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n // Reads the parent pds-table component's rowDividers property value directly\n return !!(this.tableRef && this.tableRef.rowDividers);\n }\n\n private updateDividerState() {\n this.hasDivider = this.shouldHaveDivider();\n this.updateLastRowState();\n }\n\n private updateLastRowState() {\n if (!this.hasDivider) {\n this.isLastRow = false;\n return;\n }\n\n const tableBody = this.hostElement.closest('pds-table-body');\n if (tableBody) {\n const rows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n this.isLastRow = rows[rows.length - 1] === this.hostElement;\n } else {\n this.isLastRow = false;\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 part=\"row\"\n >\n {this.tableRef && this.tableRef.selectable && (\n <pds-table-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell'} class={this.tableRef.selectable ? 'has-checkbox' : ''} >\n <pds-checkbox\n componentId={this.generateUniqueId()}\n onPdsCheckboxChange={this.handleCheckboxChange}\n indeterminate={this.indeterminate}\n label={\"Select Row\"}\n hideLabel={true}\n checked={this.isSelected}\n part=\"row-checkbox\"\n />\n </pds-table-cell>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -6,6 +6,7 @@
   border-radius: inherit;
   box-sizing: border-box;
   display: table;
+  isolation: isolate;
   width: 100%;
 }

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

@@ -6,6 +6,12 @@ export class PdsTable {
         this._responsiveHandleResize = null;
         this._responsiveResizeObserver = null;
         this._teardownResponsive = null;
+        /**
+         * Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.
+         * Only applies when `selectable` is true.
+         * @defaultValue false
+         */
+        this.disableSelectAll = false;
         /**
          * Adds divider borders between table rows. The last row will not have a bottom border.
          * @defaultValue false
@@ -225,8 +231,10 @@ export class PdsTable {
         if (!pdsTableHead)
             return;
         const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');
-        headerCheckbox.checked = allSelectedRows;
-        headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
+        if (headerCheckbox) {
+            headerCheckbox.checked = allSelectedRows;
+            headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
+        }
     }
     render() {
         if (this.responsive) {
@@ -343,6 +351,29 @@ export class PdsTable {
                 "reflect": false,
                 "attribute": "selectable"
             },
+            "disableSelectAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.\nOnly applies when `selectable` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-select-all",
+                "defaultValue": "false"
+            },
             "rowDividers": {
                 "type": "boolean",
                 "mutable": false,
@@ -418,21 +449,6 @@ export class PdsTable {
     }
     static get events() {
         return [{
-                "method": "pdsTableSelect",
-                "name": "pdsTableSelect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value."
-                },
-                "complexType": {
-                    "original": "{ rowIndex: number; isSelected: boolean }",
-                    "resolved": "{ rowIndex: number; isSelected: boolean; }",
-                    "references": {}
-                }
-            }, {
                 "method": "pdsTableSelectAll",
                 "name": "pdsTableSelectAll",
                 "bubbles": true,

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

	@@ -1 +1 @@
1	- {"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, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'pds-table',\n styleUrls: ['pds-table.scss'],\n shadow: true,\n})\nexport class PdsTable {\n @Element() el: HTMLPdsTableElement;\n private scrollContainer: HTMLElement \| null = null;\n private _responsiveHandleScroll: (() => void) \| null = null;\n private _responsiveHandleResize: (() => void) \| null = null;\n private _responsiveResizeObserver: ResizeObserver \| null = null;\n private _teardownResponsive: (() => void) \| null = null;\n\n /*\n Determines if the table displays with reduced table cell padding.\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 the should display a fixed first column.\n /\n @Prop() fixedColumn: boolean;\n\n /\n Determines if the table displays checkboxes for selectable rows.\n /\n @Prop() selectable: boolean;\n\n /\n Adds divider borders between table rows. The last row will not have a bottom border.\n * @defaultValue false\n /\n @Prop({ reflect: true }) rowDividers: boolean = false;\n\n /\n The name of the column to sort by on initial load.\n * Must match the text content of a sortable column header.\n /\n @Prop() defaultSortColumn?: string;\n\n /\n The direction to sort the default column on initial load.\n * Only applies if `defaultSortColumn` is set.\n * @defaultValue 'asc'\n /\n @Prop() defaultSortDirection?: 'asc' \| 'desc' = 'asc';\n\n /\n The name of the column being sorted.\n * @defaultValue null\n /\n @State() sortingColumn: string \| null = null;\n\n /\n The direction of sorting.\n * @defaultValue 'asc'\n /\n @State() sortingDirection: 'asc' \| 'desc' = 'asc';\n\n\n /\n Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n /\n @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n /\n Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n /\n @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n componentDidLoad() {\n if (this.responsive) {\n this.setupResponsiveScrolling();\n }\n\n // Apply default sort if specified\n // Use requestAnimationFrame to defer until child components are fully initialized\n if (this.defaultSortColumn) {\n requestAnimationFrame(() => {\n void this.applyDefaultSort().catch((err) => {\n console.warn('Failed to apply default sort.', err);\n });\n });\n }\n }\n\n /\n Applies the default sort configuration on initial load.\n * Finds the matching column header and activates its sort state.\n * @private\n /\n private async applyDefaultSort() {\n // Normalize direction to handle invalid HTML attribute values\n const direction: 'asc' \| 'desc' = this.defaultSortDirection === 'desc' ? 'desc' : 'asc';\n\n // Find the matching sortable header cell\n const columnHeaderCells = Array.from(\n this.el.querySelectorAll('pds-table-head-cell[sortable]')\n ) as HTMLPdsTableHeadCellElement[];\n\n const matchingCell = columnHeaderCells.find(\n (cell) => (cell.textContent ?? '').trim() === this.defaultSortColumn\n );\n\n if (matchingCell) {\n const columnName = (matchingCell.textContent ?? '').trim();\n // Sort the table data\n this.sortTable(columnName, direction);\n this.sortingColumn = columnName;\n this.sortingDirection = direction;\n\n // Activate the visual state on the header cell\n await matchingCell.setActiveSort(direction);\n } else {\n console.warn(`Default sort column \"${this.defaultSortColumn}\" not found.`);\n }\n }\n\n disconnectedCallback() {\n if (this._teardownResponsive) {\n this._teardownResponsive();\n this._teardownResponsive = null;\n }\n }\n\n /\n Sets up responsive scrolling behavior for the table.\n \n This method creates a horizontal scrolling system where:\n * - The table content can scroll horizontally when it exceeds the container width\n * - Scroll shadows appear at the left/right edges to indicate scrollable content\n * - Fixed columns remain sticky during horizontal scrolling\n * - Shadows respect border-radius and don't appear when there's nothing to scroll\n \n Architecture:\n * - Host element: Contains everything, respects parent constraints\n * - Container element: Handles horizontal scrolling (overflow-x: auto)\n * - Shadow elements: Positioned fixed relative to host, show scroll indicators\n \n @private\n /\n private setupResponsiveScrolling() {\n const container = this.el.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n const leftShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-left') as HTMLElement;\n const rightShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-right') as HTMLElement;\n\n if (!container \|\| !leftShadow \|\| !rightShadow) return;\n\n // Store container reference for cleanup\n this.scrollContainer = container;\n\n /\n Updates the visibility of scroll shadows based on current scroll position.\n * Left shadow: Shows when scrolled away from start (hidden if fixedColumn is enabled)\n * Right shadow: Shows when there's content to scroll and not at the end\n */\n this._responsiveHandleScroll = () => {\n if (!this.scrollContainer) return;\n\n const scrollLeft = this.scrollContainer.scrollLeft;\n const maxScrollLeft = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\n\n // Show left shadow when scrolled away from start, but not if there's a fixed column\n leftShadow.style.opacity = (scrollLeft > 0 && !this.fixedColumn) ? '1' : '0';\n\n // Show right shadow only if there's content to scroll AND not at end\n rightShadow.style.opacity = (maxScrollLeft > 0 && scrollLeft < maxScrollLeft - 1) ? '1' : '0';\n };\n\n // Add scroll event listener to container element\n this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });\n\n // Add resize observer to update shadows when container size changes\n if (typeof window !== 'undefined' && window.ResizeObserver) {\n try {\n this._responsiveResizeObserver = new ResizeObserver(() => {\n this._responsiveHandleScroll?.();\n });\n this._responsiveResizeObserver.observe(this.scrollContainer);\n } catch (error) {\n // ResizeObserver not available in some environments (e.g., tests)\n // Fall back to window resize listener only\n }\n }\n\n // Listen for window resize as fallback\n if (typeof window !== 'undefined') {\n this._responsiveHandleResize = () => {\n this._responsiveHandleScroll?.();\n };\n window.addEventListener('resize', this._responsiveHandleResize);\n }\n\n // Create teardown function for cleanup\n this._teardownResponsive = () => {\n if (this.scrollContainer && this._responsiveHandleScroll) {\n this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);\n this.scrollContainer = null;\n }\n\n if (this._responsiveResizeObserver) {\n this._responsiveResizeObserver.disconnect();\n this._responsiveResizeObserver = null;\n }\n\n if (typeof window !== 'undefined' && this._responsiveHandleResize) {\n window.removeEventListener('resize', this._responsiveHandleResize);\n this._responsiveHandleResize = null;\n }\n\n this._responsiveHandleScroll = null;\n };\n\n // Initial check after setup\n this._responsiveHandleScroll();\n }\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 // Return early if no table body exists\n if (!tableBody) return;\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, undefined, { sensitivity: 'base' });\n } else {\n return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });\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 if (event.defaultPrevented) return;\n\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 @Listen('pdsTableSelectAll')\n handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n if (event.defaultPrevented) return;\n\n const pdsTableBody = this.el.querySelector('pds-table-body');\n const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n tableRows.forEach((row) => {\n row.isSelected = event.detail.isSelected;\n });\n }\n\n @Listen('pdsTableRowSelected')\n async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n if (event.defaultPrevented) return;\n\n const allTableRows = this.el.querySelectorAll('pds-table-row');\n const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n const pdsTableHead = this.el.querySelector('pds-table-head');\n if (!pdsTableHead) return;\n\n const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n headerCheckbox.checked = allSelectedRows;\n headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n }\n\n render() {\n if (this.responsive) {\n return (\n <Host\n class=\"pds-table is-responsive pds-table-responsive-host\"\n id={this.componentId}\n role=\"grid\"\n selectable={this.selectable}\n tabindex=\"0\"\n part=\"table responsive-table\"\n >\n <div class=\"scroll-shadow-left\" part=\"scroll-shadow-left\"></div>\n <div class=\"scroll-shadow-right\" part=\"scroll-shadow-right\"></div>\n <div class=\"pds-table-responsive-container\" part=\"responsive-container\">\n <div class=\"pds-table-responsive-wrapper\" part=\"responsive-wrapper\">\n <div class={this.classNames()} part=\"table-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n return (\n <Host\n class={this.classNames()}\n id={this.componentId}\n role=\"grid\"\n selectable={this.selectable}\n tabindex=\"0\"\n part=\"table\"\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"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, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'pds-table',\n styleUrls: ['pds-table.scss'],\n shadow: true,\n})\nexport class PdsTable {\n @Element() el: HTMLPdsTableElement;\n private scrollContainer: HTMLElement \| null = null;\n private _responsiveHandleScroll: (() => void) \| null = null;\n private _responsiveHandleResize: (() => void) \| null = null;\n private _responsiveResizeObserver: ResizeObserver \| null = null;\n private _teardownResponsive: (() => void) \| null = null;\n\n /*\n Determines if the table displays with reduced table cell padding.\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 the should display a fixed first column.\n /\n @Prop() fixedColumn: boolean;\n\n /\n Determines if the table displays checkboxes for selectable rows.\n /\n @Prop() selectable: boolean;\n\n /\n Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.\n * Only applies when `selectable` is true.\n * @defaultValue false\n /\n @Prop() disableSelectAll: boolean = false;\n\n /\n Adds divider borders between table rows. The last row will not have a bottom border.\n * @defaultValue false\n /\n @Prop({ reflect: true }) rowDividers: boolean = false;\n\n /\n The name of the column to sort by on initial load.\n * Must match the text content of a sortable column header.\n /\n @Prop() defaultSortColumn?: string;\n\n /\n The direction to sort the default column on initial load.\n * Only applies if `defaultSortColumn` is set.\n * @defaultValue 'asc'\n /\n @Prop() defaultSortDirection?: 'asc' \| 'desc' = 'asc';\n\n /\n The name of the column being sorted.\n * @defaultValue null\n /\n @State() sortingColumn: string \| null = null;\n\n /\n The direction of sorting.\n * @defaultValue 'asc'\n /\n @State() sortingDirection: 'asc' \| 'desc' = 'asc';\n\n\n /\n Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n /\n @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n componentDidLoad() {\n if (this.responsive) {\n this.setupResponsiveScrolling();\n }\n\n // Apply default sort if specified\n // Use requestAnimationFrame to defer until child components are fully initialized\n if (this.defaultSortColumn) {\n requestAnimationFrame(() => {\n void this.applyDefaultSort().catch((err) => {\n console.warn('Failed to apply default sort.', err);\n });\n });\n }\n }\n\n /\n Applies the default sort configuration on initial load.\n * Finds the matching column header and activates its sort state.\n * @private\n /\n private async applyDefaultSort() {\n // Normalize direction to handle invalid HTML attribute values\n const direction: 'asc' \| 'desc' = this.defaultSortDirection === 'desc' ? 'desc' : 'asc';\n\n // Find the matching sortable header cell\n const columnHeaderCells = Array.from(\n this.el.querySelectorAll('pds-table-head-cell[sortable]')\n ) as HTMLPdsTableHeadCellElement[];\n\n const matchingCell = columnHeaderCells.find(\n (cell) => (cell.textContent ?? '').trim() === this.defaultSortColumn\n );\n\n if (matchingCell) {\n const columnName = (matchingCell.textContent ?? '').trim();\n // Sort the table data\n this.sortTable(columnName, direction);\n this.sortingColumn = columnName;\n this.sortingDirection = direction;\n\n // Activate the visual state on the header cell\n await matchingCell.setActiveSort(direction);\n } else {\n console.warn(`Default sort column \"${this.defaultSortColumn}\" not found.`);\n }\n }\n\n disconnectedCallback() {\n if (this._teardownResponsive) {\n this._teardownResponsive();\n this._teardownResponsive = null;\n }\n }\n\n /\n Sets up responsive scrolling behavior for the table.\n \n This method creates a horizontal scrolling system where:\n * - The table content can scroll horizontally when it exceeds the container width\n * - Scroll shadows appear at the left/right edges to indicate scrollable content\n * - Fixed columns remain sticky during horizontal scrolling\n * - Shadows respect border-radius and don't appear when there's nothing to scroll\n \n Architecture:\n * - Host element: Contains everything, respects parent constraints\n * - Container element: Handles horizontal scrolling (overflow-x: auto)\n * - Shadow elements: Positioned fixed relative to host, show scroll indicators\n \n @private\n /\n private setupResponsiveScrolling() {\n const container = this.el.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n const leftShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-left') as HTMLElement;\n const rightShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-right') as HTMLElement;\n\n if (!container \|\| !leftShadow \|\| !rightShadow) return;\n\n // Store container reference for cleanup\n this.scrollContainer = container;\n\n /\n Updates the visibility of scroll shadows based on current scroll position.\n * Left shadow: Shows when scrolled away from start (hidden if fixedColumn is enabled)\n * Right shadow: Shows when there's content to scroll and not at the end\n */\n this._responsiveHandleScroll = () => {\n if (!this.scrollContainer) return;\n\n const scrollLeft = this.scrollContainer.scrollLeft;\n const maxScrollLeft = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\n\n // Show left shadow when scrolled away from start, but not if there's a fixed column\n leftShadow.style.opacity = (scrollLeft > 0 && !this.fixedColumn) ? '1' : '0';\n\n // Show right shadow only if there's content to scroll AND not at end\n rightShadow.style.opacity = (maxScrollLeft > 0 && scrollLeft < maxScrollLeft - 1) ? '1' : '0';\n };\n\n // Add scroll event listener to container element\n this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });\n\n // Add resize observer to update shadows when container size changes\n if (typeof window !== 'undefined' && window.ResizeObserver) {\n try {\n this._responsiveResizeObserver = new ResizeObserver(() => {\n this._responsiveHandleScroll?.();\n });\n this._responsiveResizeObserver.observe(this.scrollContainer);\n } catch (error) {\n // ResizeObserver not available in some environments (e.g., tests)\n // Fall back to window resize listener only\n }\n }\n\n // Listen for window resize as fallback\n if (typeof window !== 'undefined') {\n this._responsiveHandleResize = () => {\n this._responsiveHandleScroll?.();\n };\n window.addEventListener('resize', this._responsiveHandleResize);\n }\n\n // Create teardown function for cleanup\n this._teardownResponsive = () => {\n if (this.scrollContainer && this._responsiveHandleScroll) {\n this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);\n this.scrollContainer = null;\n }\n\n if (this._responsiveResizeObserver) {\n this._responsiveResizeObserver.disconnect();\n this._responsiveResizeObserver = null;\n }\n\n if (typeof window !== 'undefined' && this._responsiveHandleResize) {\n window.removeEventListener('resize', this._responsiveHandleResize);\n this._responsiveHandleResize = null;\n }\n\n this._responsiveHandleScroll = null;\n };\n\n // Initial check after setup\n this._responsiveHandleScroll();\n }\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 // Return early if no table body exists\n if (!tableBody) return;\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, undefined, { sensitivity: 'base' });\n } else {\n return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });\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 if (event.defaultPrevented) return;\n\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 @Listen('pdsTableSelectAll')\n handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n if (event.defaultPrevented) return;\n\n const pdsTableBody = this.el.querySelector('pds-table-body');\n const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n tableRows.forEach((row) => {\n row.isSelected = event.detail.isSelected;\n });\n }\n\n @Listen('pdsTableRowSelected')\n async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n if (event.defaultPrevented) return;\n\n const allTableRows = this.el.querySelectorAll('pds-table-row');\n const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n const pdsTableHead = this.el.querySelector('pds-table-head');\n if (!pdsTableHead) return;\n\n const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n if (headerCheckbox) {\n headerCheckbox.checked = allSelectedRows;\n headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n }\n }\n\n render() {\n if (this.responsive) {\n return (\n <Host\n class=\"pds-table is-responsive pds-table-responsive-host\"\n id={this.componentId}\n role=\"grid\"\n selectable={this.selectable}\n tabindex=\"0\"\n part=\"table responsive-table\"\n >\n <div class=\"scroll-shadow-left\" part=\"scroll-shadow-left\"></div>\n <div class=\"scroll-shadow-right\" part=\"scroll-shadow-right\"></div>\n <div class=\"pds-table-responsive-container\" part=\"responsive-container\">\n <div class=\"pds-table-responsive-wrapper\" part=\"responsive-wrapper\">\n <div class={this.classNames()} part=\"table-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n return (\n <Host\n class={this.classNames()}\n id={this.componentId}\n role=\"grid\"\n selectable={this.selectable}\n tabindex=\"0\"\n part=\"table\"\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/pds-table/stories/pds-table.stories.js CHANGED Viewed

@@ -24,6 +24,10 @@ export default {
       control: { type: 'boolean' },
       description: 'Adds divider borders between table rows. The last row will not have a bottom border',
     },
+    disableSelectAll: {
+      control: { type: 'boolean' },
+      description: 'Hides the select-all checkbox in the table header while keeping individual row checkboxes functional. Only applies when selectable is true.',
+    },
     defaultSortColumn: {
       control: { type: 'text' },
       description: 'The name of the column to sort by on initial load. Must match the text content of a sortable column header.',
@@ -50,6 +54,7 @@ const BaseTemplate = (args) => html`
   ?responsive=${args.responsive}
   ?row-dividers=${args.rowDividers}
   ?selectable=${args.selectable}
+  ?disable-select-all=${args.disableSelectAll}
 >
   <pds-table-head
     ?border=${args.border}
@@ -373,6 +378,19 @@ Selectable.args = {
   selectable: true,
 };
+export const DisableSelectAll = BaseTemplate.bind();
+DisableSelectAll.args = {
+  compact: false,
+  componentId: 'selectable-no-select-all',
+  fixedColumn: false,
+  border: false,
+  background: false,
+  responsive: false,
+  rowDividers: false,
+  selectable: true,
+  disableSelectAll: true,
+};
 export const Responsive = ResponsiveTemplate.bind();
 Responsive.args = {
   compact: false,
@@ -437,3 +455,43 @@ RowDividers.args = {
   rowDividers: true,
   selectable: false,
 };
+const TruncateTemplate = (args) => html`
+<pds-table
+  component-id="truncate"
+  ?row-dividers=${args.rowDividers}
+>
+  <pds-table-head ?border=${args.border}>
+    <pds-table-head-cell>Name</pds-table-head-cell>
+    <pds-table-head-cell>Email</pds-table-head-cell>
+    <pds-table-head-cell>Description</pds-table-head-cell>
+    <pds-table-head-cell>Status</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell truncate>Jonathan Alexander Bartholomew III</pds-table-cell>
+      <pds-table-cell truncate>jonathan.alexander.bartholomew.iii@longcompanyname.example.com</pds-table-cell>
+      <pds-table-cell truncate>Senior Principal Staff Software Engineer, Platform Infrastructure & Developer Experience</pds-table-cell>
+      <pds-table-cell>Active</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Jane Smith</pds-table-cell>
+      <pds-table-cell truncate>jane@example.com</pds-table-cell>
+      <pds-table-cell truncate>Product Manager</pds-table-cell>
+      <pds-table-cell>Active</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Alexandra Christina Rodriguez-Fitzgerald</pds-table-cell>
+      <pds-table-cell truncate>alexandra.rodriguez-fitzgerald@international-enterprise-solutions.co.uk</pds-table-cell>
+      <pds-table-cell truncate>Vice President of Customer Success and Strategic Partnerships, EMEA Region</pds-table-cell>
+      <pds-table-cell>Pending</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>
+<pds-text tag="p" size="xs" color="secondary" gutter="sm">Hover over truncated cells to see the full content in a tooltip.</pds-text>`;
+export const Truncate = TruncateTemplate.bind();
+Truncate.args = {
+  border: true,
+  rowDividers: true,
+};

package/dist/collection/components/pds-text/pds-text.js CHANGED Viewed

@@ -1,15 +1,50 @@
 import { h } from "@stencil/core";
 import { setColor } from "../../utils/utils";
+import { setupTruncationTooltip } from "../../utils/truncation-tooltip";
 /**
  * @part content - The text content container
  */
 export class PdsText {
     constructor() {
+        this.truncationCleanup = null;
         /**
          * Determines what semantic text tag to render.
          */
         this.tag = "p";
     }
+    handleTruncateChange(newValue) {
+        if (newValue) {
+            this.initTruncationTooltip();
+        }
+        else {
+            this.destroyTruncationTooltip();
+        }
+    }
+    componentDidLoad() {
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    disconnectedCallback() {
+        this.destroyTruncationTooltip();
+    }
+    initTruncationTooltip() {
+        // Clean up any existing tooltip before setting up a new one
+        this.destroyTruncationTooltip();
+        if (this.contentEl) {
+            this.truncationCleanup = setupTruncationTooltip({
+                hostEl: this.el,
+                contentEl: this.contentEl,
+                getTooltipText: () => this.el.textContent || '',
+            });
+        }
+    }
+    destroyTruncationTooltip() {
+        if (this.truncationCleanup) {
+            this.truncationCleanup();
+            this.truncationCleanup = null;
+        }
+    }
     render() {
         const Tag = this.tag;
         const typeClasses = `
@@ -20,7 +55,7 @@ export class PdsText {
       ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
       ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
     `;
-        return (h(Tag, { key: '3332211f473c2e8eeb79214352939df07a51fec1', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: 'd73ebe8fdf9f78d16aca70161bdc27138286328d' })));
+        return (h(Tag, { key: 'e5d4fa802fbc1a66c21d6e959fb2228f8cac1902', ref: (el) => this.contentEl = el, style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, h("slot", { key: '4ff0b2cb3a185fd97ef296262790379df832b7b8' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }
@@ -201,7 +236,7 @@ export class PdsText {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If set or `true`, the text will be truncated. Must add a `width` to the element."
+                    "text": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: When truncate is enabled, the element automatically receives tabindex=\"0\" for keyboard accessibility."
                 },
                 "getter": false,
                 "setter": false,
@@ -211,5 +246,11 @@ export class PdsText {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "truncate",
+                "methodName": "handleTruncateChange"
+            }];
+    }
 }
 //# sourceMappingURL=pds-text.js.map

package/dist/collection/components/pds-text/pds-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-text.js","sourceRoot":"","sources":["../../../../src/components/pds-text/pds-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;~~AAC5D~~,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;~~AAE7C~~;;GAEG;AAMH,MAAM,OAAO,OAAO;IALpB;~~QAsEE~~;;WAEG;QACK,QAAG,GAWF,GAAG,CAAC;~~KAyBd~~;~~IAlBC~~,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAErB,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,wBAAwB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE;KAClH,CAAC;QAEF,OAAO,CACL,EAAC,GAAG,~~qDAAC~~,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,~~EAAE~~,KAAK,EAAE,WAAW,~~EAAE~~,IAAI,EAAC,SAAS;~~YAChF~~,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\n/*\n @part content - The text content container\n /\n@Component({\n tag: 'pds-text',\n styleUrl: 'pds-text.scss',\n shadow: true,\n})\nexport class PdsText {\n @Element() el: HTMLPdsTextElement;\n /\n Sets the text alignment.\n /\n @Prop() align?: 'start' \| 'center' \| 'end' \| 'justify';\n\n /\n Sets the text color.\n /\n @Prop() color?: string;\n\n /\n Sets the text decoration.\n /\n @Prop() decoration?:\n \| 'strikethrough'\n \| 'underline-dotted';\n\n /\n Set the bottom margin for the text.\n /\n @Prop() gutter?:\n \| '2xl'\n \| 'xl'\n \| 'lg'\n \| 'md'\n \| 'sm'\n \| 'xs'\n \| '2xs';\n\n /\n If set or `true`, the text will be italic.\n /\n @Prop() italic?: boolean;\n\n /\n Sets the font size.\n /\n @Prop() size?:\n \| '2xl'\n \| 'xl'\n \| 'lg'\n \| 'md'\n \| 'sm'\n \| 'xs'\n \| '2xs'\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6';\n\n /\n Sets the font weight.\n /\n @Prop() weight?:\n \| 'extra-light'\n \| 'light'\n \| 'regular'\n \| 'medium'\n \| 'semibold'\n \| 'bold';\n\n /\n Determines what semantic text tag to render.\n /\n @Prop() tag:\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6'\n \| 'p'\n \| 'code'\n \| 'pre'\n \| 'strong'\n \| 'em' = \"p\";\n\n /\n If set or `true`, the text will be truncated. Must add a `width` to the element.\n */\n @Prop({ reflect: true }) truncate?: boolean;\n\n render() {\n const Tag = this.tag;\n\n const typeClasses = `\n pds-text\n ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}\n ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}\n ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}\n ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}\n `;\n\n return (\n <Tag style={this.color && setColor(this.color)} class={typeClasses} part=\"content\">\n <slot />\n </Tag>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pds-text.js","sourceRoot":"","sources":["../../../../src/components/pds-text/pds-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAExE;;GAEG;AAMH,MAAM,OAAO,OAAO;IALpB;QAQU,sBAAiB,GAAwB,IAAI,CAAC;QAgEtD;;WAEG;QACK,QAAG,GAWF,GAAG,CAAC;KAwEd;IA9DC,oBAAoB,CAAC,QAAiB;QACpC,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC;IAEO,qBAAqB;QAC3B,4DAA4D;QAC5D,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,iBAAiB,GAAG,sBAAsB,CAAC;gBAC9C,MAAM,EAAE,IAAI,CAAC,EAAE;gBACf,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,cAAc,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,IAAI,EAAE;aAChD,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,wBAAwB;QAC9B,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAErB,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,wBAAwB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE;KAClH,CAAC;QAEF,OAAO,CACL,EAAC,GAAG,qDACF,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,EAChC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EACzC,KAAK,EAAE,WAAW,EAClB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAEvC,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Watch } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\nimport { setupTruncationTooltip } from '../../utils/truncation-tooltip';\n\n/*\n @part content - The text content container\n /\n@Component({\n tag: 'pds-text',\n styleUrl: 'pds-text.scss',\n shadow: true,\n})\nexport class PdsText {\n @Element() el: HTMLPdsTextElement;\n private contentEl: HTMLElement;\n private truncationCleanup: (() => void) \| null = null;\n /\n Sets the text alignment.\n /\n @Prop() align?: 'start' \| 'center' \| 'end' \| 'justify';\n\n /\n Sets the text color.\n /\n @Prop() color?: string;\n\n /\n Sets the text decoration.\n /\n @Prop() decoration?:\n \| 'strikethrough'\n \| 'underline-dotted';\n\n /\n Set the bottom margin for the text.\n /\n @Prop() gutter?:\n \| '2xl'\n \| 'xl'\n \| 'lg'\n \| 'md'\n \| 'sm'\n \| 'xs'\n \| '2xs';\n\n /\n If set or `true`, the text will be italic.\n /\n @Prop() italic?: boolean;\n\n /\n Sets the font size.\n /\n @Prop() size?:\n \| '2xl'\n \| 'xl'\n \| 'lg'\n \| 'md'\n \| 'sm'\n \| 'xs'\n \| '2xs'\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6';\n\n /\n Sets the font weight.\n /\n @Prop() weight?:\n \| 'extra-light'\n \| 'light'\n \| 'regular'\n \| 'medium'\n \| 'semibold'\n \| 'bold';\n\n /\n Determines what semantic text tag to render.\n /\n @Prop() tag:\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6'\n \| 'p'\n \| 'code'\n \| 'pre'\n \| 'strong'\n \| 'em' = \"p\";\n\n /\n If set or `true`, the text will be truncated. Must add a `width` to the element.\n * When text overflows, a tooltip showing the full text will appear on hover/focus.\n * Note: When truncate is enabled, the element automatically receives tabindex=\"0\" for keyboard accessibility.\n */\n @Prop({ reflect: true }) truncate?: boolean;\n\n @Watch('truncate')\n handleTruncateChange(newValue: boolean) {\n if (newValue) {\n this.initTruncationTooltip();\n } else {\n this.destroyTruncationTooltip();\n }\n }\n\n componentDidLoad() {\n if (this.truncate) {\n this.initTruncationTooltip();\n }\n }\n\n disconnectedCallback() {\n this.destroyTruncationTooltip();\n }\n\n private initTruncationTooltip() {\n // Clean up any existing tooltip before setting up a new one\n this.destroyTruncationTooltip();\n\n if (this.contentEl) {\n this.truncationCleanup = setupTruncationTooltip({\n hostEl: this.el,\n contentEl: this.contentEl,\n getTooltipText: () => this.el.textContent \|\| '',\n });\n }\n }\n\n private destroyTruncationTooltip() {\n if (this.truncationCleanup) {\n this.truncationCleanup();\n this.truncationCleanup = null;\n }\n }\n\n render() {\n const Tag = this.tag;\n\n const typeClasses = `\n pds-text\n ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}\n ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}\n ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}\n ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}\n `;\n\n return (\n <Tag\n ref={(el) => this.contentEl = el}\n style={this.color && setColor(this.color)}\n class={typeClasses}\n part=\"content\"\n tabIndex={this.truncate ? 0 : undefined}\n >\n <slot />\n </Tag>\n );\n }\n}\n"]}

package/dist/collection/components/pds-text/stories/pds-text.stories.js CHANGED Viewed

@@ -97,10 +97,29 @@ Italic.args = {
   truncate: false,
 };
-export const Truncate = BaseTemplate.bind();
+const TruncateTemplate = (args) => html`
+<div style="width: ${args.width || '250px'};">
+  <pds-text
+    align="${args.align}"
+    color="${args.color}"
+    decoration="${args.decoration}"
+    gutter="${args.gutter}"
+    ?italic="${args.italic}"
+    size="${args.size}"
+    tag="${args.tag}"
+    ?truncate="${args.truncate}"
+    weight="${args.weight}"
+  >
+    ${args.slot}
+  </pds-text>
+</div>
+<pds-text tag="p" size="xs" color="secondary" gutter="sm">Hover over the truncated text above to see the full content in a tooltip.</pds-text>`;
+export const Truncate = TruncateTemplate.bind();
 Truncate.args = {
-  slot: 'Id irure id magna ipsum voluptate irure esse eu nulla. Ullamco officia adipisicing qui nulla non sint. Mollit tempor veniam quis nisi aliqua duis elit eu laborum et incididunt ut sit irure. Nisi aute veniam sint do amet consectetur velit. Quis sunt enim mollit deserunt laboris dolor elit exercitation. Id labore deserunt sint consequat laboris nulla do ut magna. Aliquip labore esse sint consequat voluptate tempor consectetur sit sint culpa occaecat ut velit est.',
+  slot: 'Id irure id magna ipsum voluptate irure esse eu nulla. Ullamco officia adipisicing qui nulla non sint. Mollit tempor veniam quis nisi aliqua duis elit eu laborum et incididunt ut sit irure.',
   tag: 'p',
   italic: false,
   truncate: true,
+  width: '250px',
 };