@pine-ds/core 2.22.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 (49) hide show
  1. package/components/pds-button2.js +1 -1
  2. package/components/pds-button2.js.map +1 -1
  3. package/components/pds-table-cell2.js +1 -1
  4. package/components/pds-table-cell2.js.map +1 -1
  5. package/components/pds-table-head-cell2.js +1 -1
  6. package/components/pds-table-head-cell2.js.map +1 -1
  7. package/dist/cjs/pds-button.cjs.entry.js +1 -1
  8. package/dist/cjs/pds-button.cjs.entry.js.map +1 -1
  9. package/dist/cjs/pds-table-cell.cjs.entry.js +1 -1
  10. package/dist/cjs/pds-table-cell.cjs.entry.js.map +1 -1
  11. package/dist/cjs/pds-table-head-cell.cjs.entry.js +1 -1
  12. package/dist/cjs/pds-table-head-cell.cjs.entry.js.map +1 -1
  13. package/dist/collection/components/pds-button/pds-button.css +1 -1
  14. package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.css +1 -1
  15. package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css +1 -1
  16. package/dist/docs.json +1 -1
  17. package/dist/esm/pds-button.entry.js +1 -1
  18. package/dist/esm/pds-button.entry.js.map +1 -1
  19. package/dist/esm/pds-table-cell.entry.js +1 -1
  20. package/dist/esm/pds-table-cell.entry.js.map +1 -1
  21. package/dist/esm/pds-table-head-cell.entry.js +1 -1
  22. package/dist/esm/pds-table-head-cell.entry.js.map +1 -1
  23. package/dist/esm-es5/pds-button.entry.js +1 -1
  24. package/dist/esm-es5/pds-button.entry.js.map +1 -1
  25. package/dist/esm-es5/pds-table-cell.entry.js +1 -1
  26. package/dist/esm-es5/pds-table-cell.entry.js.map +1 -1
  27. package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
  28. package/dist/esm-es5/pds-table-head-cell.entry.js.map +1 -1
  29. package/dist/pine-core/p-06f526e5.system.js +1 -1
  30. package/dist/pine-core/p-1c60bcd0.system.entry.js +2 -0
  31. package/dist/pine-core/p-1c60bcd0.system.entry.js.map +1 -0
  32. package/dist/pine-core/p-2fc8be16.entry.js +2 -0
  33. package/dist/pine-core/p-2fc8be16.entry.js.map +1 -0
  34. package/dist/pine-core/{p-470a5e99.entry.js → p-42e73076.entry.js} +2 -2
  35. package/dist/pine-core/{p-470a5e99.entry.js.map → p-42e73076.entry.js.map} +1 -1
  36. package/dist/pine-core/{p-6428b918.entry.js → p-60f11f4d.entry.js} +2 -2
  37. package/dist/pine-core/{p-6428b918.entry.js.map → p-60f11f4d.entry.js.map} +1 -1
  38. package/dist/pine-core/{p-739f9ac1.system.entry.js → p-617852e5.system.entry.js} +2 -2
  39. package/dist/pine-core/{p-739f9ac1.system.entry.js.map → p-617852e5.system.entry.js.map} +1 -1
  40. package/dist/pine-core/{p-cf035857.system.entry.js → p-b84e6e45.system.entry.js} +2 -2
  41. package/dist/pine-core/{p-cf035857.system.entry.js.map → p-b84e6e45.system.entry.js.map} +1 -1
  42. package/dist/pine-core/pine-core.esm.js +1 -1
  43. package/hydrate/index.js +3 -3
  44. package/hydrate/index.mjs +3 -3
  45. package/package.json +2 -2
  46. package/dist/pine-core/p-35d6c787.entry.js +0 -2
  47. package/dist/pine-core/p-35d6c787.entry.js.map +0 -1
  48. package/dist/pine-core/p-a05bfa39.system.entry.js +0 -2
  49. package/dist/pine-core/p-a05bfa39.system.entry.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","baseCss","PdsButtonStyle0","pdsButtonCss","PdsButtonStyle1","PdsButton","exports","this","handleClick","ev","_this","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","class_1","prototype","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/global/styles/base.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n return !!el.shadowRoot && !!(el as any).attachShadow\n}\n","// 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-radius-default: var(--pine-border-radius-round);\n\n --border-width-default: var(--pine-border-width-thin);\n --border-width-unstyled: var(--pine-border-radius-0);\n\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n\n // primary\n --color-background-primary-default: var(--pine-color-grey-900);\n --color-background-primary-disabled: var(--pine-color-grey-300);\n --color-background-primary-hover: var(--pine-color-grey-950);\n --color-text-primary-default: var(--pine-color-white);\n --color-text-primary-disabled: var(--pine-color-grey-600);\n --color-outline-primary: var(--pine-color-blue-200);\n\n // secondary\n --color-border-secondary-default: var(--pine-color-grey-400);\n --color-border-secondary-disabled: var(--pine-color-grey-300);\n --color-border-secondary-focus: var(--pine-color-grey-300);\n --color-border-secondary-hover: var(--pine-color-grey-500);\n --color-text-secondary-default: var(--pine-color-grey-900);\n --color-text-secondary-disabled: var(--pine-color-grey-600);\n --color-outline-secondary: var(--pine-color-blue-200);\n\n // accent\n --color-background-accent-default: var(--pine-color-purple-500);\n --color-background-accent-disabled: var(--pine-color-purple-150);\n --color-background-accent-hover: var(--pine-color-purple-600);\n --color-text-accent-default: var(--pine-color-white);\n --color-text-accent-disabled: var(--pine-color-purple-300);\n --color-outline-accent: var(--pine-color-purple-300);\n\n // destructive\n --color-background-destructive-default: var(--pine-color-red-300);\n --color-background-destructive-disabled: var(--pine-color-red-100);\n --color-background-destructive-hover: var(--pine-color-red-400);\n --color-text-destructive-default: var(--pine-color-white);\n --color-text-destructive-disabled: var(--pine-color-red-200);\n --color-outline-destructive: var(--pine-color-red-200);\n\n --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n --spacing-padding-block: var(--pine-spacing-100);\n --spacing-padding-inline: var(--pine-spacing-200);\n --spacing-unstyled: var(--pine-spacing-0);\n\n --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n.pds-button {\n align-items: center;\n background-color: var(--color-background-default);\n border: var(--border-width-default) solid var(--color-border-default);\n border-radius: var(--pine-border-radius-125);\n color: var(--color-text-default);\n display: flex;\n font: var(--typography-default);\n min-height: 40px;\n padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n margin-inline-end: var(--spacing-icon-margin-inline-end);\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n border-color: var(--color-border-focus);\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--color-background-primary-default);\n --color-background-hover: var(--color-background-primary-hover);\n --color-background-disabled: var(--color-background-primary-disabled);\n --color-text-default: var(--color-text-primary-default);\n --color-text-disabled: var(--color-text-primary-disabled);\n --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--color-background-accent-default);\n --color-background-hover: var(--color-background-accent-hover);\n --color-background-disabled: var(--color-background-accent-disabled);\n --color-text-default: var(--color-text-accent-default);\n --color-text-disabled: var(--color-text-accent-disabled);\n --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--color-background-destructive-default);\n --color-background-hover: var(--color-background-destructive-hover);\n --color-background-disabled: var(--color-background-destructive-disabled);\n --color-text-default: var(--color-text-destructive-default);\n --color-text-disabled: var(--color-text-destructive-disabled);\n --color-outline: var(--color-outline-destructive);\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-border-disabled: var(--color-border-secondary-disabled);\n --color-border-focus: var(--color-border-secondary-focus);\n --color-border-hover: var(--color-border-secondary-hover);\n --color-border-default: var(--color-border-secondary-default);\n --color-text-default: var(--color-text-secondary-default);\n --color-text-disabled: var(--color-text-secondary-disabled);\n --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n pds-icon {\n margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: inherit;\n border: var(--border-width-unstyled);\n margin: var(--spacing-unstyled);\n min-height: auto;\n padding: var(--spacing-unstyled);\n width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['../../global/styles/base.scss', 'pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Toggles disabled state of button\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Displays icon before text when icon string matches an icon name\n */\n @Prop() icon?: string = null;\n\n /**\n * Provides button with a submittable name\n */\n @Prop() name?: string;\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Provides button with a type\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Sets button variant styles as outlined in Figma documentation\n */\n @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n private handleClick = (ev: Event) => {\n if (this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form')\n if (form) {\n ev.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.type\n fakeButton.style.display = 'none'\n form.appendChild(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n }\n }\n }\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <button\n class={this.classNames()}\n disabled={this.disabled}\n name={this.name}\n part=\"button\"\n type={this.type}\n value={this.value}\n >\n {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n <slot />\n {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"wMAIO,IAAMA,EAAe,SAACC,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,YAC1C,ECNA,IAAMC,EAAU,s1DAChB,IAAAC,EAAeD,ECDf,IAAME,EAAe,iwLACrB,IAAAC,EAAeD,E,ICeFE,EAASC,EAAA,wB,mCAwCZC,KAAAC,YAAc,SAACC,GACrB,GAAIC,EAAKC,MAAQ,SAAU,CAEzB,GAAId,EAAaa,EAAKZ,IAAK,CACzB,IAAMc,EAAOF,EAAKZ,GAAGe,QAAQ,QAC7B,GAAID,EAAM,CACRH,EAAGK,iBAEH,IAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOD,EAAKC,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1FC,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,cAEpB,GAAIlB,KAAKmB,QAAS,CAChBD,EAAWE,KAAK,eAAiBpB,KAAKmB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,EAGzBL,EAAAC,UAAAK,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYzB,KAAK0B,SAAW,OAAS,KACxCC,GAAI3B,KAAK4B,YACTC,QAAS7B,KAAKC,YACdkB,QAASnB,KAAKmB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO9B,KAAKkB,aACZQ,SAAU1B,KAAK0B,SACfK,KAAM/B,KAAK+B,KACXC,KAAK,SACL5B,KAAMJ,KAAKI,KACX6B,MAAOjC,KAAKiC,OAEXjC,KAAKkC,MAAQlC,KAAKmB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM/B,KAAKkC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCzB,KAAKmB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,EAAWH,KAAK,W,uHAvFtD,I","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ import{r,h as o,H as e,g as a}from"./p-7e7de1d6.js";import{b as t}from"./p-373bf876.js";const n=r=>!!r.shadowRoot&&!!r.attachShadow;const i=':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 d=i;const c=":host{--border-radius-default:var(--pine-border-radius-round);--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-grey-900);--color-background-primary-disabled:var(--pine-color-grey-300);--color-background-primary-hover:var(--pine-color-grey-950);--color-text-primary-default:var(--pine-color-white);--color-text-primary-disabled:var(--pine-color-grey-600);--color-outline-primary:var(--pine-color-blue-200);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-grey-900);--color-text-secondary-disabled:var(--pine-color-grey-600);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-purple-500);--color-background-accent-disabled:var(--pine-color-purple-150);--color-background-accent-hover:var(--pine-color-purple-600);--color-text-accent-default:var(--pine-color-white);--color-text-accent-disabled:var(--pine-color-purple-300);--color-outline-accent:var(--pine-color-purple-300);--color-background-destructive-default:var(--pine-color-red-300);--color-background-destructive-disabled:var(--pine-color-red-100);--color-background-destructive-hover:var(--pine-color-red-400);--color-text-destructive-default:var(--pine-color-white);--color-text-destructive-disabled:var(--pine-color-red-200);--color-outline-destructive:var(--pine-color-red-200);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-125);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{color:currentColor;fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--destructive:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";const l=c;const s=class{constructor(o){r(this,o);this.handleClick=r=>{if(this.type!="button"){if(n(this.el)){const o=this.el.closest("form");if(o){r.preventDefault();const e=document.createElement("button");e.type=this.type;e.style.display="none";o.appendChild(e);e.click();e.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}classNames(){const r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join(" ")}render(){return o(e,{key:"4c63b9a386ed3d9d9f3516648ec26c3823ac6fa6","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},o("button",{key:"50cdc14ea87c350f2e173fb38006021bfe0b78d7",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&o("pds-icon",{key:"94e7c0b1b6b8223b78afe5b61a6073b907afc6e1",name:this.icon,part:"icon"}),o("slot",{key:"736b97d814d34eb8a01ddd22ade8d9ee5a35de82"}),this.variant==="disclosure"&&o("pds-icon",{key:"f7bea88482de7bfaf23c74e71d9748a403df6a76",icon:t,part:"caret"})))}get el(){return a(this)}};s.style=d+l;export{s as pds_button};
2
+ //# sourceMappingURL=p-2fc8be16.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","baseCss","PdsButtonStyle0","pdsButtonCss","PdsButtonStyle1","PdsButton","this","handleClick","ev","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/global/styles/base.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n return !!el.shadowRoot && !!(el as any).attachShadow\n}\n","// 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-radius-default: var(--pine-border-radius-round);\n\n --border-width-default: var(--pine-border-width-thin);\n --border-width-unstyled: var(--pine-border-radius-0);\n\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n\n // primary\n --color-background-primary-default: var(--pine-color-grey-900);\n --color-background-primary-disabled: var(--pine-color-grey-300);\n --color-background-primary-hover: var(--pine-color-grey-950);\n --color-text-primary-default: var(--pine-color-white);\n --color-text-primary-disabled: var(--pine-color-grey-600);\n --color-outline-primary: var(--pine-color-blue-200);\n\n // secondary\n --color-border-secondary-default: var(--pine-color-grey-400);\n --color-border-secondary-disabled: var(--pine-color-grey-300);\n --color-border-secondary-focus: var(--pine-color-grey-300);\n --color-border-secondary-hover: var(--pine-color-grey-500);\n --color-text-secondary-default: var(--pine-color-grey-900);\n --color-text-secondary-disabled: var(--pine-color-grey-600);\n --color-outline-secondary: var(--pine-color-blue-200);\n\n // accent\n --color-background-accent-default: var(--pine-color-purple-500);\n --color-background-accent-disabled: var(--pine-color-purple-150);\n --color-background-accent-hover: var(--pine-color-purple-600);\n --color-text-accent-default: var(--pine-color-white);\n --color-text-accent-disabled: var(--pine-color-purple-300);\n --color-outline-accent: var(--pine-color-purple-300);\n\n // destructive\n --color-background-destructive-default: var(--pine-color-red-300);\n --color-background-destructive-disabled: var(--pine-color-red-100);\n --color-background-destructive-hover: var(--pine-color-red-400);\n --color-text-destructive-default: var(--pine-color-white);\n --color-text-destructive-disabled: var(--pine-color-red-200);\n --color-outline-destructive: var(--pine-color-red-200);\n\n --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n --spacing-padding-block: var(--pine-spacing-100);\n --spacing-padding-inline: var(--pine-spacing-200);\n --spacing-unstyled: var(--pine-spacing-0);\n\n --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n.pds-button {\n align-items: center;\n background-color: var(--color-background-default);\n border: var(--border-width-default) solid var(--color-border-default);\n border-radius: var(--pine-border-radius-125);\n color: var(--color-text-default);\n display: flex;\n font: var(--typography-default);\n min-height: 40px;\n padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n margin-inline-end: var(--spacing-icon-margin-inline-end);\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n border-color: var(--color-border-focus);\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--color-background-primary-default);\n --color-background-hover: var(--color-background-primary-hover);\n --color-background-disabled: var(--color-background-primary-disabled);\n --color-text-default: var(--color-text-primary-default);\n --color-text-disabled: var(--color-text-primary-disabled);\n --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--color-background-accent-default);\n --color-background-hover: var(--color-background-accent-hover);\n --color-background-disabled: var(--color-background-accent-disabled);\n --color-text-default: var(--color-text-accent-default);\n --color-text-disabled: var(--color-text-accent-disabled);\n --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--color-background-destructive-default);\n --color-background-hover: var(--color-background-destructive-hover);\n --color-background-disabled: var(--color-background-destructive-disabled);\n --color-text-default: var(--color-text-destructive-default);\n --color-text-disabled: var(--color-text-destructive-disabled);\n --color-outline: var(--color-outline-destructive);\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-border-disabled: var(--color-border-secondary-disabled);\n --color-border-focus: var(--color-border-secondary-focus);\n --color-border-hover: var(--color-border-secondary-hover);\n --color-border-default: var(--color-border-secondary-default);\n --color-text-default: var(--color-text-secondary-default);\n --color-text-disabled: var(--color-text-secondary-disabled);\n --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n pds-icon {\n margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: inherit;\n border: var(--border-width-unstyled);\n margin: var(--spacing-unstyled);\n min-height: auto;\n padding: var(--spacing-unstyled);\n width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['../../global/styles/base.scss', 'pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Toggles disabled state of button\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Displays icon before text when icon string matches an icon name\n */\n @Prop() icon?: string = null;\n\n /**\n * Provides button with a submittable name\n */\n @Prop() name?: string;\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Provides button with a type\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Sets button variant styles as outlined in Figma documentation\n */\n @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n private handleClick = (ev: Event) => {\n if (this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form')\n if (form) {\n ev.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.type\n fakeButton.style.display = 'none'\n form.appendChild(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n }\n }\n }\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <button\n class={this.classNames()}\n disabled={this.disabled}\n name={this.name}\n part=\"button\"\n type={this.type}\n value={this.value}\n >\n {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n <slot />\n {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"wFAIO,MAAMA,EAAgBC,KAClBA,EAAGC,cAAiBD,EAAWE,aCL1C,MAAMC,EAAU,s1DAChB,MAAAC,EAAeD,ECDf,MAAME,EAAe,iwLACrB,MAAAC,EAAeD,E,MCeFE,EAAS,M,yBAwCZC,KAAAC,YAAeC,IACrB,GAAIF,KAAKG,MAAQ,SAAU,CAEzB,GAAIZ,EAAaS,KAAKR,IAAK,CACzB,MAAMY,EAAOJ,KAAKR,GAAGa,QAAQ,QAC7B,GAAID,EAAM,CACRF,EAAGI,iBAEH,MAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOH,KAAKG,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1F,UAAAC,GACN,MAAMA,EAAa,CAAC,cAEpB,GAAIf,KAAKgB,QAAS,CAChBD,EAAWE,KAAK,eAAiBjB,KAAKgB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYtB,KAAKuB,SAAW,OAAS,KACxCC,GAAIxB,KAAKyB,YACTC,QAAS1B,KAAKC,YACde,QAAShB,KAAKgB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO3B,KAAKe,aACZQ,SAAUvB,KAAKuB,SACfK,KAAM5B,KAAK4B,KACXC,KAAK,SACL1B,KAAMH,KAAKG,KACX2B,MAAO9B,KAAK8B,OAEX9B,KAAK+B,MAAQ/B,KAAKgB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM5B,KAAK+B,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCtB,KAAKgB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,EAAWH,KAAK,W","ignoreList":[]}
@@ -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-35d6c787",[[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
@@ -2601,7 +2601,7 @@ const hasShadowDom = (el) => {
2601
2601
  const baseCss$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}";
2602
2602
  var PdsButtonStyle0 = baseCss$l;
2603
2603
 
2604
- const pdsButtonCss = ":host{--border-radius-default:var(--pine-border-radius-round);--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-grey-900);--color-background-primary-disabled:var(--pine-color-grey-300);--color-background-primary-hover:var(--pine-color-grey-950);--color-text-primary-default:var(--pine-color-white);--color-text-primary-disabled:var(--pine-color-grey-600);--color-outline-primary:var(--pine-color-blue-200);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-grey-900);--color-text-secondary-disabled:var(--pine-color-grey-600);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-purple-500);--color-background-accent-disabled:var(--pine-color-purple-150);--color-background-accent-hover:var(--pine-color-purple-600);--color-text-accent-default:var(--pine-color-white);--color-text-accent-disabled:var(--pine-color-purple-300);--color-outline-accent:var(--pine-color-purple-300);--color-background-destructive-default:var(--pine-color-red-300);--color-background-destructive-disabled:var(--pine-color-red-100);--color-background-destructive-hover:var(--pine-color-red-400);--color-text-destructive-default:var(--pine-color-white);--color-text-destructive-disabled:var(--pine-color-red-200);--color-outline-destructive:var(--pine-color-red-200);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-125);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{color:currentColor;fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--destructive:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";
2604
+ const pdsButtonCss = ":host{--border-radius-default:var(--pine-border-radius-round);--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-grey-900);--color-background-primary-disabled:var(--pine-color-grey-300);--color-background-primary-hover:var(--pine-color-grey-950);--color-text-primary-default:var(--pine-color-white);--color-text-primary-disabled:var(--pine-color-grey-600);--color-outline-primary:var(--pine-color-blue-200);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-grey-900);--color-text-secondary-disabled:var(--pine-color-grey-600);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-purple-500);--color-background-accent-disabled:var(--pine-color-purple-150);--color-background-accent-hover:var(--pine-color-purple-600);--color-text-accent-default:var(--pine-color-white);--color-text-accent-disabled:var(--pine-color-purple-300);--color-outline-accent:var(--pine-color-purple-300);--color-background-destructive-default:var(--pine-color-red-300);--color-background-destructive-disabled:var(--pine-color-red-100);--color-background-destructive-hover:var(--pine-color-red-400);--color-text-destructive-default:var(--pine-color-white);--color-text-destructive-disabled:var(--pine-color-red-200);--color-outline-destructive:var(--pine-color-red-200);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-125);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{color:currentColor;fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--destructive:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";
2605
2605
  var PdsButtonStyle1 = pdsButtonCss;
2606
2606
 
2607
2607
  /**
@@ -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 {