@pine-ds/core 2.23.0-mercury.0 → 2.24.0-mercury.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 (32) hide show
  1. package/components/pds-table-cell2.js +1 -1
  2. package/components/pds-table-cell2.js.map +1 -1
  3. package/components/pds-table-head-cell2.js +1 -1
  4. package/components/pds-table-head-cell2.js.map +1 -1
  5. package/dist/cjs/pds-table-cell.cjs.entry.js +1 -1
  6. package/dist/cjs/pds-table-cell.cjs.entry.js.map +1 -1
  7. package/dist/cjs/pds-table-head-cell.cjs.entry.js +1 -1
  8. package/dist/cjs/pds-table-head-cell.cjs.entry.js.map +1 -1
  9. package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.css +1 -1
  10. package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css +1 -1
  11. package/dist/docs.json +1 -1
  12. package/dist/esm/pds-table-cell.entry.js +1 -1
  13. package/dist/esm/pds-table-cell.entry.js.map +1 -1
  14. package/dist/esm/pds-table-head-cell.entry.js +1 -1
  15. package/dist/esm/pds-table-head-cell.entry.js.map +1 -1
  16. package/dist/esm-es5/pds-table-cell.entry.js +1 -1
  17. package/dist/esm-es5/pds-table-cell.entry.js.map +1 -1
  18. package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
  19. package/dist/esm-es5/pds-table-head-cell.entry.js.map +1 -1
  20. package/dist/pine-core/p-06f526e5.system.js +1 -1
  21. package/dist/pine-core/{p-470a5e99.entry.js → p-42e73076.entry.js} +2 -2
  22. package/dist/pine-core/{p-470a5e99.entry.js.map → p-42e73076.entry.js.map} +1 -1
  23. package/dist/pine-core/{p-6428b918.entry.js → p-60f11f4d.entry.js} +2 -2
  24. package/dist/pine-core/{p-6428b918.entry.js.map → p-60f11f4d.entry.js.map} +1 -1
  25. package/dist/pine-core/{p-739f9ac1.system.entry.js → p-617852e5.system.entry.js} +2 -2
  26. package/dist/pine-core/{p-739f9ac1.system.entry.js.map → p-617852e5.system.entry.js.map} +1 -1
  27. package/dist/pine-core/{p-cf035857.system.entry.js → p-b84e6e45.system.entry.js} +2 -2
  28. package/dist/pine-core/{p-cf035857.system.entry.js.map → p-b84e6e45.system.entry.js.map} +1 -1
  29. package/dist/pine-core/pine-core.esm.js +1 -1
  30. package/hydrate/index.js +2 -2
  31. package/hydrate/index.mjs +2 -2
  32. package/package.json +2 -2
@@ -3,7 +3,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
3
3
  const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
4
4
  const PdsTableCellStyle0 = baseCss;
5
5
 
6
- const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-085);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
6
+ const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-100);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
7
7
  const PdsTableCellStyle1 = pdsTableCellCss;
8
8
 
9
9
  const PdsTableCell = /*@__PURE__*/ proxyCustomElement(class PdsTableCell extends HTMLElement {
@@ -1 +1 @@
1
- {"file":"pds-table-cell2.js","mappings":";;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,2BAAe,OAAO;;ACDtB,MAAM,eAAe,GAAG,mrCAAmrC,CAAC;AAC5sC,2BAAe,eAAe;;MCMjB,YAAY;;;;;QAuCf,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;;8BA1ByC,KAAK;;IAfhD,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IASO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAUD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,UAAU,EACf,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGR,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-085);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"pds-table-cell2.js","mappings":";;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,2BAAe,OAAO;;ACDtB,MAAM,eAAe,GAAG,mrCAAmrC,CAAC;AAC5sC,2BAAe,eAAe;;MCMjB,YAAY;;;;;QAuCf,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;;8BA1ByC,KAAK;;IAfhD,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IASO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAUD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,UAAU,EACf,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGR,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-100);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"version":3}
@@ -5,7 +5,7 @@ import { d as defineCustomElement$1 } from './pds-icon2.js';
5
5
  const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
6
6
  const PdsTableHeadCellStyle0 = baseCss;
7
7
 
8
- const pdsTableHeadCellCss = ":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-085);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
8
+ const pdsTableHeadCellCss = ":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-100);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
9
9
  const PdsTableHeadCellStyle1 = pdsTableHeadCellCss;
10
10
 
11
11
  const PdsTableHeadCell = /*@__PURE__*/ proxyCustomElement(class PdsTableHeadCell extends HTMLElement {
@@ -1 +1 @@
1
- {"file":"pds-table-head-cell2.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,+BAAe,OAAO;;ACDtB,MAAM,mBAAmB,GAAG,0wDAA0wD,CAAC;AACvyD,+BAAe,mBAAmB;;MCQrB,gBAAgB;;;;;;QAgCnB,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACjD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;gBAEzE,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ;oBACrE,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;iBACxC,CAAC,CAAC;gBAEH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;aACtE;SACF,CAAA;;gCAtCmD,KAAK;8BACd,KAAK;0BAKjB,KAAK;;IAEpC,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IAwBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE;YACnD,UAAU,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClD;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGR,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,iEAAU,IAAI,EAAE,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,OAAO,GAAG,SAAS,GAAI,CAC1E,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-085);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"version":3}
1
+ {"file":"pds-table-head-cell2.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,+BAAe,OAAO;;ACDtB,MAAM,mBAAmB,GAAG,0wDAA0wD,CAAC;AACvyD,+BAAe,mBAAmB;;MCQrB,gBAAgB;;;;;;QAgCnB,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACjD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;gBAEzE,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ;oBACrE,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;iBACxC,CAAC,CAAC;gBAEH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;aACtE;SACF,CAAA;;gCAtCmD,KAAK;8BACd,KAAK;0BAKjB,KAAK;;IAEpC,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IAwBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE;YACnD,UAAU,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClD;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGR,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,iEAAU,IAAI,EAAE,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,OAAO,GAAG,SAAS,GAAI,CAC1E,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-100);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"version":3}
@@ -7,7 +7,7 @@ const index = require('./index-d4ec6246.js');
7
7
  const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
8
8
  const PdsTableCellStyle0 = baseCss;
9
9
 
10
- const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-085);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
10
+ const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-100);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
11
11
  const PdsTableCellStyle1 = pdsTableCellCss;
12
12
 
13
13
  const PdsTableCell = class {
@@ -1 +1 @@
1
- {"file":"pds-table-cell.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,2BAAe,OAAO;;ACDtB,MAAM,eAAe,GAAG,mrCAAmrC,CAAC;AAC5sC,2BAAe,eAAe;;MCMjB,YAAY;;;QAuCf,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;;8BA1ByC,KAAK;;IAfhD,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IASO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAUD,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,UAAU,EACf,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGRD,oEAAa,CACR,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-085);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"pds-table-cell.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,2BAAe,OAAO;;ACDtB,MAAM,eAAe,GAAG,mrCAAmrC,CAAC;AAC5sC,2BAAe,eAAe;;MCMjB,YAAY;;;QAuCf,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;;8BA1ByC,KAAK;;IAfhD,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IASO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAUD,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,UAAU,EACf,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGRD,oEAAa,CACR,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-100);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"version":3}
@@ -8,7 +8,7 @@ const index$1 = require('./index-479f5bd8.js');
8
8
  const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
9
9
  const PdsTableHeadCellStyle0 = baseCss;
10
10
 
11
- const pdsTableHeadCellCss = ":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-085);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
11
+ const pdsTableHeadCellCss = ":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-100);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
12
12
  const PdsTableHeadCellStyle1 = pdsTableHeadCellCss;
13
13
 
14
14
  const PdsTableHeadCell = class {
@@ -1 +1 @@
1
- {"file":"pds-table-head-cell.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,+BAAe,OAAO;;ACDtB,MAAM,mBAAmB,GAAG,0wDAA0wD,CAAC;AACvyD,+BAAe,mBAAmB;;MCQrB,gBAAgB;;;;QAgCnB,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACjD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;gBAEzE,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ;oBACrE,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;iBACxC,CAAC,CAAC;gBAEH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;aACtE;SACF,CAAA;;gCAtCmD,KAAK;8BACd,KAAK;0BAKjB,KAAK;;IAEpC,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IAwBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE;YACnD,UAAU,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClD;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGRD,oEAAa,EACZ,IAAI,CAAC,QAAQ,KACZA,uEAAU,IAAI,EAAE,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAGE,eAAO,GAAGC,iBAAS,GAAI,CAC1E,CACI,EACP;KACH;;;;;;;","names":["h","Host","upSmall","downSmall"],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-085);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"version":3}
1
+ {"file":"pds-table-head-cell.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,+BAAe,OAAO;;ACDtB,MAAM,mBAAmB,GAAG,0wDAA0wD,CAAC;AACvyD,+BAAe,mBAAmB;;MCQrB,gBAAgB;;;;QAgCnB,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACjD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;gBAEzE,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ;oBACrE,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;iBACxC,CAAC,CAAC;gBAEH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;aACtE;SACF,CAAA;;gCAtCmD,KAAK;8BACd,KAAK;0BAKjB,KAAK;;IAEpC,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IAwBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE;YACnD,UAAU,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClD;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGRD,oEAAa,EACZ,IAAI,CAAC,QAAQ,KACZA,uEAAU,IAAI,EAAE,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAGE,eAAO,GAAGC,iBAAS,GAAI,CAC1E,CACI,EACP;KACH;;;;;;;","names":["h","Host","upSmall","downSmall"],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-100);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"version":3}
@@ -4,7 +4,7 @@
4
4
  --color-cell-default: var(--pine-color-grey-700);
5
5
  --dimension-fixed-cell-position: 0;
6
6
  --dimension-max-width-truncated: 100px;
7
- --font-size-cell-default: var(--pine-font-size-085);
7
+ --font-size-cell-default: var(--pine-font-size-100);
8
8
  --number-fixed-column-index: 0;
9
9
  --spacing-line-height-cell-default: var(--pine-line-height-125);
10
10
  --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);
@@ -5,7 +5,7 @@
5
5
  --color-sorting: var(--pine-color-grey-950);
6
6
  --color-text-default: var(--pine-color-grey-700);
7
7
  --dimension-fixed-cell-position: 0;
8
- --font-size-head-cell: var(--pine-font-size-085);
8
+ --font-size-head-cell: var(--pine-font-size-100);
9
9
  --font-weight-cell-default: var(--pine-font-weight-normal);
10
10
  --line-height-cell-default: var(--pine-line-height-125);
11
11
  --padding-cell-default: calc(var(--pine-spacing-300) / 2);
package/dist/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-09-30T19:58:21",
2
+ "timestamp": "2024-09-30T20:45:56",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.21.0",
@@ -3,7 +3,7 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-9f
3
3
  const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
4
4
  const PdsTableCellStyle0 = baseCss;
5
5
 
6
- const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-085);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
6
+ const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-100);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
7
7
  const PdsTableCellStyle1 = pdsTableCellCss;
8
8
 
9
9
  const PdsTableCell = class {
@@ -1 +1 @@
1
- {"file":"pds-table-cell.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,2BAAe,OAAO;;ACDtB,MAAM,eAAe,GAAG,mrCAAmrC,CAAC;AAC5sC,2BAAe,eAAe;;MCMjB,YAAY;;;QAuCf,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;;8BA1ByC,KAAK;;IAfhD,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IASO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAUD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,UAAU,EACf,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGR,8DAAa,CACR,EACP;KACH;;;;;;;","names":[],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-085);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"pds-table-cell.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,2BAAe,OAAO;;ACDtB,MAAM,eAAe,GAAG,mrCAAmrC,CAAC;AAC5sC,2BAAe,eAAe;;MCMjB,YAAY;;;QAuCf,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;;8BA1ByC,KAAK;;IAfhD,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IASO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAUD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,UAAU,EACf,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGR,8DAAa,CACR,EACP;KACH;;;;;;;","names":[],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-100);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"version":3}
@@ -4,7 +4,7 @@ import { e as upSmall, d as downSmall } from './index-9f8fe796.js';
4
4
  const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
5
5
  const PdsTableHeadCellStyle0 = baseCss;
6
6
 
7
- const pdsTableHeadCellCss = ":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-085);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
7
+ const pdsTableHeadCellCss = ":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-100);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
8
8
  const PdsTableHeadCellStyle1 = pdsTableHeadCellCss;
9
9
 
10
10
  const PdsTableHeadCell = class {
@@ -1 +1 @@
1
- {"file":"pds-table-head-cell.entry.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,+BAAe,OAAO;;ACDtB,MAAM,mBAAmB,GAAG,0wDAA0wD,CAAC;AACvyD,+BAAe,mBAAmB;;MCQrB,gBAAgB;;;;QAgCnB,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACjD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;gBAEzE,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ;oBACrE,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;iBACxC,CAAC,CAAC;gBAEH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;aACtE;SACF,CAAA;;gCAtCmD,KAAK;8BACd,KAAK;0BAKjB,KAAK;;IAEpC,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IAwBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE;YACnD,UAAU,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClD;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGR,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,iEAAU,IAAI,EAAE,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,OAAO,GAAG,SAAS,GAAI,CAC1E,CACI,EACP;KACH;;;;;;;","names":[],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-085);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"version":3}
1
+ {"file":"pds-table-head-cell.entry.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,m2DAAm2D,CAAC;AACp3D,+BAAe,OAAO;;ACDtB,MAAM,mBAAmB,GAAG,0wDAA0wD,CAAC;AACvyD,+BAAe,mBAAmB;;MCQrB,gBAAgB;;;;QAgCnB,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACjD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;gBAEzE,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ;oBACrE,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;iBACxC,CAAC,CAAC;gBAEH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;aACtE;SACF,CAAA;;gCAtCmD,KAAK;8BACd,KAAK;0BAKjB,KAAK;;IAEpC,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;KAC9E;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC7D;KACF;IAwBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE;YACnD,UAAU,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClD;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YACrE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACjC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;kBACpB,EAAE,uBAAuB,EAAE,MAAM,EAAE;kBACnC,EAAE,IAGR,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,iEAAU,IAAI,EAAE,IAAI,CAAC,gBAAgB,KAAK,KAAK,GAAG,OAAO,GAAG,SAAS,GAAI,CAC1E,CACI,EACP;KACH;;;;;;;","names":[],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-100);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"version":3}
@@ -1,2 +1,2 @@
1
- import{r as registerInstance,h,H as Host,g as getElement}from"./index-9f0e742f.js";var baseCss=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var PdsTableCellStyle0=baseCss;var pdsTableCellCss=":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-085);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";var PdsTableCellStyle1=pdsTableCellCss;var PdsTableCell=function(){function e(e){var i=this;registerInstance(this,e);this.handleScroll=function(){if(i.tableRef.scrollLeft>0){i.tableScrolling=true}else{i.tableScrolling=false}};this.truncate=undefined;this.tableScrolling=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.truncate){e.push("is-truncated")}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")};e.prototype.render=function(){return h(Host,{key:"28e14af2a71566974799bd9894be69257ad0c819",class:this.classNames(),role:"gridcell",style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},h("slot",{key:"c2c98f8cfc27c4f7ee30a488c67c7601cbd882ad"}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTableCell.style=PdsTableCellStyle0+PdsTableCellStyle1;export{PdsTableCell as pds_table_cell};
1
+ import{r as registerInstance,h,H as Host,g as getElement}from"./index-9f0e742f.js";var baseCss=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var PdsTableCellStyle0=baseCss;var pdsTableCellCss=":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-100);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";var PdsTableCellStyle1=pdsTableCellCss;var PdsTableCell=function(){function e(e){var i=this;registerInstance(this,e);this.handleScroll=function(){if(i.tableRef.scrollLeft>0){i.tableScrolling=true}else{i.tableScrolling=false}};this.truncate=undefined;this.tableScrolling=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.truncate){e.push("is-truncated")}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")};e.prototype.render=function(){return h(Host,{key:"28e14af2a71566974799bd9894be69257ad0c819",class:this.classNames(),role:"gridcell",style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},h("slot",{key:"c2c98f8cfc27c4f7ee30a488c67c7601cbd882ad"}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTableCell.style=PdsTableCellStyle0+PdsTableCellStyle1;export{PdsTableCell as pds_table_cell};
2
2
  //# sourceMappingURL=pds-table-cell.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["baseCss","PdsTableCellStyle0","pdsTableCellCss","PdsTableCellStyle1","PdsTableCell","this","handleScroll","_this","tableRef","scrollLeft","tableScrolling","prototype","componentWillRender","hostElement","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","truncate","join","render","h","Host","key","class","role","style","selectable"],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-085);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"mappings":"mFAAA,IAAMA,QAAU,s1DAChB,IAAAC,mBAAeD,QCDf,IAAME,gBAAkB,orCACxB,IAAAC,mBAAeD,gB,ICMFE,aAAY,W,kDAuCfC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,SAASC,WAAa,EAAG,CAChCF,EAAKG,eAAiB,I,KACjB,CACLH,EAAKG,eAAiB,K,+CAxBiB,K,CAf3CN,EAAAO,UAAAC,oBAAA,WACEP,KAAKG,SAAWH,KAAKQ,YAAYC,QAAQ,Y,EAG3CV,EAAAO,UAAAI,iBAAA,WACE,GAAIV,KAAKG,UAAYH,KAAKG,SAASQ,YAAcX,KAAKG,SAASS,YAAa,CAC1EZ,KAAKG,SAASU,iBAAiB,SAAUb,KAAKC,a,GAW1CF,EAAAO,UAAAQ,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAId,KAAKG,UAAYH,KAAKG,SAASY,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAIhB,KAAKiB,SAAU,CACjBH,EAAWE,KAAK,e,CAGlB,GAAIhB,KAAKG,UAAYH,KAAKG,SAASS,aAAeZ,KAAKK,eAAgB,CACrES,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWI,KAAK,I,EAWzBnB,EAAAO,UAAAa,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CACHC,MAAOvB,KAAKc,aACZU,KAAK,WACLC,MACEzB,KAAKG,UACLH,KAAKG,SAASS,aACdZ,KAAKG,SAASuB,WACV,CAAE,wBAAyB,QAC3B,IAGNN,EAAA,QAAAE,IAAA,6C,yIA5DiB,G","ignoreList":[]}
1
+ {"version":3,"names":["baseCss","PdsTableCellStyle0","pdsTableCellCss","PdsTableCellStyle1","PdsTableCell","this","handleScroll","_this","tableRef","scrollLeft","tableScrolling","prototype","componentWillRender","hostElement","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","truncate","join","render","h","Host","key","class","role","style","selectable"],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-100);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"mappings":"mFAAA,IAAMA,QAAU,s1DAChB,IAAAC,mBAAeD,QCDf,IAAME,gBAAkB,orCACxB,IAAAC,mBAAeD,gB,ICMFE,aAAY,W,kDAuCfC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,SAASC,WAAa,EAAG,CAChCF,EAAKG,eAAiB,I,KACjB,CACLH,EAAKG,eAAiB,K,+CAxBiB,K,CAf3CN,EAAAO,UAAAC,oBAAA,WACEP,KAAKG,SAAWH,KAAKQ,YAAYC,QAAQ,Y,EAG3CV,EAAAO,UAAAI,iBAAA,WACE,GAAIV,KAAKG,UAAYH,KAAKG,SAASQ,YAAcX,KAAKG,SAASS,YAAa,CAC1EZ,KAAKG,SAASU,iBAAiB,SAAUb,KAAKC,a,GAW1CF,EAAAO,UAAAQ,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAId,KAAKG,UAAYH,KAAKG,SAASY,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAIhB,KAAKiB,SAAU,CACjBH,EAAWE,KAAK,e,CAGlB,GAAIhB,KAAKG,UAAYH,KAAKG,SAASS,aAAeZ,KAAKK,eAAgB,CACrES,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWI,KAAK,I,EAWzBnB,EAAAO,UAAAa,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CACHC,MAAOvB,KAAKc,aACZU,KAAK,WACLC,MACEzB,KAAKG,UACLH,KAAKG,SAASS,aACdZ,KAAKG,SAASuB,WACV,CAAE,wBAAyB,QAC3B,IAGNN,EAAA,QAAAE,IAAA,6C,yIA5DiB,G","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-9f0e742f.js";import{e as upSmall,d as downSmall}from"./index-9f8fe796.js";var baseCss=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var PdsTableHeadCellStyle0=baseCss;var pdsTableHeadCellCss=":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-085);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";var PdsTableHeadCellStyle1=pdsTableHeadCellCss;var PdsTableHeadCell=function(){function e(e){var t=this;registerInstance(this,e);this.pdsTableSort=createEvent(this,"pdsTableSort",7);this.handleScroll=function(){if(t.tableRef.scrollLeft>0){t.tableScrolling=true}else{t.tableScrolling=false}};this.toggleSort=function(){if(t.sortable){var e=t.hostElement.innerText.trim();t.sortingDirection=t.sortingDirection==="asc"?"desc":"asc";t.tableRef.querySelectorAll("pds-table-head-cell").forEach((function(e){e.classList.remove("is-active")}));t.hostElement.classList.toggle("is-active");t.pdsTableSort.emit({column:e,direction:t.sortingDirection})}};this.sortable=undefined;this.sortingDirection="asc";this.tableScrolling=false;this.isSelected=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.sortable){e.push("is-sortable")}if(this.sortable&&this.sortingDirection!==null){e.push("sort-"+this.sortingDirection)}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")};e.prototype.render=function(){return h(Host,{key:"1f10fd14e300a501cf3763b2f0edb02fe957fc4a",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},h("slot",{key:"5e18f22f031f671c7c3ae899d00afb90dd90d633"}),this.sortable&&h("pds-icon",{key:"ba00ac36b37cc45086fb5989beb71a9fc6a83bd6",icon:this.sortingDirection==="asc"?upSmall:downSmall}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTableHeadCell.style=PdsTableHeadCellStyle0+PdsTableHeadCellStyle1;export{PdsTableHeadCell as pds_table_head_cell};
1
+ import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-9f0e742f.js";import{e as upSmall,d as downSmall}from"./index-9f8fe796.js";var baseCss=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var PdsTableHeadCellStyle0=baseCss;var pdsTableHeadCellCss=":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-100);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";var PdsTableHeadCellStyle1=pdsTableHeadCellCss;var PdsTableHeadCell=function(){function e(e){var t=this;registerInstance(this,e);this.pdsTableSort=createEvent(this,"pdsTableSort",7);this.handleScroll=function(){if(t.tableRef.scrollLeft>0){t.tableScrolling=true}else{t.tableScrolling=false}};this.toggleSort=function(){if(t.sortable){var e=t.hostElement.innerText.trim();t.sortingDirection=t.sortingDirection==="asc"?"desc":"asc";t.tableRef.querySelectorAll("pds-table-head-cell").forEach((function(e){e.classList.remove("is-active")}));t.hostElement.classList.toggle("is-active");t.pdsTableSort.emit({column:e,direction:t.sortingDirection})}};this.sortable=undefined;this.sortingDirection="asc";this.tableScrolling=false;this.isSelected=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.sortable){e.push("is-sortable")}if(this.sortable&&this.sortingDirection!==null){e.push("sort-"+this.sortingDirection)}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")};e.prototype.render=function(){return h(Host,{key:"1f10fd14e300a501cf3763b2f0edb02fe957fc4a",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},h("slot",{key:"5e18f22f031f671c7c3ae899d00afb90dd90d633"}),this.sortable&&h("pds-icon",{key:"ba00ac36b37cc45086fb5989beb71a9fc6a83bd6",icon:this.sortingDirection==="asc"?upSmall:downSmall}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTableHeadCell.style=PdsTableHeadCellStyle0+PdsTableHeadCellStyle1;export{PdsTableHeadCell as pds_table_head_cell};
2
2
  //# sourceMappingURL=pds-table-head-cell.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["baseCss","PdsTableHeadCellStyle0","pdsTableHeadCellCss","PdsTableHeadCellStyle1","PdsTableHeadCell","this","handleScroll","_this","tableRef","scrollLeft","tableScrolling","toggleSort","sortable","column","hostElement","innerText","trim","sortingDirection","querySelectorAll","forEach","headCell","classList","remove","toggle","pdsTableSort","emit","direction","prototype","componentWillRender","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","join","render","h","Host","key","class","role","onClick","style","selectable","icon","upSmall","downSmall"],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-085);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"mappings":"iKAAA,IAAMA,QAAU,s1DAChB,IAAAC,uBAAeD,QCDf,IAAME,oBAAsB,2wDAC5B,IAAAC,uBAAeD,oB,ICQFE,iBAAgB,W,uGAgCnBC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,SAASC,WAAa,EAAG,CAChCF,EAAKG,eAAiB,I,KACjB,CACLH,EAAKG,eAAiB,K,GAIlBL,KAAAM,WAAa,WACnB,GAAIJ,EAAKK,SAAU,CACjB,IAAMC,EAASN,EAAKO,YAAYC,UAAUC,OAC1CT,EAAKU,iBAAmBV,EAAKU,mBAAqB,MAAQ,OAAS,MAEnEV,EAAKC,SAASU,iBAAiB,uBAAuBC,SAAQ,SAACC,GAC7DA,EAASC,UAAUC,OAAO,Y,IAG5Bf,EAAKO,YAAYO,UAAUE,OAAO,aAClChB,EAAKiB,aAAaC,KAAK,CAAEZ,OAAMA,EAAEa,UAAWnB,EAAKU,kB,iDApCD,M,oBACT,M,gBAKZ,K,CAE/Bb,EAAAuB,UAAAC,oBAAA,WACEvB,KAAKG,SAAWH,KAAKS,YAAYe,QAAQ,Y,EAG3CzB,EAAAuB,UAAAG,iBAAA,WACE,GAAIzB,KAAKG,UAAYH,KAAKG,SAASuB,YAAc1B,KAAKG,SAASwB,YAAa,CAC1E3B,KAAKG,SAASyB,iBAAiB,SAAU5B,KAAKC,a,GA0B1CF,EAAAuB,UAAAO,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAI7B,KAAKG,UAAYH,KAAKG,SAAS2B,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAI/B,KAAKO,SAAU,CACjBsB,EAAWE,KAAK,c,CAGlB,GAAI/B,KAAKO,UAAYP,KAAKY,mBAAqB,KAAM,CACnDiB,EAAWE,KAAK,QAAU/B,KAAKY,iB,CAGjC,GAAIZ,KAAKG,UAAYH,KAAKG,SAASwB,aAAe3B,KAAKK,eAAgB,CACrEwB,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBjC,EAAAuB,UAAAW,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CACHC,MAAOrC,KAAK6B,aACZS,KAAK,eACLC,QAASvC,KAAKM,WACdkC,MACExC,KAAKG,UACLH,KAAKG,SAASwB,aACd3B,KAAKG,SAASsC,WACV,CAAE,wBAAyB,QAC3B,IAGNP,EAAA,QAAAE,IAAA,6CACCpC,KAAKO,UACJ2B,EAAA,YAAAE,IAAA,2CAAUM,KAAM1C,KAAKY,mBAAqB,MAAQ+B,QAAUC,Y,yIA5FzC,G","ignoreList":[]}
1
+ {"version":3,"names":["baseCss","PdsTableHeadCellStyle0","pdsTableHeadCellCss","PdsTableHeadCellStyle1","PdsTableHeadCell","this","handleScroll","_this","tableRef","scrollLeft","tableScrolling","toggleSort","sortable","column","hostElement","innerText","trim","sortingDirection","querySelectorAll","forEach","headCell","classList","remove","toggle","pdsTableSort","emit","direction","prototype","componentWillRender","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","join","render","h","Host","key","class","role","onClick","style","selectable","icon","upSmall","downSmall"],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-100);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"mappings":"iKAAA,IAAMA,QAAU,s1DAChB,IAAAC,uBAAeD,QCDf,IAAME,oBAAsB,2wDAC5B,IAAAC,uBAAeD,oB,ICQFE,iBAAgB,W,uGAgCnBC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,SAASC,WAAa,EAAG,CAChCF,EAAKG,eAAiB,I,KACjB,CACLH,EAAKG,eAAiB,K,GAIlBL,KAAAM,WAAa,WACnB,GAAIJ,EAAKK,SAAU,CACjB,IAAMC,EAASN,EAAKO,YAAYC,UAAUC,OAC1CT,EAAKU,iBAAmBV,EAAKU,mBAAqB,MAAQ,OAAS,MAEnEV,EAAKC,SAASU,iBAAiB,uBAAuBC,SAAQ,SAACC,GAC7DA,EAASC,UAAUC,OAAO,Y,IAG5Bf,EAAKO,YAAYO,UAAUE,OAAO,aAClChB,EAAKiB,aAAaC,KAAK,CAAEZ,OAAMA,EAAEa,UAAWnB,EAAKU,kB,iDApCD,M,oBACT,M,gBAKZ,K,CAE/Bb,EAAAuB,UAAAC,oBAAA,WACEvB,KAAKG,SAAWH,KAAKS,YAAYe,QAAQ,Y,EAG3CzB,EAAAuB,UAAAG,iBAAA,WACE,GAAIzB,KAAKG,UAAYH,KAAKG,SAASuB,YAAc1B,KAAKG,SAASwB,YAAa,CAC1E3B,KAAKG,SAASyB,iBAAiB,SAAU5B,KAAKC,a,GA0B1CF,EAAAuB,UAAAO,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAI7B,KAAKG,UAAYH,KAAKG,SAAS2B,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAI/B,KAAKO,SAAU,CACjBsB,EAAWE,KAAK,c,CAGlB,GAAI/B,KAAKO,UAAYP,KAAKY,mBAAqB,KAAM,CACnDiB,EAAWE,KAAK,QAAU/B,KAAKY,iB,CAGjC,GAAIZ,KAAKG,UAAYH,KAAKG,SAASwB,aAAe3B,KAAKK,eAAgB,CACrEwB,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBjC,EAAAuB,UAAAW,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CACHC,MAAOrC,KAAK6B,aACZS,KAAK,eACLC,QAASvC,KAAKM,WACdkC,MACExC,KAAKG,UACLH,KAAKG,SAASwB,aACd3B,KAAKG,SAASsC,WACV,CAAE,wBAAyB,QAC3B,IAGNP,EAAA,QAAAE,IAAA,6CACCpC,KAAKO,UACJ2B,EAAA,YAAAE,IAAA,2CAAUM,KAAM1C,KAAKY,mBAAqB,MAAQ+B,QAAUC,Y,yIA5FzC,G","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- var __awaiter=this&&this.__awaiter||function(e,t,n,s){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function i(e){try{d(s.next(e))}catch(e){a(e)}}function r(e){try{d(s["throw"](e))}catch(e){a(e)}}function d(e){e.done?n(e.value):o(e.value).then(i,r)}d((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},s,o,a,i;return i={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function r(e){return function(t){return d([e,t])}}function d(r){if(s)throw new TypeError("Generator is already executing.");while(i&&(i=0,r[0]&&(n=0)),n)try{if(s=1,o&&(a=r[0]&2?o["return"]:r[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,r[1])).done)return a;if(o=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:n.label++;return{value:r[1],done:false};case 5:n.label++;o=r[1];r=[0];continue;case 7:r=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){n=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){n.label=r[1];break}if(r[0]===6&&n.label<a[1]){n.label=a[1];a=r;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(r);break}if(a[2])n.ops.pop();n.trys.pop();continue}r=t.call(e,n)}catch(e){r=[6,e];o=0}finally{s=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-d20f4c1d.system.js","./p-56ba5cbf.system.js"],(function(e,t){"use strict";var n,s,o;return{setters:[function(t){n=t.p;s=t.b;e("setNonce",t.s)},function(e){o=e.g}],execute:function(){var e=this;var a=function(){var e=t.meta.url;var s={};if(e!==""){s.resourcesUrl=new URL(".",e).href}return n(s)};a().then((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,o()];case 1:e.sent();return[2,s([["p-61176372.system",[[1,"pds-table-head",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-42ec166f.system",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-a9769abf.system",[[1,"pds-table-row",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-bc40df83.system",[[1,"pds-accordion",{componentId:[1,"component-id"],isOpen:[1540,"open"]},null,{isOpen:["handleOpenState"]}]]],["p-569e79e5.system",[[1,"pds-avatar",{alt:[1],badge:[4],componentId:[1,"component-id"],dropdown:[4],image:[1],size:[513],variant:[513]}]]],["p-4a2d1c1a.system",[[1,"pds-chip",{componentId:[1,"component-id"],sentiment:[1],dot:[4],label:[1],large:[4],variant:[1]}]]],["p-69f338ff.system",[[1,"pds-link",{componentId:[1,"component-id"],external:[4],variant:[1],fontSize:[1,"font-size"],href:[1]}]]],["p-b4f7b883.system",[[6,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],showHandle:[1028,"show-handle"]}]]],["p-30895edd.system",[[0,"pds-box",{alignItems:[1,"align-items"],auto:[4],backgroundColor:[1,"background-color"],border:[4],borderColor:[1,"border-color"],borderRadius:[1,"border-radius"],direction:[1],display:[1],fit:[4],gap:[1],flex:[1],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],minWidth:[1,"min-width"],offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],padding:[1],shadow:[1],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]}]]],["p-0a559f32.system",[[1,"pds-divider",{componentId:[1,"component-id"],offset:[1],vertical:[4]}]]],["p-6df39072.system",[[1,"pds-image",{alt:[1],componentId:[1,"component-id"],height:[2],loading:[1],sizes:[1],src:[1],srcset:[1],width:[2]}]]],["p-f2550a67.system",[[1,"pds-input",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],type:[1],value:[1025]}]]],["p-8a097891.system",[[1,"pds-loader",{isLoading:[4,"is-loading"],showLabel:[4,"show-label"],size:[513],variant:[1]}]]],["p-2598d875.system",[[1,"pds-progress",{animated:[4],componentId:[1,"component-id"],fillColor:[1,"fill-color"],label:[1],percent:[2],showPercent:[4,"show-percent"]}]]],["p-41141b0b.system",[[2,"pds-radio",{checked:[4],disabled:[4],errorMessage:[1,"error-message"],invalid:[4],componentId:[1,"component-id"],label:[1],helperMessage:[1,"helper-message"],name:[1],required:[4],value:[1]}]]],["p-7ed5ef61.system",[[0,"pds-row",{alignItems:[1,"align-items"],border:[4],colGap:[1,"col-gap"],componentId:[1,"component-id"],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],noWrap:[4,"no-wrap"]}]]],["p-f682f33e.system",[[6,"pds-sortable",{border:[516],componentId:[1,"component-id"],dividers:[516],handleType:[1,"handle-type"]}]]],["p-b844e85c.system",[[1,"pds-switch",{componentId:[1,"component-id"],checked:[4],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],required:[4],type:[1],value:[1]}]]],["p-766e4212.system",[[4,"pds-tab",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],index:[2],selected:[4]}]]],["p-62789a79.system",[[1,"pds-table",{compact:[4],componentId:[1,"component-id"],responsive:[4],fixedColumn:[4,"fixed-column"],selectable:[4],sortingColumn:[32],sortingDirection:[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["p-0fd90583.system",[[1,"pds-table-body"]]],["p-6293581d.system",[[4,"pds-tabpanel",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],selected:[1028]}]]],["p-8048be9c.system",[[1,"pds-tabs",{tablistLabel:[1,"tablist-label"],componentId:[1,"component-id"],variant:[1],activeTabName:[1025,"active-tab-name"],activeTabIndex:[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-fdb6c6ea.system",[[1,"pds-textarea",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],value:[1025]}]]],["p-e6e198eb.system",[[1,"pds-tooltip",{content:[1],componentId:[1,"component-id"],hasArrow:[4,"has-arrow"],htmlContent:[4,"html-content"],placement:[513],opened:[1540],isOpen:[32],showTooltip:[64],hideTooltip:[64]},null,{opened:["handleOpenToggle"]}]]],["p-e8874481.system",[[1,"pds-icon",{color:[1],icon:[8],name:[513],size:[513],src:[1],ariaLabel:[32],isVisible:[32],svgContent:[32]},null,{size:["updateStyles"],color:["updateStyles"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}]]],["p-1c60bcd0.system",[[1,"pds-button",{componentId:[1,"component-id"],disabled:[4],icon:[1],name:[1],value:[1],type:[1],variant:[1]}]]],["p-739f9ac1.system",[[1,"pds-table-head-cell",{sortable:[4],sortingDirection:[32],tableScrolling:[32],isSelected:[32]}]]],["p-cf035857.system",[[1,"pds-table-cell",{truncate:[4],tableScrolling:[32]}]]],["p-b4852304.system",[[1,"pds-checkbox",{checked:[1028],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[1028],invalid:[4],label:[1],labelHidden:[4,"label-hidden"],name:[1],required:[4],value:[1]},null,{checked:["updateIndeterminate"]}]]]],t)]}}))}))}))}}}));
1
+ var __awaiter=this&&this.__awaiter||function(e,t,n,s){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function i(e){try{d(s.next(e))}catch(e){a(e)}}function r(e){try{d(s["throw"](e))}catch(e){a(e)}}function d(e){e.done?n(e.value):o(e.value).then(i,r)}d((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},s,o,a,i;return i={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function r(e){return function(t){return d([e,t])}}function d(r){if(s)throw new TypeError("Generator is already executing.");while(i&&(i=0,r[0]&&(n=0)),n)try{if(s=1,o&&(a=r[0]&2?o["return"]:r[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,r[1])).done)return a;if(o=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:n.label++;return{value:r[1],done:false};case 5:n.label++;o=r[1];r=[0];continue;case 7:r=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){n=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){n.label=r[1];break}if(r[0]===6&&n.label<a[1]){n.label=a[1];a=r;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(r);break}if(a[2])n.ops.pop();n.trys.pop();continue}r=t.call(e,n)}catch(e){r=[6,e];o=0}finally{s=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-d20f4c1d.system.js","./p-56ba5cbf.system.js"],(function(e,t){"use strict";var n,s,o;return{setters:[function(t){n=t.p;s=t.b;e("setNonce",t.s)},function(e){o=e.g}],execute:function(){var e=this;var a=function(){var e=t.meta.url;var s={};if(e!==""){s.resourcesUrl=new URL(".",e).href}return n(s)};a().then((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,o()];case 1:e.sent();return[2,s([["p-61176372.system",[[1,"pds-table-head",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-42ec166f.system",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-a9769abf.system",[[1,"pds-table-row",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-bc40df83.system",[[1,"pds-accordion",{componentId:[1,"component-id"],isOpen:[1540,"open"]},null,{isOpen:["handleOpenState"]}]]],["p-569e79e5.system",[[1,"pds-avatar",{alt:[1],badge:[4],componentId:[1,"component-id"],dropdown:[4],image:[1],size:[513],variant:[513]}]]],["p-4a2d1c1a.system",[[1,"pds-chip",{componentId:[1,"component-id"],sentiment:[1],dot:[4],label:[1],large:[4],variant:[1]}]]],["p-69f338ff.system",[[1,"pds-link",{componentId:[1,"component-id"],external:[4],variant:[1],fontSize:[1,"font-size"],href:[1]}]]],["p-b4f7b883.system",[[6,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],showHandle:[1028,"show-handle"]}]]],["p-30895edd.system",[[0,"pds-box",{alignItems:[1,"align-items"],auto:[4],backgroundColor:[1,"background-color"],border:[4],borderColor:[1,"border-color"],borderRadius:[1,"border-radius"],direction:[1],display:[1],fit:[4],gap:[1],flex:[1],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],minWidth:[1,"min-width"],offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],padding:[1],shadow:[1],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]}]]],["p-0a559f32.system",[[1,"pds-divider",{componentId:[1,"component-id"],offset:[1],vertical:[4]}]]],["p-6df39072.system",[[1,"pds-image",{alt:[1],componentId:[1,"component-id"],height:[2],loading:[1],sizes:[1],src:[1],srcset:[1],width:[2]}]]],["p-f2550a67.system",[[1,"pds-input",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],type:[1],value:[1025]}]]],["p-8a097891.system",[[1,"pds-loader",{isLoading:[4,"is-loading"],showLabel:[4,"show-label"],size:[513],variant:[1]}]]],["p-2598d875.system",[[1,"pds-progress",{animated:[4],componentId:[1,"component-id"],fillColor:[1,"fill-color"],label:[1],percent:[2],showPercent:[4,"show-percent"]}]]],["p-41141b0b.system",[[2,"pds-radio",{checked:[4],disabled:[4],errorMessage:[1,"error-message"],invalid:[4],componentId:[1,"component-id"],label:[1],helperMessage:[1,"helper-message"],name:[1],required:[4],value:[1]}]]],["p-7ed5ef61.system",[[0,"pds-row",{alignItems:[1,"align-items"],border:[4],colGap:[1,"col-gap"],componentId:[1,"component-id"],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],noWrap:[4,"no-wrap"]}]]],["p-f682f33e.system",[[6,"pds-sortable",{border:[516],componentId:[1,"component-id"],dividers:[516],handleType:[1,"handle-type"]}]]],["p-b844e85c.system",[[1,"pds-switch",{componentId:[1,"component-id"],checked:[4],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],required:[4],type:[1],value:[1]}]]],["p-766e4212.system",[[4,"pds-tab",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],index:[2],selected:[4]}]]],["p-62789a79.system",[[1,"pds-table",{compact:[4],componentId:[1,"component-id"],responsive:[4],fixedColumn:[4,"fixed-column"],selectable:[4],sortingColumn:[32],sortingDirection:[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["p-0fd90583.system",[[1,"pds-table-body"]]],["p-6293581d.system",[[4,"pds-tabpanel",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],selected:[1028]}]]],["p-8048be9c.system",[[1,"pds-tabs",{tablistLabel:[1,"tablist-label"],componentId:[1,"component-id"],variant:[1],activeTabName:[1025,"active-tab-name"],activeTabIndex:[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-fdb6c6ea.system",[[1,"pds-textarea",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],value:[1025]}]]],["p-e6e198eb.system",[[1,"pds-tooltip",{content:[1],componentId:[1,"component-id"],hasArrow:[4,"has-arrow"],htmlContent:[4,"html-content"],placement:[513],opened:[1540],isOpen:[32],showTooltip:[64],hideTooltip:[64]},null,{opened:["handleOpenToggle"]}]]],["p-e8874481.system",[[1,"pds-icon",{color:[1],icon:[8],name:[513],size:[513],src:[1],ariaLabel:[32],isVisible:[32],svgContent:[32]},null,{size:["updateStyles"],color:["updateStyles"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}]]],["p-1c60bcd0.system",[[1,"pds-button",{componentId:[1,"component-id"],disabled:[4],icon:[1],name:[1],value:[1],type:[1],variant:[1]}]]],["p-617852e5.system",[[1,"pds-table-head-cell",{sortable:[4],sortingDirection:[32],tableScrolling:[32],isSelected:[32]}]]],["p-b84e6e45.system",[[1,"pds-table-cell",{truncate:[4],tableScrolling:[32]}]]],["p-b4852304.system",[[1,"pds-checkbox",{checked:[1028],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[1028],invalid:[4],label:[1],labelHidden:[4,"label-hidden"],name:[1],required:[4],value:[1]},null,{checked:["updateIndeterminate"]}]]]],t)]}}))}))}))}}}));
2
2
  //# sourceMappingURL=p-06f526e5.system.js.map
@@ -1,2 +1,2 @@
1
- import{r as e,c as i,h as t,H as o,g as a}from"./p-7e7de1d6.js";import{e as r,d as n}from"./p-373bf876.js";const s=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const l=s;const h=":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-085);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";const c=h;const d=class{constructor(t){e(this,t);this.pdsTableSort=i(this,"pdsTableSort",7);this.handleScroll=()=>{if(this.tableRef.scrollLeft>0){this.tableScrolling=true}else{this.tableScrolling=false}};this.toggleSort=()=>{if(this.sortable){const e=this.hostElement.innerText.trim();this.sortingDirection=this.sortingDirection==="asc"?"desc":"asc";this.tableRef.querySelectorAll("pds-table-head-cell").forEach((e=>{e.classList.remove("is-active")}));this.hostElement.classList.toggle("is-active");this.pdsTableSort.emit({column:e,direction:this.sortingDirection})}};this.sortable=undefined;this.sortingDirection="asc";this.tableScrolling=false;this.isSelected=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 e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.sortable){e.push("is-sortable")}if(this.sortable&&this.sortingDirection!==null){e.push("sort-"+this.sortingDirection)}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")}render(){return t(o,{key:"1f10fd14e300a501cf3763b2f0edb02fe957fc4a",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},t("slot",{key:"5e18f22f031f671c7c3ae899d00afb90dd90d633"}),this.sortable&&t("pds-icon",{key:"ba00ac36b37cc45086fb5989beb71a9fc6a83bd6",icon:this.sortingDirection==="asc"?r:n}))}get hostElement(){return a(this)}};d.style=l+c;export{d as pds_table_head_cell};
2
- //# sourceMappingURL=p-470a5e99.entry.js.map
1
+ import{r as e,c as i,h as t,H as o,g as a}from"./p-7e7de1d6.js";import{e as r,d as n}from"./p-373bf876.js";const s=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const l=s;const h=":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-100);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";const c=h;const d=class{constructor(t){e(this,t);this.pdsTableSort=i(this,"pdsTableSort",7);this.handleScroll=()=>{if(this.tableRef.scrollLeft>0){this.tableScrolling=true}else{this.tableScrolling=false}};this.toggleSort=()=>{if(this.sortable){const e=this.hostElement.innerText.trim();this.sortingDirection=this.sortingDirection==="asc"?"desc":"asc";this.tableRef.querySelectorAll("pds-table-head-cell").forEach((e=>{e.classList.remove("is-active")}));this.hostElement.classList.toggle("is-active");this.pdsTableSort.emit({column:e,direction:this.sortingDirection})}};this.sortable=undefined;this.sortingDirection="asc";this.tableScrolling=false;this.isSelected=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 e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.sortable){e.push("is-sortable")}if(this.sortable&&this.sortingDirection!==null){e.push("sort-"+this.sortingDirection)}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")}render(){return t(o,{key:"1f10fd14e300a501cf3763b2f0edb02fe957fc4a",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},t("slot",{key:"5e18f22f031f671c7c3ae899d00afb90dd90d633"}),this.sortable&&t("pds-icon",{key:"ba00ac36b37cc45086fb5989beb71a9fc6a83bd6",icon:this.sortingDirection==="asc"?r:n}))}get hostElement(){return a(this)}};d.style=l+c;export{d as pds_table_head_cell};
2
+ //# sourceMappingURL=p-42e73076.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["baseCss","PdsTableHeadCellStyle0","pdsTableHeadCellCss","PdsTableHeadCellStyle1","PdsTableHeadCell","this","handleScroll","tableRef","scrollLeft","tableScrolling","toggleSort","sortable","column","hostElement","innerText","trim","sortingDirection","querySelectorAll","forEach","headCell","classList","remove","toggle","pdsTableSort","emit","direction","componentWillRender","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","join","render","h","Host","key","class","role","onClick","style","selectable","icon","upSmall","downSmall"],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-085);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"mappings":"2GAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAsB,2wDAC5B,MAAAC,EAAeD,E,MCQFE,EAAgB,M,oEAgCnBC,KAAAC,aAAe,KACrB,GAAID,KAAKE,SAASC,WAAa,EAAG,CAChCH,KAAKI,eAAiB,I,KACjB,CACLJ,KAAKI,eAAiB,K,GAIlBJ,KAAAK,WAAa,KACnB,GAAIL,KAAKM,SAAU,CACjB,MAAMC,EAASP,KAAKQ,YAAYC,UAAUC,OAC1CV,KAAKW,iBAAmBX,KAAKW,mBAAqB,MAAQ,OAAS,MAEnEX,KAAKE,SAASU,iBAAiB,uBAAuBC,SAASC,IAC7DA,EAASC,UAAUC,OAAO,YAAY,IAGxChB,KAAKQ,YAAYO,UAAUE,OAAO,aAClCjB,KAAKkB,aAAaC,KAAK,CAAEZ,SAAQa,UAAWpB,KAAKW,kB,iDApCD,M,oBACT,M,gBAKZ,K,CAE/B,mBAAAU,GACErB,KAAKE,SAAWF,KAAKQ,YAAYc,QAAQ,Y,CAG3C,gBAAAC,GACE,GAAIvB,KAAKE,UAAYF,KAAKE,SAASsB,YAAcxB,KAAKE,SAASuB,YAAa,CAC1EzB,KAAKE,SAASwB,iBAAiB,SAAU1B,KAAKC,a,EA0B1C,UAAA0B,GACN,MAAMA,EAAa,GAEnB,GAAI3B,KAAKE,UAAYF,KAAKE,SAAS0B,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAI7B,KAAKM,SAAU,CACjBqB,EAAWE,KAAK,c,CAGlB,GAAI7B,KAAKM,UAAYN,KAAKW,mBAAqB,KAAM,CACnDgB,EAAWE,KAAK,QAAU7B,KAAKW,iB,CAGjC,GAAIX,KAAKE,UAAYF,KAAKE,SAASuB,aAAezB,KAAKI,eAAgB,CACrEuB,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOnC,KAAK2B,aACZS,KAAK,eACLC,QAASrC,KAAKK,WACdiC,MACEtC,KAAKE,UACLF,KAAKE,SAASuB,aACdzB,KAAKE,SAASqC,WACV,CAAE,wBAAyB,QAC3B,IAGNP,EAAA,QAAAE,IAAA,6CACClC,KAAKM,UACJ0B,EAAA,YAAAE,IAAA,2CAAUM,KAAMxC,KAAKW,mBAAqB,MAAQ8B,EAAUC,I","ignoreList":[]}
1
+ {"version":3,"names":["baseCss","PdsTableHeadCellStyle0","pdsTableHeadCellCss","PdsTableHeadCellStyle1","PdsTableHeadCell","this","handleScroll","tableRef","scrollLeft","tableScrolling","toggleSort","sortable","column","hostElement","innerText","trim","sortingDirection","querySelectorAll","forEach","headCell","classList","remove","toggle","pdsTableSort","emit","direction","componentWillRender","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","join","render","h","Host","key","class","role","onClick","style","selectable","icon","upSmall","downSmall"],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-100);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"mappings":"2GAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAsB,2wDAC5B,MAAAC,EAAeD,E,MCQFE,EAAgB,M,oEAgCnBC,KAAAC,aAAe,KACrB,GAAID,KAAKE,SAASC,WAAa,EAAG,CAChCH,KAAKI,eAAiB,I,KACjB,CACLJ,KAAKI,eAAiB,K,GAIlBJ,KAAAK,WAAa,KACnB,GAAIL,KAAKM,SAAU,CACjB,MAAMC,EAASP,KAAKQ,YAAYC,UAAUC,OAC1CV,KAAKW,iBAAmBX,KAAKW,mBAAqB,MAAQ,OAAS,MAEnEX,KAAKE,SAASU,iBAAiB,uBAAuBC,SAASC,IAC7DA,EAASC,UAAUC,OAAO,YAAY,IAGxChB,KAAKQ,YAAYO,UAAUE,OAAO,aAClCjB,KAAKkB,aAAaC,KAAK,CAAEZ,SAAQa,UAAWpB,KAAKW,kB,iDApCD,M,oBACT,M,gBAKZ,K,CAE/B,mBAAAU,GACErB,KAAKE,SAAWF,KAAKQ,YAAYc,QAAQ,Y,CAG3C,gBAAAC,GACE,GAAIvB,KAAKE,UAAYF,KAAKE,SAASsB,YAAcxB,KAAKE,SAASuB,YAAa,CAC1EzB,KAAKE,SAASwB,iBAAiB,SAAU1B,KAAKC,a,EA0B1C,UAAA0B,GACN,MAAMA,EAAa,GAEnB,GAAI3B,KAAKE,UAAYF,KAAKE,SAAS0B,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAI7B,KAAKM,SAAU,CACjBqB,EAAWE,KAAK,c,CAGlB,GAAI7B,KAAKM,UAAYN,KAAKW,mBAAqB,KAAM,CACnDgB,EAAWE,KAAK,QAAU7B,KAAKW,iB,CAGjC,GAAIX,KAAKE,UAAYF,KAAKE,SAASuB,aAAezB,KAAKI,eAAgB,CACrEuB,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOnC,KAAK2B,aACZS,KAAK,eACLC,QAASrC,KAAKK,WACdiC,MACEtC,KAAKE,UACLF,KAAKE,SAASuB,aACdzB,KAAKE,SAASqC,WACV,CAAE,wBAAyB,QAC3B,IAGNP,EAAA,QAAAE,IAAA,6CACClC,KAAKM,UACJ0B,EAAA,YAAAE,IAAA,2CAAUM,KAAMxC,KAAKW,mBAAqB,MAAQ8B,EAAUC,I","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{r as e,h as i,H as t,g as o}from"./p-7e7de1d6.js";const n=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const a=n;const r=":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-085);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";const s=r;const l=class{constructor(i){e(this,i);this.handleScroll=()=>{if(this.tableRef.scrollLeft>0){this.tableScrolling=true}else{this.tableScrolling=false}};this.truncate=undefined;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 e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.truncate){e.push("is-truncated")}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")}render(){return i(t,{key:"28e14af2a71566974799bd9894be69257ad0c819",class:this.classNames(),role:"gridcell",style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},i("slot",{key:"c2c98f8cfc27c4f7ee30a488c67c7601cbd882ad"}))}get hostElement(){return o(this)}};l.style=a+s;export{l as pds_table_cell};
2
- //# sourceMappingURL=p-6428b918.entry.js.map
1
+ import{r as e,h as i,H as t,g as o}from"./p-7e7de1d6.js";const n=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';const a=n;const r=":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-100);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";const s=r;const l=class{constructor(i){e(this,i);this.handleScroll=()=>{if(this.tableRef.scrollLeft>0){this.tableScrolling=true}else{this.tableScrolling=false}};this.truncate=undefined;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 e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.truncate){e.push("is-truncated")}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")}render(){return i(t,{key:"28e14af2a71566974799bd9894be69257ad0c819",class:this.classNames(),role:"gridcell",style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},i("slot",{key:"c2c98f8cfc27c4f7ee30a488c67c7601cbd882ad"}))}get hostElement(){return o(this)}};l.style=a+s;export{l as pds_table_cell};
2
+ //# sourceMappingURL=p-60f11f4d.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["baseCss","PdsTableCellStyle0","pdsTableCellCss","PdsTableCellStyle1","PdsTableCell","this","handleScroll","tableRef","scrollLeft","tableScrolling","componentWillRender","hostElement","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","truncate","join","render","h","Host","key","class","role","style","selectable"],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-085);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAkB,orCACxB,MAAAC,EAAeD,E,MCMFE,EAAY,M,yBAuCfC,KAAAC,aAAe,KACrB,GAAID,KAAKE,SAASC,WAAa,EAAG,CAChCH,KAAKI,eAAiB,I,KACjB,CACLJ,KAAKI,eAAiB,K,+CAxBiB,K,CAf3C,mBAAAC,GACEL,KAAKE,SAAWF,KAAKM,YAAYC,QAAQ,Y,CAG3C,gBAAAC,GACE,GAAIR,KAAKE,UAAYF,KAAKE,SAASO,YAAcT,KAAKE,SAASQ,YAAa,CAC1EV,KAAKE,SAASS,iBAAiB,SAAUX,KAAKC,a,EAW1C,UAAAW,GACN,MAAMA,EAAa,GAEnB,GAAIZ,KAAKE,UAAYF,KAAKE,SAASW,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAId,KAAKe,SAAU,CACjBH,EAAWE,KAAK,e,CAGlB,GAAId,KAAKE,UAAYF,KAAKE,SAASQ,aAAeV,KAAKI,eAAgB,CACrEQ,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWI,KAAK,I,CAWzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOrB,KAAKY,aACZU,KAAK,WACLC,MACEvB,KAAKE,UACLF,KAAKE,SAASQ,aACdV,KAAKE,SAASsB,WACV,CAAE,wBAAyB,QAC3B,IAGNN,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
1
+ {"version":3,"names":["baseCss","PdsTableCellStyle0","pdsTableCellCss","PdsTableCellStyle1","PdsTableCell","this","handleScroll","tableRef","scrollLeft","tableScrolling","componentWillRender","hostElement","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","truncate","join","render","h","Host","key","class","role","style","selectable"],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-100);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAkB,orCACxB,MAAAC,EAAeD,E,MCMFE,EAAY,M,yBAuCfC,KAAAC,aAAe,KACrB,GAAID,KAAKE,SAASC,WAAa,EAAG,CAChCH,KAAKI,eAAiB,I,KACjB,CACLJ,KAAKI,eAAiB,K,+CAxBiB,K,CAf3C,mBAAAC,GACEL,KAAKE,SAAWF,KAAKM,YAAYC,QAAQ,Y,CAG3C,gBAAAC,GACE,GAAIR,KAAKE,UAAYF,KAAKE,SAASO,YAAcT,KAAKE,SAASQ,YAAa,CAC1EV,KAAKE,SAASS,iBAAiB,SAAUX,KAAKC,a,EAW1C,UAAAW,GACN,MAAMA,EAAa,GAEnB,GAAIZ,KAAKE,UAAYF,KAAKE,SAASW,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAId,KAAKe,SAAU,CACjBH,EAAWE,KAAK,e,CAGlB,GAAId,KAAKE,UAAYF,KAAKE,SAASQ,aAAeV,KAAKI,eAAgB,CACrEQ,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWI,KAAK,I,CAWzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOrB,KAAKY,aACZU,KAAK,WACLC,MACEvB,KAAKE,UACLF,KAAKE,SAASQ,aACdV,KAAKE,SAASsB,WACV,CAAE,wBAAyB,QAC3B,IAGNN,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- System.register(["./p-d20f4c1d.system.js","./p-16b74124.system.js"],(function(e){"use strict";var i,t,r,o,a,n,s;return{setters:[function(e){i=e.r;t=e.c;r=e.h;o=e.H;a=e.g},function(e){n=e.e;s=e.d}],execute:function(){var l=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var h=l;var c=":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-085);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";var d=c;var p=e("pds_table_head_cell",function(){function e(e){var r=this;i(this,e);this.pdsTableSort=t(this,"pdsTableSort",7);this.handleScroll=function(){if(r.tableRef.scrollLeft>0){r.tableScrolling=true}else{r.tableScrolling=false}};this.toggleSort=function(){if(r.sortable){var e=r.hostElement.innerText.trim();r.sortingDirection=r.sortingDirection==="asc"?"desc":"asc";r.tableRef.querySelectorAll("pds-table-head-cell").forEach((function(e){e.classList.remove("is-active")}));r.hostElement.classList.toggle("is-active");r.pdsTableSort.emit({column:e,direction:r.sortingDirection})}};this.sortable=undefined;this.sortingDirection="asc";this.tableScrolling=false;this.isSelected=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.sortable){e.push("is-sortable")}if(this.sortable&&this.sortingDirection!==null){e.push("sort-"+this.sortingDirection)}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")};e.prototype.render=function(){return r(o,{key:"1f10fd14e300a501cf3763b2f0edb02fe957fc4a",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},r("slot",{key:"5e18f22f031f671c7c3ae899d00afb90dd90d633"}),this.sortable&&r("pds-icon",{key:"ba00ac36b37cc45086fb5989beb71a9fc6a83bd6",icon:this.sortingDirection==="asc"?n:s}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return a(this)},enumerable:false,configurable:true});return e}());p.style=h+d}}}));
2
- //# sourceMappingURL=p-739f9ac1.system.entry.js.map
1
+ System.register(["./p-d20f4c1d.system.js","./p-16b74124.system.js"],(function(e){"use strict";var i,t,r,o,a,n,s;return{setters:[function(e){i=e.r;t=e.c;r=e.h;o=e.H;a=e.g},function(e){n=e.e;s=e.d}],execute:function(){var l=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var h=l;var c=":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-100);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";var d=c;var p=e("pds_table_head_cell",function(){function e(e){var r=this;i(this,e);this.pdsTableSort=t(this,"pdsTableSort",7);this.handleScroll=function(){if(r.tableRef.scrollLeft>0){r.tableScrolling=true}else{r.tableScrolling=false}};this.toggleSort=function(){if(r.sortable){var e=r.hostElement.innerText.trim();r.sortingDirection=r.sortingDirection==="asc"?"desc":"asc";r.tableRef.querySelectorAll("pds-table-head-cell").forEach((function(e){e.classList.remove("is-active")}));r.hostElement.classList.toggle("is-active");r.pdsTableSort.emit({column:e,direction:r.sortingDirection})}};this.sortable=undefined;this.sortingDirection="asc";this.tableScrolling=false;this.isSelected=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.sortable){e.push("is-sortable")}if(this.sortable&&this.sortingDirection!==null){e.push("sort-"+this.sortingDirection)}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")};e.prototype.render=function(){return r(o,{key:"1f10fd14e300a501cf3763b2f0edb02fe957fc4a",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},r("slot",{key:"5e18f22f031f671c7c3ae899d00afb90dd90d633"}),this.sortable&&r("pds-icon",{key:"ba00ac36b37cc45086fb5989beb71a9fc6a83bd6",icon:this.sortingDirection==="asc"?n:s}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return a(this)},enumerable:false,configurable:true});return e}());p.style=h+d}}}));
2
+ //# sourceMappingURL=p-617852e5.system.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["baseCss","PdsTableHeadCellStyle0","pdsTableHeadCellCss","PdsTableHeadCellStyle1","PdsTableHeadCell","exports","this","handleScroll","_this","tableRef","scrollLeft","tableScrolling","toggleSort","sortable","column","hostElement","innerText","trim","sortingDirection","querySelectorAll","forEach","headCell","classList","remove","toggle","pdsTableSort","emit","direction","class_1","prototype","componentWillRender","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","join","render","h","Host","key","class","role","onClick","style","selectable","icon","upSmall","downSmall"],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-085);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"mappings":"wNAAA,IAAMA,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAsB,2wDAC5B,IAAAC,EAAeD,E,ICQFE,EAAgBC,EAAA,iC,8EAgCnBC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,SAASC,WAAa,EAAG,CAChCF,EAAKG,eAAiB,I,KACjB,CACLH,EAAKG,eAAiB,K,GAIlBL,KAAAM,WAAa,WACnB,GAAIJ,EAAKK,SAAU,CACjB,IAAMC,EAASN,EAAKO,YAAYC,UAAUC,OAC1CT,EAAKU,iBAAmBV,EAAKU,mBAAqB,MAAQ,OAAS,MAEnEV,EAAKC,SAASU,iBAAiB,uBAAuBC,SAAQ,SAACC,GAC7DA,EAASC,UAAUC,OAAO,Y,IAG5Bf,EAAKO,YAAYO,UAAUE,OAAO,aAClChB,EAAKiB,aAAaC,KAAK,CAAEZ,OAAMA,EAAEa,UAAWnB,EAAKU,kB,iDApCD,M,oBACT,M,gBAKZ,K,CAE/BU,EAAAC,UAAAC,oBAAA,WACExB,KAAKG,SAAWH,KAAKS,YAAYgB,QAAQ,Y,EAG3CH,EAAAC,UAAAG,iBAAA,WACE,GAAI1B,KAAKG,UAAYH,KAAKG,SAASwB,YAAc3B,KAAKG,SAASyB,YAAa,CAC1E5B,KAAKG,SAAS0B,iBAAiB,SAAU7B,KAAKC,a,GA0B1CqB,EAAAC,UAAAO,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAI9B,KAAKG,UAAYH,KAAKG,SAAS4B,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAIhC,KAAKO,SAAU,CACjBuB,EAAWE,KAAK,c,CAGlB,GAAIhC,KAAKO,UAAYP,KAAKY,mBAAqB,KAAM,CACnDkB,EAAWE,KAAK,QAAUhC,KAAKY,iB,CAGjC,GAAIZ,KAAKG,UAAYH,KAAKG,SAASyB,aAAe5B,KAAKK,eAAgB,CACrEyB,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBX,EAAAC,UAAAW,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOtC,KAAK8B,aACZS,KAAK,eACLC,QAASxC,KAAKM,WACdmC,MACEzC,KAAKG,UACLH,KAAKG,SAASyB,aACd5B,KAAKG,SAASuC,WACV,CAAE,wBAAyB,QAC3B,IAGNP,EAAA,QAAAE,IAAA,6CACCrC,KAAKO,UACJ4B,EAAA,YAAAE,IAAA,2CAAUM,KAAM3C,KAAKY,mBAAqB,MAAQgC,EAAUC,I,gIA5FzC,I","ignoreList":[]}
1
+ {"version":3,"names":["baseCss","PdsTableHeadCellStyle0","pdsTableHeadCellCss","PdsTableHeadCellStyle1","PdsTableHeadCell","exports","this","handleScroll","_this","tableRef","scrollLeft","tableScrolling","toggleSort","sortable","column","hostElement","innerText","trim","sortingDirection","querySelectorAll","forEach","headCell","classList","remove","toggle","pdsTableSort","emit","direction","class_1","prototype","componentWillRender","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","join","render","h","Host","key","class","role","onClick","style","selectable","icon","upSmall","downSmall"],"sources":["src/global/styles/base.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-grey-950);\n --color-text-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-100);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-text-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","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 styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private 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 /**\n * A local state to track whether the row is currently selected.\n */\n @State() isSelected: 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"],"mappings":"wNAAA,IAAMA,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAsB,2wDAC5B,IAAAC,EAAeD,E,ICQFE,EAAgBC,EAAA,iC,8EAgCnBC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,SAASC,WAAa,EAAG,CAChCF,EAAKG,eAAiB,I,KACjB,CACLH,EAAKG,eAAiB,K,GAIlBL,KAAAM,WAAa,WACnB,GAAIJ,EAAKK,SAAU,CACjB,IAAMC,EAASN,EAAKO,YAAYC,UAAUC,OAC1CT,EAAKU,iBAAmBV,EAAKU,mBAAqB,MAAQ,OAAS,MAEnEV,EAAKC,SAASU,iBAAiB,uBAAuBC,SAAQ,SAACC,GAC7DA,EAASC,UAAUC,OAAO,Y,IAG5Bf,EAAKO,YAAYO,UAAUE,OAAO,aAClChB,EAAKiB,aAAaC,KAAK,CAAEZ,OAAMA,EAAEa,UAAWnB,EAAKU,kB,iDApCD,M,oBACT,M,gBAKZ,K,CAE/BU,EAAAC,UAAAC,oBAAA,WACExB,KAAKG,SAAWH,KAAKS,YAAYgB,QAAQ,Y,EAG3CH,EAAAC,UAAAG,iBAAA,WACE,GAAI1B,KAAKG,UAAYH,KAAKG,SAASwB,YAAc3B,KAAKG,SAASyB,YAAa,CAC1E5B,KAAKG,SAAS0B,iBAAiB,SAAU7B,KAAKC,a,GA0B1CqB,EAAAC,UAAAO,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAI9B,KAAKG,UAAYH,KAAKG,SAAS4B,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAIhC,KAAKO,SAAU,CACjBuB,EAAWE,KAAK,c,CAGlB,GAAIhC,KAAKO,UAAYP,KAAKY,mBAAqB,KAAM,CACnDkB,EAAWE,KAAK,QAAUhC,KAAKY,iB,CAGjC,GAAIZ,KAAKG,UAAYH,KAAKG,SAASyB,aAAe5B,KAAKK,eAAgB,CACrEyB,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBX,EAAAC,UAAAW,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOtC,KAAK8B,aACZS,KAAK,eACLC,QAASxC,KAAKM,WACdmC,MACEzC,KAAKG,UACLH,KAAKG,SAASyB,aACd5B,KAAKG,SAASuC,WACV,CAAE,wBAAyB,QAC3B,IAGNP,EAAA,QAAAE,IAAA,6CACCrC,KAAKO,UACJ4B,EAAA,YAAAE,IAAA,2CAAUM,KAAM3C,KAAKY,mBAAqB,MAAQgC,EAAUC,I,gIA5FzC,I","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- System.register(["./p-d20f4c1d.system.js"],(function(e){"use strict";var i,t,o,n;return{setters:[function(e){i=e.r;t=e.h;o=e.H;n=e.g}],execute:function(){var r=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var a=r;var l=":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-085);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";var s=l;var h=e("pds_table_cell",function(){function e(e){var t=this;i(this,e);this.handleScroll=function(){if(t.tableRef.scrollLeft>0){t.tableScrolling=true}else{t.tableScrolling=false}};this.truncate=undefined;this.tableScrolling=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.truncate){e.push("is-truncated")}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")};e.prototype.render=function(){return t(o,{key:"28e14af2a71566974799bd9894be69257ad0c819",class:this.classNames(),role:"gridcell",style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},t("slot",{key:"c2c98f8cfc27c4f7ee30a488c67c7601cbd882ad"}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());h.style=a+s}}}));
2
- //# sourceMappingURL=p-cf035857.system.entry.js.map
1
+ System.register(["./p-d20f4c1d.system.js"],(function(e){"use strict";var i,t,o,n;return{setters:[function(e){i=e.r;t=e.h;o=e.H;n=e.g}],execute:function(){var r=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var a=r;var l=":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-100);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";var s=l;var h=e("pds_table_cell",function(){function e(e){var t=this;i(this,e);this.handleScroll=function(){if(t.tableRef.scrollLeft>0){t.tableScrolling=true}else{t.tableScrolling=false}};this.truncate=undefined;this.tableScrolling=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.truncate){e.push("is-truncated")}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")};e.prototype.render=function(){return t(o,{key:"28e14af2a71566974799bd9894be69257ad0c819",class:this.classNames(),role:"gridcell",style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},t("slot",{key:"c2c98f8cfc27c4f7ee30a488c67c7601cbd882ad"}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());h.style=a+s}}}));
2
+ //# sourceMappingURL=p-b84e6e45.system.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["baseCss","PdsTableCellStyle0","pdsTableCellCss","PdsTableCellStyle1","PdsTableCell","exports","this","handleScroll","_this","tableRef","scrollLeft","tableScrolling","class_1","prototype","componentWillRender","hostElement","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","truncate","join","render","h","Host","key","class","role","style","selectable"],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-085);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"mappings":"0JAAA,IAAMA,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAkB,orCACxB,IAAAC,EAAeD,E,ICMFE,EAAYC,EAAA,4B,mCAuCfC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,SAASC,WAAa,EAAG,CAChCF,EAAKG,eAAiB,I,KACjB,CACLH,EAAKG,eAAiB,K,+CAxBiB,K,CAf3CC,EAAAC,UAAAC,oBAAA,WACER,KAAKG,SAAWH,KAAKS,YAAYC,QAAQ,Y,EAG3CJ,EAAAC,UAAAI,iBAAA,WACE,GAAIX,KAAKG,UAAYH,KAAKG,SAASS,YAAcZ,KAAKG,SAASU,YAAa,CAC1Eb,KAAKG,SAASW,iBAAiB,SAAUd,KAAKC,a,GAW1CK,EAAAC,UAAAQ,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIf,KAAKG,UAAYH,KAAKG,SAASa,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAIjB,KAAKkB,SAAU,CACjBH,EAAWE,KAAK,e,CAGlB,GAAIjB,KAAKG,UAAYH,KAAKG,SAASU,aAAeb,KAAKK,eAAgB,CACrEU,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWI,KAAK,I,EAWzBb,EAAAC,UAAAa,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOxB,KAAKe,aACZU,KAAK,WACLC,MACE1B,KAAKG,UACLH,KAAKG,SAASU,aACdb,KAAKG,SAASwB,WACV,CAAE,wBAAyB,QAC3B,IAGNN,EAAA,QAAAE,IAAA,6C,gIA5DiB,I","ignoreList":[]}
1
+ {"version":3,"names":["baseCss","PdsTableCellStyle0","pdsTableCellCss","PdsTableCellStyle1","PdsTableCell","exports","this","handleScroll","_this","tableRef","scrollLeft","tableScrolling","class_1","prototype","componentWillRender","hostElement","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","truncate","join","render","h","Host","key","class","role","style","selectable"],"sources":["src/global/styles/base.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/*\n Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/*\n Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(p) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n --color-background-fixed: var(--pine-color-white);\n --color-cell-default: var(--pine-color-grey-700);\n\n --dimension-fixed-cell-position: 0;\n --dimension-max-width-truncated: 100px;\n\n --font-size-cell-default: var(--pine-font-size-100);\n\n --number-fixed-column-index: 0;\n\n --spacing-line-height-cell-default: var(--pine-line-height-125);\n --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);\n --spacing-padding-compact: var(--pine-spacing-050);\n\n color: var(--color-cell-default);\n display: table-cell;\n font-size: var(--font-size-cell-default);\n line-height: var(--spacing-line-height-cell-default);\n padding: var(--spacing-padding-cell-default);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: var(--dimension-max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\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 /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\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.truncate) {\n classNames.push('is-truncated');\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 private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\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 </Host>\n );\n }\n}\n"],"mappings":"0JAAA,IAAMA,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAkB,orCACxB,IAAAC,EAAeD,E,ICMFE,EAAYC,EAAA,4B,mCAuCfC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,SAASC,WAAa,EAAG,CAChCF,EAAKG,eAAiB,I,KACjB,CACLH,EAAKG,eAAiB,K,+CAxBiB,K,CAf3CC,EAAAC,UAAAC,oBAAA,WACER,KAAKG,SAAWH,KAAKS,YAAYC,QAAQ,Y,EAG3CJ,EAAAC,UAAAI,iBAAA,WACE,GAAIX,KAAKG,UAAYH,KAAKG,SAASS,YAAcZ,KAAKG,SAASU,YAAa,CAC1Eb,KAAKG,SAASW,iBAAiB,SAAUd,KAAKC,a,GAW1CK,EAAAC,UAAAQ,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIf,KAAKG,UAAYH,KAAKG,SAASa,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAIjB,KAAKkB,SAAU,CACjBH,EAAWE,KAAK,e,CAGlB,GAAIjB,KAAKG,UAAYH,KAAKG,SAASU,aAAeb,KAAKK,eAAgB,CACrEU,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWI,KAAK,I,EAWzBb,EAAAC,UAAAa,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOxB,KAAKe,aACZU,KAAK,WACLC,MACE1B,KAAKG,UACLH,KAAKG,SAASU,aACdb,KAAKG,SAASwB,WACV,CAAE,wBAAyB,QAC3B,IAGNN,EAAA,QAAAE,IAAA,6C,gIA5DiB,I","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{p as e,b as n}from"./p-7e7de1d6.js";export{s as setNonce}from"./p-7e7de1d6.js";import{g as o}from"./p-e1255160.js";var t=()=>{const n=import.meta.url;const o={};if(n!==""){o.resourcesUrl=new URL(".",n).href}return e(o)};t().then((async e=>{await o();return n([["p-889b29d1",[[1,"pds-table-head",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-f0ea6124",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-b1c7914b",[[1,"pds-table-row",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-c8b3c512",[[1,"pds-accordion",{componentId:[1,"component-id"],isOpen:[1540,"open"]},null,{isOpen:["handleOpenState"]}]]],["p-5563b90b",[[1,"pds-avatar",{alt:[1],badge:[4],componentId:[1,"component-id"],dropdown:[4],image:[1],size:[513],variant:[513]}]]],["p-e3fd9a87",[[1,"pds-chip",{componentId:[1,"component-id"],sentiment:[1],dot:[4],label:[1],large:[4],variant:[1]}]]],["p-20bdacf6",[[1,"pds-link",{componentId:[1,"component-id"],external:[4],variant:[1],fontSize:[1,"font-size"],href:[1]}]]],["p-b491e677",[[6,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],showHandle:[1028,"show-handle"]}]]],["p-60622df4",[[0,"pds-box",{alignItems:[1,"align-items"],auto:[4],backgroundColor:[1,"background-color"],border:[4],borderColor:[1,"border-color"],borderRadius:[1,"border-radius"],direction:[1],display:[1],fit:[4],gap:[1],flex:[1],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],minWidth:[1,"min-width"],offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],padding:[1],shadow:[1],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]}]]],["p-f1b34408",[[1,"pds-divider",{componentId:[1,"component-id"],offset:[1],vertical:[4]}]]],["p-fc5ff4fe",[[1,"pds-image",{alt:[1],componentId:[1,"component-id"],height:[2],loading:[1],sizes:[1],src:[1],srcset:[1],width:[2]}]]],["p-b9318435",[[1,"pds-input",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],type:[1],value:[1025]}]]],["p-37dcefe3",[[1,"pds-loader",{isLoading:[4,"is-loading"],showLabel:[4,"show-label"],size:[513],variant:[1]}]]],["p-8368a4d0",[[1,"pds-progress",{animated:[4],componentId:[1,"component-id"],fillColor:[1,"fill-color"],label:[1],percent:[2],showPercent:[4,"show-percent"]}]]],["p-c0804c37",[[2,"pds-radio",{checked:[4],disabled:[4],errorMessage:[1,"error-message"],invalid:[4],componentId:[1,"component-id"],label:[1],helperMessage:[1,"helper-message"],name:[1],required:[4],value:[1]}]]],["p-79625567",[[0,"pds-row",{alignItems:[1,"align-items"],border:[4],colGap:[1,"col-gap"],componentId:[1,"component-id"],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],noWrap:[4,"no-wrap"]}]]],["p-ddf4b172",[[6,"pds-sortable",{border:[516],componentId:[1,"component-id"],dividers:[516],handleType:[1,"handle-type"]}]]],["p-8835d0b2",[[1,"pds-switch",{componentId:[1,"component-id"],checked:[4],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],required:[4],type:[1],value:[1]}]]],["p-3487fe4a",[[4,"pds-tab",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],index:[2],selected:[4]}]]],["p-c6ca5a77",[[1,"pds-table",{compact:[4],componentId:[1,"component-id"],responsive:[4],fixedColumn:[4,"fixed-column"],selectable:[4],sortingColumn:[32],sortingDirection:[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["p-d6611903",[[1,"pds-table-body"]]],["p-d0948e17",[[4,"pds-tabpanel",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],selected:[1028]}]]],["p-058ee4aa",[[1,"pds-tabs",{tablistLabel:[1,"tablist-label"],componentId:[1,"component-id"],variant:[1],activeTabName:[1025,"active-tab-name"],activeTabIndex:[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-2258e023",[[1,"pds-textarea",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],value:[1025]}]]],["p-799c9bb7",[[1,"pds-tooltip",{content:[1],componentId:[1,"component-id"],hasArrow:[4,"has-arrow"],htmlContent:[4,"html-content"],placement:[513],opened:[1540],isOpen:[32],showTooltip:[64],hideTooltip:[64]},null,{opened:["handleOpenToggle"]}]]],["p-f5597dce",[[1,"pds-icon",{color:[1],icon:[8],name:[513],size:[513],src:[1],ariaLabel:[32],isVisible:[32],svgContent:[32]},null,{size:["updateStyles"],color:["updateStyles"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}]]],["p-2fc8be16",[[1,"pds-button",{componentId:[1,"component-id"],disabled:[4],icon:[1],name:[1],value:[1],type:[1],variant:[1]}]]],["p-470a5e99",[[1,"pds-table-head-cell",{sortable:[4],sortingDirection:[32],tableScrolling:[32],isSelected:[32]}]]],["p-6428b918",[[1,"pds-table-cell",{truncate:[4],tableScrolling:[32]}]]],["p-ac46b22e",[[1,"pds-checkbox",{checked:[1028],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[1028],invalid:[4],label:[1],labelHidden:[4,"label-hidden"],name:[1],required:[4],value:[1]},null,{checked:["updateIndeterminate"]}]]]],e)}));
1
+ import{p as e,b as n}from"./p-7e7de1d6.js";export{s as setNonce}from"./p-7e7de1d6.js";import{g as o}from"./p-e1255160.js";var t=()=>{const n=import.meta.url;const o={};if(n!==""){o.resourcesUrl=new URL(".",n).href}return e(o)};t().then((async e=>{await o();return n([["p-889b29d1",[[1,"pds-table-head",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-f0ea6124",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-b1c7914b",[[1,"pds-table-row",{indeterminate:[1028],isSelected:[1028,"is-selected"]}]]],["p-c8b3c512",[[1,"pds-accordion",{componentId:[1,"component-id"],isOpen:[1540,"open"]},null,{isOpen:["handleOpenState"]}]]],["p-5563b90b",[[1,"pds-avatar",{alt:[1],badge:[4],componentId:[1,"component-id"],dropdown:[4],image:[1],size:[513],variant:[513]}]]],["p-e3fd9a87",[[1,"pds-chip",{componentId:[1,"component-id"],sentiment:[1],dot:[4],label:[1],large:[4],variant:[1]}]]],["p-20bdacf6",[[1,"pds-link",{componentId:[1,"component-id"],external:[4],variant:[1],fontSize:[1,"font-size"],href:[1]}]]],["p-b491e677",[[6,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],showHandle:[1028,"show-handle"]}]]],["p-60622df4",[[0,"pds-box",{alignItems:[1,"align-items"],auto:[4],backgroundColor:[1,"background-color"],border:[4],borderColor:[1,"border-color"],borderRadius:[1,"border-radius"],direction:[1],display:[1],fit:[4],gap:[1],flex:[1],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],minWidth:[1,"min-width"],offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],padding:[1],shadow:[1],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]}]]],["p-f1b34408",[[1,"pds-divider",{componentId:[1,"component-id"],offset:[1],vertical:[4]}]]],["p-fc5ff4fe",[[1,"pds-image",{alt:[1],componentId:[1,"component-id"],height:[2],loading:[1],sizes:[1],src:[1],srcset:[1],width:[2]}]]],["p-b9318435",[[1,"pds-input",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],type:[1],value:[1025]}]]],["p-37dcefe3",[[1,"pds-loader",{isLoading:[4,"is-loading"],showLabel:[4,"show-label"],size:[513],variant:[1]}]]],["p-8368a4d0",[[1,"pds-progress",{animated:[4],componentId:[1,"component-id"],fillColor:[1,"fill-color"],label:[1],percent:[2],showPercent:[4,"show-percent"]}]]],["p-c0804c37",[[2,"pds-radio",{checked:[4],disabled:[4],errorMessage:[1,"error-message"],invalid:[4],componentId:[1,"component-id"],label:[1],helperMessage:[1,"helper-message"],name:[1],required:[4],value:[1]}]]],["p-79625567",[[0,"pds-row",{alignItems:[1,"align-items"],border:[4],colGap:[1,"col-gap"],componentId:[1,"component-id"],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],noWrap:[4,"no-wrap"]}]]],["p-ddf4b172",[[6,"pds-sortable",{border:[516],componentId:[1,"component-id"],dividers:[516],handleType:[1,"handle-type"]}]]],["p-8835d0b2",[[1,"pds-switch",{componentId:[1,"component-id"],checked:[4],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],required:[4],type:[1],value:[1]}]]],["p-3487fe4a",[[4,"pds-tab",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],index:[2],selected:[4]}]]],["p-c6ca5a77",[[1,"pds-table",{compact:[4],componentId:[1,"component-id"],responsive:[4],fixedColumn:[4,"fixed-column"],selectable:[4],sortingColumn:[32],sortingDirection:[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["p-d6611903",[[1,"pds-table-body"]]],["p-d0948e17",[[4,"pds-tabpanel",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],selected:[1028]}]]],["p-058ee4aa",[[1,"pds-tabs",{tablistLabel:[1,"tablist-label"],componentId:[1,"component-id"],variant:[1],activeTabName:[1025,"active-tab-name"],activeTabIndex:[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-2258e023",[[1,"pds-textarea",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],value:[1025]}]]],["p-799c9bb7",[[1,"pds-tooltip",{content:[1],componentId:[1,"component-id"],hasArrow:[4,"has-arrow"],htmlContent:[4,"html-content"],placement:[513],opened:[1540],isOpen:[32],showTooltip:[64],hideTooltip:[64]},null,{opened:["handleOpenToggle"]}]]],["p-f5597dce",[[1,"pds-icon",{color:[1],icon:[8],name:[513],size:[513],src:[1],ariaLabel:[32],isVisible:[32],svgContent:[32]},null,{size:["updateStyles"],color:["updateStyles"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}]]],["p-2fc8be16",[[1,"pds-button",{componentId:[1,"component-id"],disabled:[4],icon:[1],name:[1],value:[1],type:[1],variant:[1]}]]],["p-42e73076",[[1,"pds-table-head-cell",{sortable:[4],sortingDirection:[32],tableScrolling:[32],isSelected:[32]}]]],["p-60f11f4d",[[1,"pds-table-cell",{truncate:[4],tableScrolling:[32]}]]],["p-ac46b22e",[[1,"pds-checkbox",{checked:[1028],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[1028],invalid:[4],label:[1],labelHidden:[4,"label-hidden"],name:[1],required:[4],value:[1]},null,{checked:["updateIndeterminate"]}]]]],e)}));
2
2
  //# sourceMappingURL=pine-core.esm.js.map
package/hydrate/index.js CHANGED
@@ -6487,7 +6487,7 @@ class PdsTableBody {
6487
6487
  const baseCss$6 = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
6488
6488
  var PdsTableCellStyle0 = baseCss$6;
6489
6489
 
6490
- const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-085);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
6490
+ const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-100);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
6491
6491
  var PdsTableCellStyle1 = pdsTableCellCss;
6492
6492
 
6493
6493
  class PdsTableCell {
@@ -6617,7 +6617,7 @@ class PdsTableHead {
6617
6617
  const baseCss$4 = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
6618
6618
  var PdsTableHeadCellStyle0 = baseCss$4;
6619
6619
 
6620
- const pdsTableHeadCellCss = ":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-085);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
6620
+ const pdsTableHeadCellCss = ":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-100);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
6621
6621
  var PdsTableHeadCellStyle1 = pdsTableHeadCellCss;
6622
6622
 
6623
6623
  class PdsTableHeadCell {
package/hydrate/index.mjs CHANGED
@@ -6483,7 +6483,7 @@ class PdsTableBody {
6483
6483
  const baseCss$6 = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
6484
6484
  var PdsTableCellStyle0 = baseCss$6;
6485
6485
 
6486
- const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-085);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
6486
+ const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-100);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
6487
6487
  var PdsTableCellStyle1 = pdsTableCellCss;
6488
6488
 
6489
6489
  class PdsTableCell {
@@ -6613,7 +6613,7 @@ class PdsTableHead {
6613
6613
  const baseCss$4 = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
6614
6614
  var PdsTableHeadCellStyle0 = baseCss$4;
6615
6615
 
6616
- const pdsTableHeadCellCss = ":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-085);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
6616
+ const pdsTableHeadCellCss = ":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-grey-950);--color-text-default:var(--pine-color-grey-700);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-100);--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);-webkit-border-after:var(--border-head-cell-default);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:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
6617
6617
  var PdsTableHeadCellStyle1 = pdsTableHeadCellCss;
6618
6618
 
6619
6619
  class PdsTableHeadCell {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pine-ds/core",
3
- "version": "2.23.0-mercury.0",
3
+ "version": "2.24.0-mercury.0",
4
4
  "license": "MIT",
5
5
  "description": "Base components for Pine Design System",
6
6
  "author": "Kajabi Design System Services",
@@ -64,7 +64,7 @@
64
64
  "devDependencies": {
65
65
  "@babel/core": "^7.19.3",
66
66
  "@babel/preset-env": "^7.22.10",
67
- "@pine-ds/doc-components": "^2.22.0-mercury.0",
67
+ "@pine-ds/doc-components": "^2.23.0-mercury.0",
68
68
  "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
69
69
  "@stencil-community/eslint-plugin": "^0.5.0",
70
70
  "@stencil/react-output-target": "^0.5.3",