@pine-ds/core 2.0.0 → 2.1.0

package/dist/esm-es5/pds-table.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["baseCss","PdsTableStyle0","pdsTableCss","PdsTableStyle1","PdsTable","class_1","prototype","componentWillLoad","this","sortingColumn","classNames","compact","push","responsive","join","sortTable","column","direction","tableBody","el","querySelector","tableRows","Array","from","querySelectorAll","columnHeaderCells","columnHeaderCell","find","cell","innerText","trim","console","warn","concat","columnIndex","indexOf","sort","a","b","valueA","textContent","valueB","localeCompare","innerHTML","forEach","row","appendChild","handleTableSort","event","detail","sortingDirection","handleTableSelectAll","defaultPrevented","pdsTableBody","isSelected","handleTableSelect","allTableRows","allSelectedRows","every","noneSelectedRows","pdsTableHead","headerCheckbox","shadowRoot","checked","indeterminate","render","h","Host","key","class","id","componentId","role","selectable","tabindex"],"sources":["src/global/styles/base.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.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  --color-background-default: var(--pine-color-white);\n\n  background: var(--color-background-default);\n  border-collapse: separate;\n  box-sizing: border-box;\n  display: table;\n  width: 100%;\n}\n\n:host(:focus-visible) {\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\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:host(.is-responsive) {\n  background-attachment: local, local, scroll, scroll;\n  background-image: linear-gradient(to right, var(--color-background-default), var(--color-background-default)),\n                    linear-gradient(to right, var(--color-background-default), var(--color-background-default)),\n                    linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),\n                    linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));\n  background-position: left center, right center, left center, right center;\n  background-repeat: no-repeat;\n  background-size: 4px 100%, 4px 100%, 4px 100%, 4px 100%;\n  display: block;\n  margin: 0 auto;\n  max-width: fit-content;\n  overflow-x: auto;\n  white-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrls: ['../../global/styles/base.scss', 'pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n\n  /**\n   * Determines if table displays compact which reduces the spacing of table cells.\n   */\n  @Prop() compact: boolean;\n\n  /**\n   * A unique identifier used for the table `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enables the table to be responsive by horizontally scrolling on smaller screens.\n   */\n  @Prop() responsive: boolean;\n\n  /**\n   * Determines if table displays fixed column which fixes the first column of the table.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  @State() sortingColumn: string | null = null;\n  @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n   */\n  @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  componentWillLoad() {\n    this.sortingColumn = null;\n  }\n\n  private classNames() {\n    const classNames = ['pds-table'];\n\n    if (this.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.responsive) {\n      classNames.push('is-responsive');\n    }\n\n    return classNames.join('  ');\n  }\n\n  private sortTable(column: string, direction: 'asc' | 'desc') {\n    const tableBody = this.el.querySelector('pds-table-body');\n\n    // Get the rows in the table body\n    const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n    // Find the column index based on the column name\n    const columnHeaderCells: HTMLElement[] = Array.from(\n      this.el.querySelectorAll('pds-table-head-cell[sortable]')\n    );\n\n    const columnHeaderCell = columnHeaderCells.find(\n      (cell) => cell.innerText.trim() === column\n    );\n\n    if (!columnHeaderCell) {\n      console.warn(`Column \"${column}\" not found.`);\n      return;\n    }\n\n    const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n    // Sort the rows based on the content of the specified column\n    tableRows.sort((a, b) => {\n      const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n      const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n      if (direction === 'asc') {\n        return valueA.localeCompare(valueB);\n      } else {\n        return valueB.localeCompare(valueA);\n      }\n    });\n\n    // Clear and append the sorted rows back to the table body\n    tableBody.innerHTML = '';\n    tableRows.forEach((row) => {\n      tableBody.appendChild(row);\n    });\n  }\n\n  @Listen('pdsTableSort')\n  handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n    const { direction } = event.detail;\n    this.sortTable(event.detail.column, direction);\n    this.sortingColumn = event.detail.column;\n    this.sortingDirection = direction;\n  }\n\n  @Listen('pdsTableSelectAll')\n  handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const pdsTableBody = this.el.querySelector('pds-table-body');\n    const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n    tableRows.forEach((row) => {\n      row.isSelected = event.detail.isSelected;\n    });\n  }\n\n  @Listen('pdsTableRowSelected')\n  async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const allTableRows = this.el.querySelectorAll('pds-table-row');\n    const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n    const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n    const pdsTableHead = this.el.querySelector('pds-table-head');\n    if (!pdsTableHead) return;\n\n    const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n    headerCheckbox.checked = allSelectedRows;\n    headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6IAAA,IAAMA,QAAU,s1DAChB,IAAAC,eAAeD,QCDf,IAAME,YAAc,qiDACpB,IAAAC,eAAeD,Y,ICMFE,SAAQ,W,mTA4BqB,K,sBACI,K,CAa5CC,EAAAC,UAAAC,kBAAA,WACEC,KAAKC,cAAgB,I,EAGfJ,EAAAC,UAAAI,WAAA,WACN,IAAMA,EAAa,CAAC,aAEpB,GAAIF,KAAKG,QAAS,CAChBD,EAAWE,KAAK,a,CAGlB,GAAIJ,KAAKK,WAAY,CACnBH,EAAWE,KAAK,gB,CAGlB,OAAOF,EAAWI,KAAK,K,EAGjBT,EAAAC,UAAAS,UAAA,SAAUC,EAAgBC,GAChC,IAAMC,EAAYV,KAAKW,GAAGC,cAAc,kBAGxC,IAAMC,EAAYC,MAAMC,KAAKL,EAAUM,iBAAiB,kBAGxD,IAAMC,EAAmCH,MAAMC,KAC7Cf,KAAKW,GAAGK,iBAAiB,kCAG3B,IAAME,EAAmBD,EAAkBE,MACzC,SAACC,GAAS,OAAAA,EAAKC,UAAUC,SAAWd,CAA1B,IAGZ,IAAKU,EAAkB,CACrBK,QAAQC,KAAK,WAAAC,OAAWjB,EAAM,iBAC9B,M,CAGF,IAAMkB,EAAcT,EAAkBU,QAAQT,GAG9CL,EAAUe,MAAK,SAACC,EAAGC,GACjB,IAAMC,EAASF,EAAEjB,cAAc,4BAAAa,OAA4BC,EAAc,EAAC,MAAKM,YAAYV,OAC3F,IAAMW,EAASH,EAAElB,cAAc,4BAAAa,OAA4BC,EAAc,EAAC,MAAKM,YAAYV,OAE3F,GAAIb,IAAc,MAAO,CACvB,OAAOsB,EAAOG,cAAcD,E,KACvB,CACL,OAAOA,EAAOC,cAAcH,E,KAKhCrB,EAAUyB,UAAY,GACtBtB,EAAUuB,SAAQ,SAACC,GACjB3B,EAAU4B,YAAYD,E,KAK1BxC,EAAAC,UAAAyC,gBAAA,SAAgBC,GACN,IAAA/B,EAAc+B,EAAMC,OAAMhC,UAClCT,KAAKO,UAAUiC,EAAMC,OAAOjC,OAAQC,GACpCT,KAAKC,cAAgBuC,EAAMC,OAAOjC,OAClCR,KAAK0C,iBAAmBjC,C,EAI1BZ,EAAAC,UAAA6C,qBAAA,SAAqBH,GACnB,GAAIA,EAAMI,iBAAkB,OAE5B,IAAMC,EAAe7C,KAAKW,GAAGC,cAAc,kBAC3C,IAAMC,EAAYC,MAAMC,KAAK8B,EAAa7B,iBAAiB,kBAE3DH,EAAUuB,SAAQ,SAACC,GACjBA,EAAIS,WAAaN,EAAMC,OAAOK,U,KAK5BjD,EAAAC,UAAAiD,kBAAN,SAAwBP,G,mGACtB,GAAIA,EAAMI,iBAAkB,UAEtBI,EAAehD,KAAKW,GAAGK,iBAAiB,iBACxCiC,EAAkBnC,MAAMC,KAAKiC,GAAcE,OAAM,SAACb,GAAQ,OAAAA,EAAIS,UAAJ,IAC1DK,EAAmBrC,MAAMC,KAAKiC,GAAcE,OAAM,SAACb,GAAQ,OAACA,EAAIS,UAAL,IAC3DM,EAAepD,KAAKW,GAAGC,cAAc,kBAC3C,IAAKwC,EAAc,UAEbC,EAAiBD,EAAaE,WAAW1C,cAAc,gBAC7DyC,EAAeE,QAAUN,EACzBI,EAAeG,eAAiBP,IAAoBE,E,iBAGtDtD,EAAAC,UAAA2D,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CACHC,MAAO7D,KAAKE,aACZ4D,GAAI9D,KAAK+D,YACTC,KAAK,OACLC,WAAYjE,KAAKiE,WACjBC,SAAS,KAETR,EAAA,QAAAE,IAAA,6C,gIAjJa,G","ignoreList":[]}
+{"version":3,"names":["baseCss","PdsTableStyle0","pdsTableCss","PdsTableStyle1","PdsTable","class_1","prototype","componentWillLoad","this","sortingColumn","classNames","compact","push","responsive","join","sortTable","column","direction","tableBody","el","querySelector","tableRows","Array","from","querySelectorAll","columnHeaderCells","columnHeaderCell","find","cell","innerText","trim","console","warn","concat","columnIndex","indexOf","sort","a","b","valueA","textContent","valueB","localeCompare","innerHTML","forEach","row","appendChild","handleTableSort","event","detail","sortingDirection","handleTableSelectAll","defaultPrevented","pdsTableBody","isSelected","handleTableSelect","allTableRows","allSelectedRows","every","noneSelectedRows","pdsTableHead","headerCheckbox","shadowRoot","checked","indeterminate","render","h","Host","key","class","id","componentId","role","selectable","tabindex"],"sources":["src/global/styles/base.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.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: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\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(div, label, p, span) {\n  color: var(--pine-color-text-default);\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  --color-background-default: var(--pine-color-white);\n\n  background: var(--color-background-default);\n  border-collapse: separate;\n  box-sizing: border-box;\n  display: table;\n  width: 100%;\n}\n\n:host(:focus-visible) {\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\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:host(.is-responsive) {\n  background-attachment: local, local, scroll, scroll;\n  background-image: linear-gradient(to right, var(--color-background-default), var(--color-background-default)),\n                    linear-gradient(to right, var(--color-background-default), var(--color-background-default)),\n                    linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),\n                    linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));\n  background-position: left center, right center, left center, right center;\n  background-repeat: no-repeat;\n  background-size: 4px 100%, 4px 100%, 4px 100%, 4px 100%;\n  display: block;\n  margin: 0 auto;\n  max-width: fit-content;\n  overflow-x: auto;\n  white-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrls: ['../../global/styles/base.scss', 'pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n\n  /**\n   * Determines if table displays compact which reduces the spacing of table cells.\n   */\n  @Prop() compact: boolean;\n\n  /**\n   * A unique identifier used for the table `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enables the table to be responsive by horizontally scrolling on smaller screens.\n   */\n  @Prop() responsive: boolean;\n\n  /**\n   * Determines if table displays fixed column which fixes the first column of the table.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  @State() sortingColumn: string | null = null;\n  @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n   */\n  @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  componentWillLoad() {\n    this.sortingColumn = null;\n  }\n\n  private classNames() {\n    const classNames = ['pds-table'];\n\n    if (this.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.responsive) {\n      classNames.push('is-responsive');\n    }\n\n    return classNames.join('  ');\n  }\n\n  private sortTable(column: string, direction: 'asc' | 'desc') {\n    const tableBody = this.el.querySelector('pds-table-body');\n\n    // Get the rows in the table body\n    const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n    // Find the column index based on the column name\n    const columnHeaderCells: HTMLElement[] = Array.from(\n      this.el.querySelectorAll('pds-table-head-cell[sortable]')\n    );\n\n    const columnHeaderCell = columnHeaderCells.find(\n      (cell) => cell.innerText.trim() === column\n    );\n\n    if (!columnHeaderCell) {\n      console.warn(`Column \"${column}\" not found.`);\n      return;\n    }\n\n    const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n    // Sort the rows based on the content of the specified column\n    tableRows.sort((a, b) => {\n      const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n      const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n      if (direction === 'asc') {\n        return valueA.localeCompare(valueB);\n      } else {\n        return valueB.localeCompare(valueA);\n      }\n    });\n\n    // Clear and append the sorted rows back to the table body\n    tableBody.innerHTML = '';\n    tableRows.forEach((row) => {\n      tableBody.appendChild(row);\n    });\n  }\n\n  @Listen('pdsTableSort')\n  handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n    const { direction } = event.detail;\n    this.sortTable(event.detail.column, direction);\n    this.sortingColumn = event.detail.column;\n    this.sortingDirection = direction;\n  }\n\n  @Listen('pdsTableSelectAll')\n  handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const pdsTableBody = this.el.querySelector('pds-table-body');\n    const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n    tableRows.forEach((row) => {\n      row.isSelected = event.detail.isSelected;\n    });\n  }\n\n  @Listen('pdsTableRowSelected')\n  async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const allTableRows = this.el.querySelectorAll('pds-table-row');\n    const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n    const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n    const pdsTableHead = this.el.querySelector('pds-table-head');\n    if (!pdsTableHead) return;\n\n    const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n    headerCheckbox.checked = allSelectedRows;\n    headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6IAAA,IAAMA,QAAU,yrDAChB,IAAAC,eAAeD,QCDf,IAAME,YAAc,qiDACpB,IAAAC,eAAeD,Y,ICMFE,SAAQ,W,mTA4BqB,K,sBACI,K,CAa5CC,EAAAC,UAAAC,kBAAA,WACEC,KAAKC,cAAgB,I,EAGfJ,EAAAC,UAAAI,WAAA,WACN,IAAMA,EAAa,CAAC,aAEpB,GAAIF,KAAKG,QAAS,CAChBD,EAAWE,KAAK,a,CAGlB,GAAIJ,KAAKK,WAAY,CACnBH,EAAWE,KAAK,gB,CAGlB,OAAOF,EAAWI,KAAK,K,EAGjBT,EAAAC,UAAAS,UAAA,SAAUC,EAAgBC,GAChC,IAAMC,EAAYV,KAAKW,GAAGC,cAAc,kBAGxC,IAAMC,EAAYC,MAAMC,KAAKL,EAAUM,iBAAiB,kBAGxD,IAAMC,EAAmCH,MAAMC,KAC7Cf,KAAKW,GAAGK,iBAAiB,kCAG3B,IAAME,EAAmBD,EAAkBE,MACzC,SAACC,GAAS,OAAAA,EAAKC,UAAUC,SAAWd,CAA1B,IAGZ,IAAKU,EAAkB,CACrBK,QAAQC,KAAK,WAAAC,OAAWjB,EAAM,iBAC9B,M,CAGF,IAAMkB,EAAcT,EAAkBU,QAAQT,GAG9CL,EAAUe,MAAK,SAACC,EAAGC,GACjB,IAAMC,EAASF,EAAEjB,cAAc,4BAAAa,OAA4BC,EAAc,EAAC,MAAKM,YAAYV,OAC3F,IAAMW,EAASH,EAAElB,cAAc,4BAAAa,OAA4BC,EAAc,EAAC,MAAKM,YAAYV,OAE3F,GAAIb,IAAc,MAAO,CACvB,OAAOsB,EAAOG,cAAcD,E,KACvB,CACL,OAAOA,EAAOC,cAAcH,E,KAKhCrB,EAAUyB,UAAY,GACtBtB,EAAUuB,SAAQ,SAACC,GACjB3B,EAAU4B,YAAYD,E,KAK1BxC,EAAAC,UAAAyC,gBAAA,SAAgBC,GACN,IAAA/B,EAAc+B,EAAMC,OAAMhC,UAClCT,KAAKO,UAAUiC,EAAMC,OAAOjC,OAAQC,GACpCT,KAAKC,cAAgBuC,EAAMC,OAAOjC,OAClCR,KAAK0C,iBAAmBjC,C,EAI1BZ,EAAAC,UAAA6C,qBAAA,SAAqBH,GACnB,GAAIA,EAAMI,iBAAkB,OAE5B,IAAMC,EAAe7C,KAAKW,GAAGC,cAAc,kBAC3C,IAAMC,EAAYC,MAAMC,KAAK8B,EAAa7B,iBAAiB,kBAE3DH,EAAUuB,SAAQ,SAACC,GACjBA,EAAIS,WAAaN,EAAMC,OAAOK,U,KAK5BjD,EAAAC,UAAAiD,kBAAN,SAAwBP,G,mGACtB,GAAIA,EAAMI,iBAAkB,UAEtBI,EAAehD,KAAKW,GAAGK,iBAAiB,iBACxCiC,EAAkBnC,MAAMC,KAAKiC,GAAcE,OAAM,SAACb,GAAQ,OAAAA,EAAIS,UAAJ,IAC1DK,EAAmBrC,MAAMC,KAAKiC,GAAcE,OAAM,SAACb,GAAQ,OAACA,EAAIS,UAAL,IAC3DM,EAAepD,KAAKW,GAAGC,cAAc,kBAC3C,IAAKwC,EAAc,UAEbC,EAAiBD,EAAaE,WAAW1C,cAAc,gBAC7DyC,EAAeE,QAAUN,EACzBI,EAAeG,eAAiBP,IAAoBE,E,iBAGtDtD,EAAAC,UAAA2D,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CACHC,MAAO7D,KAAKE,aACZ4D,GAAI9D,KAAK+D,YACTC,KAAK,OACLC,WAAYjE,KAAKiE,WACjBC,SAAS,KAETR,EAAA,QAAAE,IAAA,6C,gIAjJa,G","ignoreList":[]}

package/dist/esm-es5/pds-tabs.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-94bbabb0.js";var baseCss=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var PdsTabsStyle0=baseCss;var pdsTabsCss=":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";var PdsTabsStyle1=pdsTabsCss;var PdsTabs=function(){function e(e){registerInstance(this,e);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}e.prototype.tabClickHandler=function(e){if(this.componentId===e.detail[1]){this.activeTabIndex=e.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}};e.prototype.handleKeyDown=function(e){var t=["ArrowLeft","ArrowRight","Home","End"];if(t.includes(e.key)){e.preventDefault();this.moveActiveTab(e.key)}};e.prototype.moveActiveTab=function(e){var t=0;var a=this.tabs.length-1;var i=null;switch(e){case"ArrowLeft":i=this.activeTabIndex===t?a:this.activeTabIndex+-1;break;case"ArrowRight":i=this.activeTabIndex===a?t:this.activeTabIndex+1;break;case"Home":i=t;break;case"End":i=a;break}this.tabs[i].children[0].focus();this.activeTabName=this.tabs[i].name;this.activeTabIndex=i};e.prototype.findAllChildren=function(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")};e.prototype.propGeneration=function(e,t){if(t===void 0){t=0}e.parentComponentId=this.componentId.toString();e.variant=this.variant.toString();e.selected=this.activeTabName===e.name?true:false;e["index"]=t};e.prototype.passPropsToChildren=function(){var e=this;this.tabs.forEach((function(t,a){if(e.activeTabName===t.name)e.activeTabIndex=a;e.propGeneration(t,a)}));this.tabPanels.forEach((function(t){e.propGeneration(t)}))};e.prototype.classNames=function(){var e="pds-tabs";if(this.variant&&this.variant!="primary"){var t="pds-tabs--".concat(this.variant);e+=" "+t}return e};e.prototype.componentWillLoad=function(){this.findAllChildren()};e.prototype.componentWillRender=function(){this.passPropsToChildren()};e.prototype.render=function(){return h(Host,{key:"590f66c80be5b92b015e6499ee60bef965bbaa1e","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},h("div",{key:"7251690cd8b8ac1425763212883c98826d15fed1",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel},h("slot",{key:"d07a6f7b621309db9cd7169184c8e7ae0b3b981f",name:"tabs"})),h("slot",{key:"dcc5b2ea9bdf45f33d3cb2b0a75fa4a2885ec00b",name:"tabpanels"}))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTabs.style=PdsTabsStyle0+PdsTabsStyle1;export{PdsTabs as pds_tabs};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-94bbabb0.js";var baseCss=":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}: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(div,label,p,span){color:var(--pine-color-text-default)}: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 PdsTabsStyle0=baseCss;var pdsTabsCss=":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";var PdsTabsStyle1=pdsTabsCss;var PdsTabs=function(){function e(e){registerInstance(this,e);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}e.prototype.tabClickHandler=function(e){if(this.componentId===e.detail[1]){this.activeTabIndex=e.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}};e.prototype.handleKeyDown=function(e){var t=["ArrowLeft","ArrowRight","Home","End"];if(t.includes(e.key)){e.preventDefault();this.moveActiveTab(e.key)}};e.prototype.moveActiveTab=function(e){var t=0;var a=this.tabs.length-1;var i=null;switch(e){case"ArrowLeft":i=this.activeTabIndex===t?a:this.activeTabIndex+-1;break;case"ArrowRight":i=this.activeTabIndex===a?t:this.activeTabIndex+1;break;case"Home":i=t;break;case"End":i=a;break}this.tabs[i].children[0].focus();this.activeTabName=this.tabs[i].name;this.activeTabIndex=i};e.prototype.findAllChildren=function(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")};e.prototype.propGeneration=function(e,t){if(t===void 0){t=0}e.parentComponentId=this.componentId.toString();e.variant=this.variant.toString();e.selected=this.activeTabName===e.name?true:false;e["index"]=t};e.prototype.passPropsToChildren=function(){var e=this;this.tabs.forEach((function(t,a){if(e.activeTabName===t.name)e.activeTabIndex=a;e.propGeneration(t,a)}));this.tabPanels.forEach((function(t){e.propGeneration(t)}))};e.prototype.classNames=function(){var e="pds-tabs";if(this.variant&&this.variant!="primary"){var t="pds-tabs--".concat(this.variant);e+=" "+t}return e};e.prototype.componentWillLoad=function(){this.findAllChildren()};e.prototype.componentWillRender=function(){this.passPropsToChildren()};e.prototype.render=function(){return h(Host,{key:"590f66c80be5b92b015e6499ee60bef965bbaa1e","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},h("div",{key:"7251690cd8b8ac1425763212883c98826d15fed1",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel},h("slot",{key:"d07a6f7b621309db9cd7169184c8e7ae0b3b981f",name:"tabs"})),h("slot",{key:"dcc5b2ea9bdf45f33d3cb2b0a75fa4a2885ec00b",name:"tabpanels"}))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTabs.style=PdsTabsStyle0+PdsTabsStyle1;export{PdsTabs as pds_tabs};
 //# sourceMappingURL=pds-tabs.entry.js.map

package/dist/esm-es5/pds-tabs.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["baseCss","PdsTabsStyle0","pdsTabsCss","PdsTabsStyle1","PdsTabs","prototype","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","_this","forEach","classNames","className","variantClassName","concat","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/global/styles/base.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.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  /**\n   * @prop --spacing-panel-margin-top: Optional margin-top for panels\n   */\n  --spacing-panel-margin-top: 0;\n  /**\n   * @prop --spacing-panel-padding: Optional padding for panels\n   */\n  --spacing-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-blue-200);\n\n  --spacing-gap-availability: var(--pine-spacing-100);\n  --spacing-gap-default: var(--pine-spacing-300);\n  --spacing-gap-filter: var(--pine-spacing-200);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-gap-default);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--spacing-gap-availability);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--spacing-gap-filter);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrls: ['../../global/styles/base.scss', 'pds-tabs.scss'],\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"mFAAA,IAAMA,QAAU,s1DAChB,IAAAC,cAAeD,QCDf,IAAME,WAAa,giBACnB,IAAAC,cAAeD,W,ICUFE,QAAO,W,gLAmClBA,EAAAC,UAAAC,gBAAA,SAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,GAKxDV,EAAAC,UAAAU,cAAA,SAAcC,GACZ,IAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,GAIlBf,EAAAC,UAAAgB,cAAA,SAAcF,GACpB,IAAMG,EAAiB,EACvB,IAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,EAGhBrB,EAAAC,UAAAuB,gBAAA,WACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,EAGpC1B,EAAAC,UAAA2B,eAAA,SAAeC,EAAOC,GAAA,GAAAA,SAAA,GAAAA,EAAA,CAAS,CACrCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,EAGX9B,EAAAC,UAAAkC,oBAAA,eAAAC,EAAAhC,KACNA,KAAKK,KAAK4B,SAAQ,SAACR,EAAOC,GACxB,GAAIM,EAAK5B,gBAAkBqB,EAAMnB,KAAM0B,EAAK7B,eAAiBuB,EAC7DM,EAAKR,eAAeC,EAAOC,E,IAG7B1B,KAAKuB,UAAUU,SAAQ,SAACR,GACtBO,EAAKR,eAAeC,E,KAIhB7B,EAAAC,UAAAqC,WAAA,WACN,IAAIC,EAAY,WAChB,GAAInC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,IAAMO,EAAmB,aAAAC,OAAarC,KAAK6B,SAC3CM,GAAa,IAAMC,C,CAGrB,OAAOD,C,EAGTvC,EAAAC,UAAAyC,kBAAA,WACEtC,KAAKoB,iB,EAGPxB,EAAAC,UAAA0C,oBAAA,WACEvC,KAAK+B,qB,EAGPnC,EAAAC,UAAA2C,OAAA,WACE,OACEC,EAACC,KAAI,CAAA/B,IAAA,6DAAkBX,KAAKI,cAAeuC,MAAO3C,KAAKkC,aAAcU,GAAI5C,KAAKC,aAC5EwC,EAAA,OAAA9B,IAAA,2CAAKgC,MAAM,oBAAoBE,KAAK,UAAS,aAAa7C,KAAK8C,cAC7DL,EAAA,QAAA9B,IAAA,2CAAML,KAAK,UAEbmC,EAAA,QAAA9B,IAAA,2CAAML,KAAK,c,gIA9HC,G","ignoreList":[]}
+{"version":3,"names":["baseCss","PdsTabsStyle0","pdsTabsCss","PdsTabsStyle1","PdsTabs","prototype","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","_this","forEach","classNames","className","variantClassName","concat","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/global/styles/base.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.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: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\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(div, label, p, span) {\n  color: var(--pine-color-text-default);\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  /**\n   * @prop --spacing-panel-margin-top: Optional margin-top for panels\n   */\n  --spacing-panel-margin-top: 0;\n  /**\n   * @prop --spacing-panel-padding: Optional padding for panels\n   */\n  --spacing-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-blue-200);\n\n  --spacing-gap-availability: var(--pine-spacing-100);\n  --spacing-gap-default: var(--pine-spacing-300);\n  --spacing-gap-filter: var(--pine-spacing-200);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-gap-default);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--spacing-gap-availability);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--spacing-gap-filter);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrls: ['../../global/styles/base.scss', 'pds-tabs.scss'],\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"mFAAA,IAAMA,QAAU,yrDAChB,IAAAC,cAAeD,QCDf,IAAME,WAAa,giBACnB,IAAAC,cAAeD,W,ICUFE,QAAO,W,gLAmClBA,EAAAC,UAAAC,gBAAA,SAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,GAKxDV,EAAAC,UAAAU,cAAA,SAAcC,GACZ,IAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,GAIlBf,EAAAC,UAAAgB,cAAA,SAAcF,GACpB,IAAMG,EAAiB,EACvB,IAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,EAGhBrB,EAAAC,UAAAuB,gBAAA,WACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,EAGpC1B,EAAAC,UAAA2B,eAAA,SAAeC,EAAOC,GAAA,GAAAA,SAAA,GAAAA,EAAA,CAAS,CACrCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,EAGX9B,EAAAC,UAAAkC,oBAAA,eAAAC,EAAAhC,KACNA,KAAKK,KAAK4B,SAAQ,SAACR,EAAOC,GACxB,GAAIM,EAAK5B,gBAAkBqB,EAAMnB,KAAM0B,EAAK7B,eAAiBuB,EAC7DM,EAAKR,eAAeC,EAAOC,E,IAG7B1B,KAAKuB,UAAUU,SAAQ,SAACR,GACtBO,EAAKR,eAAeC,E,KAIhB7B,EAAAC,UAAAqC,WAAA,WACN,IAAIC,EAAY,WAChB,GAAInC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,IAAMO,EAAmB,aAAAC,OAAarC,KAAK6B,SAC3CM,GAAa,IAAMC,C,CAGrB,OAAOD,C,EAGTvC,EAAAC,UAAAyC,kBAAA,WACEtC,KAAKoB,iB,EAGPxB,EAAAC,UAAA0C,oBAAA,WACEvC,KAAK+B,qB,EAGPnC,EAAAC,UAAA2C,OAAA,WACE,OACEC,EAACC,KAAI,CAAA/B,IAAA,6DAAkBX,KAAKI,cAAeuC,MAAO3C,KAAKkC,aAAcU,GAAI5C,KAAKC,aAC5EwC,EAAA,OAAA9B,IAAA,2CAAKgC,MAAM,oBAAoBE,KAAK,UAAS,aAAa7C,KAAK8C,cAC7DL,EAAA,QAAA9B,IAAA,2CAAML,KAAK,UAEbmC,EAAA,QAAA9B,IAAA,2CAAML,KAAK,c,gIA9HC,G","ignoreList":[]}

package/dist/esm-es5/pds-textarea.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-94bbabb0.js";import{i as isRequired,P as PdsLabel,a as assignDescription,m as messageId}from"./pds-label-d28da6eb.js";var baseCss=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var PdsTextareaStyle0=baseCss;var pdsTextareaCss=":host{--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);--color:var(--pine-color-grey-900);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-focus-visible:var(--pine-color-grey-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-default:var(--pine-color-grey-700);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-purple-300);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-grey-700);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-field:var(--pine-font-weight-normal);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-field:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-label:var(--pine-line-height-150);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background);border:1px solid var(--color-border-default);border-radius:var(--pine-border-radius-100);font-family:inherit;font-size:var(--font-size-field);font-weight:var(--font-weight-field);line-height:var(--line-height-field);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--color-border-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-error-default)}";var PdsTextareaStyle1=pdsTextareaCss;var PdsTextarea=function(){function e(e){var r=this;registerInstance(this,e);this.pdsTextareaChange=createEvent(this,"pdsTextareaChange",7);this.onTextareaChange=function(e){var a=e.target;isRequired(a,r);if(a){r.value=a.innerHTML}r.pdsTextareaChange.emit({value:r.value,event:e})};this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value=undefined}e.prototype.textareaClassNames=function(){var e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"178de49f01c711145054009b42828b846b7670b9","aria-disabled":this.disabled?"true":null},h("div",{key:"b62cfd1551b4923990b2b806a9ad07755b82a2a4",class:"pds-textarea"},this.label&&h(PdsLabel,{key:"3a5990ac49ad3367d3f59dd8ff6e986920ccccc5",htmlFor:this.componentId,text:this.label}),h("textarea",{key:"e27ff5eb4350be9a1c2351ccda578588241e85d7","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onChange:this.onTextareaChange},this.value),this.helperMessage&&h("p",{key:"71e4839681208e2a11e79d0a9e3d1542da566dcf",class:"pds-textarea__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage),this.invalid&&h("p",{key:"64de96c3dcf76d0e1d888f9e88f4bec66138010d","aria-live":"assertive",class:"pds-textarea__error-message",id:messageId(this.componentId,"error")},this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTextarea.style=PdsTextareaStyle0+PdsTextareaStyle1;export{PdsTextarea as pds_textarea};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-94bbabb0.js";import{i as isRequired,P as PdsLabel,a as assignDescription,m as messageId}from"./pds-label-d28da6eb.js";var baseCss=":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}: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(div,label,p,span){color:var(--pine-color-text-default)}: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 PdsTextareaStyle0=baseCss;var pdsTextareaCss=":host{--border-interactive-default:var(--pine-border-interactive-default);--border-interactive-hover:var(--pine-border-interactive-hover);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);--color-background-default:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-100);--color-background-hover:var(--pine-color-grey-050);--color-background-error-default:var(--pine-color-red-050);--color-border-error-default:var(--pine-color-red-600);--color-border-focus-visible:var(--pine-color-grey-400);--color-border-hover:var(--pine-color-grey-400);--color-focus-visible-outline:var(--pine-color-purple-300);--color-focus-visible-outline-error:var(--pine-color-red-300);--color-text-disabled-default:var(--pine-color-grey-400);--color-text-message-error-default:var(--pine-color-red-600);--color-text-placeholder-default:var(--pine-color-grey-600);--color-text-placeholder-disabled:var(--pine-color-grey-400);--font-weight-label-default:var(--pine-font-weight-body-medium);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);--typography-message-default:var(--pine-typography-body-sm-default);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-weight:var(--font-weight-label-default);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background-default);border:var(--border-interactive-default);border-radius:var(--pine-border-radius-100);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--border-interactive-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-text-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error-default)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font:var(--typography-message-default);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-text-message-error-default)}";var PdsTextareaStyle1=pdsTextareaCss;var PdsTextarea=function(){function e(e){var r=this;registerInstance(this,e);this.pdsTextareaChange=createEvent(this,"pdsTextareaChange",7);this.onTextareaChange=function(e){var a=e.target;isRequired(a,r);if(a){r.value=a.innerHTML}r.pdsTextareaChange.emit({value:r.value,event:e})};this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value=undefined}e.prototype.textareaClassNames=function(){var e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"178de49f01c711145054009b42828b846b7670b9","aria-disabled":this.disabled?"true":null},h("div",{key:"b62cfd1551b4923990b2b806a9ad07755b82a2a4",class:"pds-textarea"},this.label&&h(PdsLabel,{key:"3a5990ac49ad3367d3f59dd8ff6e986920ccccc5",htmlFor:this.componentId,text:this.label}),h("textarea",{key:"e27ff5eb4350be9a1c2351ccda578588241e85d7","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onChange:this.onTextareaChange},this.value),this.helperMessage&&h("p",{key:"71e4839681208e2a11e79d0a9e3d1542da566dcf",class:"pds-textarea__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage),this.invalid&&h("p",{key:"64de96c3dcf76d0e1d888f9e88f4bec66138010d","aria-live":"assertive",class:"pds-textarea__error-message",id:messageId(this.componentId,"error")},this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTextarea.style=PdsTextareaStyle0+PdsTextareaStyle1;export{PdsTextarea as pds_textarea};
 //# sourceMappingURL=pds-textarea.entry.js.map

package/dist/esm-es5/pds-textarea.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["baseCss","PdsTextareaStyle0","pdsTextareaCss","PdsTextareaStyle1","PdsTextarea","this","onTextareaChange","ev","textarea","target","isRequired","_this","value","innerHTML","pdsTextareaChange","emit","event","componentId","prototype","textareaClassNames","classNames","invalid","push","join","render","h","Host","key","disabled","class","label","PdsLabel","htmlFor","text","assignDescription","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","rows","onChange","messageId","errorMessage"],"sources":["src/global/styles/base.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.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-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);\n\n  --color: var(--pine-color-grey-900);\n  --color-background: var(--pine-color-white);\n  --color-background-disabled: var(--pine-color-grey-200);\n  --color-border-default: var(--pine-color-grey-400);\n  --color-border-error: var(--pine-color-red-300);\n  --color-border-focus-visible: var(--pine-color-grey-300);\n  --color-border-hover: var(--pine-color-grey-500);\n  --color-disabled-default: var(--pine-color-grey-700);\n  --color-error-default: var(--pine-color-red-300);\n  --color-focus-visible-outline: var(--pine-color-purple-300);\n  --color-focus-visible-outline-error: var(--pine-color-red-200);\n  --color-placeholder-default: var(--pine-color-grey-700);\n\n  --font-size-field: var(--pine-font-size-100);\n  --font-size-helper-message: var(--pine-font-size-100);\n  --font-size-label: var(--pine-font-size-100);\n  --font-weight-field: var(--pine-font-weight-normal);\n  --font-weight-helper-message: var(--pine-font-weight-normal);\n  --font-weight-label: var(--pine-font-weight-medium);\n\n  --line-height-field: var(--pine-line-height-150);\n  --line-height-helper-message: var(--pine-line-height-125);\n  --line-height-label: var(--pine-line-height-150);\n\n  --spacing-margin-block-end-label: var(--pine-spacing-100);\n  --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n  --spacing-padding-block-field: var(--pine-spacing-100);\n  --spacing-padding-inline-field: var(--pine-spacing-200);\n\n  display: inline;\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  display: block;\n  font-size: var(--font-size-label);\n  font-weight: var(--font-weight-label);\n  line-height: var(--line-height-label);\n  margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n  background-color: var(--color-background);\n  border: 1px solid var(--color-border-default);\n  border-radius: var(--pine-border-radius-100);\n  font-family: inherit;\n  font-size: var(--font-size-field);\n  font-weight: var(--font-weight-field);\n  line-height: var(--line-height-field);\n  padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n  &:hover:not(:disabled, .is-invalid) {\n    border-color: var(--color-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    color: var(--color-disabled-default);\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\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  &::placeholder {\n    color: var(--color-placeholder-default);\n  }\n\n  &.is-invalid {\n    border-color: var(--color-border-error);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n    }\n  }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n  font-size: var(--font-size-helper-message);\n  font-weight: var(--font-weight-helper-message);\n  line-height: var(--line-height-helper-message);\n  margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n  color: var(--color-error-default);\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: ['../../global/styles/base.scss', 'pds-textarea.scss'],\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the textarea is disabled\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Specifies the error text and provides an error-themed treatment to the field\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a hint or description of the textarea\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the textarea is invalid or throws an error\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the textarea is readonly\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Indicates whether or not the textarea is required\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Event emitted whenever the value of the textarea changes\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  private onTextareaChange = (ev: Event) => {\n    const textarea = ev.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    if (textarea) {\n      this.value = textarea.innerHTML;\n    }\n\n    this.pdsTextareaChange.emit({value: this.value, event: ev});\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <PdsLabel htmlFor={this.componentId} text={this.label} />\n          }\n          <textarea\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onChange={this.onTextareaChange}\n          >{this.value}</textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6MAAA,IAAMA,QAAU,s1DAChB,IAAAC,kBAAeD,QCDf,IAAME,eAAiB,6jHACvB,IAAAC,kBAAeD,e,ICSFE,YAAW,W,iHAwEdC,KAAAC,iBAAmB,SAACC,GAC1B,IAAMC,EAAWD,EAAGE,OACpBC,WAAWF,EAAUG,GAErB,GAAIH,EAAU,CACZG,EAAKC,MAAQJ,EAASK,S,CAGxBF,EAAKG,kBAAkBC,KAAK,CAACH,MAAOD,EAAKC,MAAOI,MAAOT,G,2CApEtC,M,sEAgBc,M,+BAUVF,KAAKY,Y,yCAWT,M,cAMA,M,yCA4BXb,EAAAc,UAAAC,mBAAA,WACN,IAAMC,EAAa,CAAC,uBAEpB,GAAIf,KAAKgB,SAAWhB,KAAKgB,UAAY,KAAM,CACzCD,EAAWE,KAAK,a,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBnB,EAAAc,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYtB,KAAKuB,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACRxB,KAAKyB,OACJL,EAACM,SAAQ,CAAAJ,IAAA,2CAACK,QAAS3B,KAAKY,YAAagB,KAAM5B,KAAKyB,QAElDL,EAAA,YAAAE,IAAA,8DACoBO,kBAAkB7B,KAAKY,YAAaZ,KAAKgB,QAAShB,KAAK8B,eAAc,eACzE9B,KAAKgB,QAAU,OAASe,UACtCP,MAAOxB,KAAKc,qBACZS,SAAUvB,KAAKuB,SACfS,GAAIhC,KAAKY,YACTqB,KAAMjC,KAAKiC,KACXC,YAAalC,KAAKkC,YAClBC,SAAUnC,KAAKoC,SACfC,SAAUrC,KAAKqC,SACfC,KAAMtC,KAAKsC,KACXC,SAAUvC,KAAKC,kBACfD,KAAKO,OACNP,KAAK8B,eACJV,EAAA,KAAAE,IAAA,2CACEE,MAAM,+BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,WAE/BZ,KAAK8B,eAGT9B,KAAKgB,SACJI,EAAA,KAAAE,IAAA,uDACY,YACVE,MAAM,8BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,UAE/BZ,KAAKyC,e,gIAjII,G","ignoreList":[]}
+{"version":3,"names":["baseCss","PdsTextareaStyle0","pdsTextareaCss","PdsTextareaStyle1","PdsTextarea","this","onTextareaChange","ev","textarea","target","isRequired","_this","value","innerHTML","pdsTextareaChange","emit","event","componentId","prototype","textareaClassNames","classNames","invalid","push","join","render","h","Host","key","disabled","class","label","PdsLabel","htmlFor","text","assignDescription","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","rows","onChange","messageId","errorMessage"],"sources":["src/global/styles/base.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.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: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\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(div, label, p, span) {\n  color: var(--pine-color-text-default);\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-interactive-default: var(--pine-border-interactive-default);\n  --border-interactive-hover: var(--pine-border-interactive-hover);\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);\n\n  --color-background-default: var(--pine-color-white);\n  --color-background-disabled: var(--pine-color-grey-100);\n  --color-background-hover: var(--pine-color-grey-050);\n  --color-background-error-default: var(--pine-color-red-050);\n  --color-border-error-default: var(--pine-color-red-600);\n  --color-border-focus-visible: var(--pine-color-grey-400);\n  --color-border-hover: var(--pine-color-grey-400);\n  --color-focus-visible-outline: var(--pine-color-purple-300);\n  --color-focus-visible-outline-error: var(--pine-color-red-300);\n  --color-text-disabled-default: var(--pine-color-grey-400);\n  --color-text-message-error-default: var(--pine-color-red-600);\n  --color-text-placeholder-default: var(--pine-color-grey-600);\n  --color-text-placeholder-disabled: var(--pine-color-grey-400);\n\n  --font-weight-label-default: var(--pine-font-weight-body-medium);\n\n  --spacing-margin-block-end-label: var(--pine-spacing-100);\n  --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n  --spacing-padding-block-field: var(--pine-spacing-100);\n  --spacing-padding-inline-field: var(--pine-spacing-200);\n\n  --typography-message-default: var(--pine-typography-body-sm-default);\n\n  display: inline;\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  display: block;\n  font-weight: var(--font-weight-label-default);\n  margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n  background-color: var(--color-background-default);\n  border: var(--border-interactive-default);\n  border-radius: var(--pine-border-radius-100);\n  padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n  &:hover:not(:disabled, .is-invalid) {\n    border: var(--border-interactive-hover);\n  }\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    color: var(--color-text-disabled-default);\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\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  &::placeholder {\n    color: var(--color-text-placeholder-default);\n  }\n\n  &.is-invalid {\n    border-color: var(--color-border-error-default);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n    }\n  }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n  font: var(--typography-message-default);\n  margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n  color: var(--color-text-message-error-default);\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: ['../../global/styles/base.scss', 'pds-textarea.scss'],\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the textarea is disabled\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Specifies the error text and provides an error-themed treatment to the field\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a hint or description of the textarea\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the textarea is invalid or throws an error\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the textarea is readonly\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Indicates whether or not the textarea is required\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Event emitted whenever the value of the textarea changes\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  private onTextareaChange = (ev: Event) => {\n    const textarea = ev.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    if (textarea) {\n      this.value = textarea.innerHTML;\n    }\n\n    this.pdsTextareaChange.emit({value: this.value, event: ev});\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <PdsLabel htmlFor={this.componentId} text={this.label} />\n          }\n          <textarea\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onChange={this.onTextareaChange}\n          >{this.value}</textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6MAAA,IAAMA,QAAU,yrDAChB,IAAAC,kBAAeD,QCDf,IAAME,eAAiB,0rGACvB,IAAAC,kBAAeD,e,ICSFE,YAAW,W,iHAwEdC,KAAAC,iBAAmB,SAACC,GAC1B,IAAMC,EAAWD,EAAGE,OACpBC,WAAWF,EAAUG,GAErB,GAAIH,EAAU,CACZG,EAAKC,MAAQJ,EAASK,S,CAGxBF,EAAKG,kBAAkBC,KAAK,CAACH,MAAOD,EAAKC,MAAOI,MAAOT,G,2CApEtC,M,sEAgBc,M,+BAUVF,KAAKY,Y,yCAWT,M,cAMA,M,yCA4BXb,EAAAc,UAAAC,mBAAA,WACN,IAAMC,EAAa,CAAC,uBAEpB,GAAIf,KAAKgB,SAAWhB,KAAKgB,UAAY,KAAM,CACzCD,EAAWE,KAAK,a,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBnB,EAAAc,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYtB,KAAKuB,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACRxB,KAAKyB,OACJL,EAACM,SAAQ,CAAAJ,IAAA,2CAACK,QAAS3B,KAAKY,YAAagB,KAAM5B,KAAKyB,QAElDL,EAAA,YAAAE,IAAA,8DACoBO,kBAAkB7B,KAAKY,YAAaZ,KAAKgB,QAAShB,KAAK8B,eAAc,eACzE9B,KAAKgB,QAAU,OAASe,UACtCP,MAAOxB,KAAKc,qBACZS,SAAUvB,KAAKuB,SACfS,GAAIhC,KAAKY,YACTqB,KAAMjC,KAAKiC,KACXC,YAAalC,KAAKkC,YAClBC,SAAUnC,KAAKoC,SACfC,SAAUrC,KAAKqC,SACfC,KAAMtC,KAAKsC,KACXC,SAAUvC,KAAKC,kBACfD,KAAKO,OACNP,KAAK8B,eACJV,EAAA,KAAAE,IAAA,2CACEE,MAAM,+BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,WAE/BZ,KAAK8B,eAGT9B,KAAKgB,SACJI,EAAA,KAAAE,IAAA,uDACY,YACVE,MAAM,8BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,UAE/BZ,KAAKyC,e,gIAjII,G","ignoreList":[]}

package/dist/esm-es5/pds-tooltip.entry.js

@@ -1,2 +1,2 @@
-import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-94bbabb0.js";var positionTooltip=function(t){var r=t.elem,o=t.elemPlacement,e=t.overlay,i=t.offset,a=i===void 0?8:i;if(r==undefined)return;var n=r.getBoundingClientRect();var l=e.getBoundingClientRect();if(!o||o=="")return;switch(true){case o.includes("right"):e.style.top="50%";e.style.left="calc(".concat(n.width,"px + ").concat(a,"px)");e.style.transform="translateY(-50%)";if(o.includes("start")){e.style.top="0";e.style.transform="translateY(0)"}if(o.includes("end")){e.style.bottom="0";e.style.top="initial";e.style.transform="translateY(0)"}break;case o.includes("left"):e.style.top="50%";e.style.right="calc(".concat(n.width,"px + ").concat(a,"px)");e.style.transform="translateY(-50%)";if(o.includes("start")){e.style.top="0";e.style.transform="translateY(0)"}if(o.includes("end")){e.style.bottom="0";e.style.top="initial";e.style.transform="translateY(0)"}break;case o.includes("bottom"):e.style.top="calc(".concat(n.height,"px + ").concat(a,"px)");e.style.left="50%";e.style.transform="translateX(-50%)";if(o.includes("start")){e.style.left="0";e.style.transform="translateX(0)"}if(o.includes("end")){e.style.left="initial";e.style.right="0";e.style.transform="translateX(0)"}break;case o.includes("top"):e.style.top="calc((".concat(l.height,"px + ").concat(a,"px) * -1)");e.style.left="50%";e.style.transform="translateX(-50%)";if(o.includes("start")){e.style.left="0";e.style.transform="translateX(0)"}if(o.includes("end")){e.style.left="initial";e.style.right="0";e.style.transform="translateX(0)"}break}};var baseCss=':where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font-family:var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(p){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}';var PdsTooltipStyle0=baseCss;var pdsTooltipCss=':host{--border-radius-overlay:var(--pine-border-radius-125);--border-width-arrow-down:var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-left:var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-right:var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);--border-width-arrow-up:0 var(--sizing-arrow-default) var(--sizing-arrow-default);--box-shadow-default:var(--pine-box-shadow-200);--color-background-default:var(--pine-color-grey-900);--color-text-default:var(--pine-color-white);--font-size-overlay:var(--pine-font-size-085);--line-height-overlay:var(--pine-line-height-125);--sizing-arrow-default:6px;--sizing-arrow-offset:14px;--sizing-width-default:320px;--spacing-padding-overlay:var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);display:inline-block;position:relative}:host ::slotted(*){display:-ms-flexbox;display:flex}:host ::slotted([slot=content]){display:block;white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);font-size:var(--font-size-overlay);line-height:var(--line-height-overlay);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);bottom:var(--sizing-arrow-offset);left:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:var(--sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:initial;right:var(--sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);bottom:var(--sizing-arrow-offset);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';var PdsTooltipStyle1=pdsTooltipCss;var PdsTooltip=function(){function t(t){var r=this;registerInstance(this,t);this.pdsTooltipHide=createEvent(this,"pdsTooltipHide",7);this.pdsTooltipShow=createEvent(this,"pdsTooltipShow",7);this.handleHide=function(){r.hideTooltip();r.pdsTooltipHide.emit()};this.handleShow=function(){r.showTooltip();r.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}t.prototype.handleOpenToggle=function(){if(this.opened){this.handleShow()}else{this.handleHide()}};t.prototype.componentWillLoad=function(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)};t.prototype.componentDidUpdate=function(){if(this.opened){this.showTooltip()}};t.prototype.componentDidRender=function(){positionTooltip({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})};t.prototype.showTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=true;return[2]}))}))};t.prototype.hideTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=false;return[2]}))}))};t.prototype.render=function(){var t=this;return h(Host,{key:"2d8f8962d48885ba08942be77017a4935ddd2e22",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},h("div",{key:"532fcea8cc64b97257ee44f7513d24ae6369bc80",class:"\n            pds-tooltip\n            pds-tooltip--".concat(this.placement,"\n            ").concat(this.htmlContent?"pds-tooltip--has-html-content":"","\n            ").concat(this.opened?"pds-tooltip--is-open":"","\n            ").concat(this.hasArrow?"":"pds-tooltip--no-arrow","\n          ")},h("span",{key:"aeebff67bb54044f6c929b3da664c8b5185d34bb","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},h("slot",{key:"459356377503d70ca14d8fc52fc25ed989e9c54c"})),h("div",{key:"29eab9bdfc2579d96ba66cce94ecf82b52c3e8a5",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:function(r){return t.contentEl=r},role:"tooltip"},h("slot",{key:"33b625cdc333f23ad036a7623581e49b95ce23e7",name:"content"}),this.content)))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenToggle"]}},enumerable:false,configurable:true});return t}();PdsTooltip.style=PdsTooltipStyle0+PdsTooltipStyle1;export{PdsTooltip as pds_tooltip};
+import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-94bbabb0.js";var positionTooltip=function(t){var r=t.elem,o=t.elemPlacement,e=t.overlay,a=t.offset,i=a===void 0?8:a;if(r==undefined)return;var n=r.getBoundingClientRect();var l=e.getBoundingClientRect();if(!o||o=="")return;switch(true){case o.includes("right"):e.style.top="50%";e.style.left="calc(".concat(n.width,"px + ").concat(i,"px)");e.style.transform="translateY(-50%)";if(o.includes("start")){e.style.top="0";e.style.transform="translateY(0)"}if(o.includes("end")){e.style.bottom="0";e.style.top="initial";e.style.transform="translateY(0)"}break;case o.includes("left"):e.style.top="50%";e.style.right="calc(".concat(n.width,"px + ").concat(i,"px)");e.style.transform="translateY(-50%)";if(o.includes("start")){e.style.top="0";e.style.transform="translateY(0)"}if(o.includes("end")){e.style.bottom="0";e.style.top="initial";e.style.transform="translateY(0)"}break;case o.includes("bottom"):e.style.top="calc(".concat(n.height,"px + ").concat(i,"px)");e.style.left="50%";e.style.transform="translateX(-50%)";if(o.includes("start")){e.style.left="0";e.style.transform="translateX(0)"}if(o.includes("end")){e.style.left="initial";e.style.right="0";e.style.transform="translateX(0)"}break;case o.includes("top"):e.style.top="calc((".concat(l.height,"px + ").concat(i,"px) * -1)");e.style.left="50%";e.style.transform="translateX(-50%)";if(o.includes("start")){e.style.left="0";e.style.transform="translateX(0)"}if(o.includes("end")){e.style.left="initial";e.style.right="0";e.style.transform="translateX(0)"}break}};var baseCss=":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}: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(div,label,p,span){color:var(--pine-color-text-default)}: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 PdsTooltipStyle0=baseCss;var pdsTooltipCss=':host{--border-radius-overlay:var(--pine-border-radius-125);--border-width-arrow-down:var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-left:var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-right:var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);--border-width-arrow-up:0 var(--sizing-arrow-default) var(--sizing-arrow-default);--box-shadow-default:var(--pine-box-shadow-200);--color-background-default:var(--pine-color-grey-950);--color-text-default:var(--pine-color-white);--sizing-arrow-default:6px;--sizing-arrow-offset:14px;--sizing-width-default:320px;--spacing-padding-overlay:var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);display:inline-block;position:relative}:host ::slotted(*){display:-ms-flexbox;display:flex}:host ::slotted([slot=content]){display:block;white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);bottom:var(--sizing-arrow-offset);left:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:var(--sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:initial;right:var(--sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);bottom:var(--sizing-arrow-offset);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';var PdsTooltipStyle1=pdsTooltipCss;var PdsTooltip=function(){function t(t){var r=this;registerInstance(this,t);this.pdsTooltipHide=createEvent(this,"pdsTooltipHide",7);this.pdsTooltipShow=createEvent(this,"pdsTooltipShow",7);this.handleHide=function(){r.hideTooltip();r.pdsTooltipHide.emit()};this.handleShow=function(){r.showTooltip();r.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}t.prototype.handleOpenToggle=function(){if(this.opened){this.handleShow()}else{this.handleHide()}};t.prototype.componentWillLoad=function(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)};t.prototype.componentDidUpdate=function(){if(this.opened){this.showTooltip()}};t.prototype.componentDidRender=function(){positionTooltip({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})};t.prototype.showTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=true;return[2]}))}))};t.prototype.hideTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=false;return[2]}))}))};t.prototype.render=function(){var t=this;return h(Host,{key:"2d8f8962d48885ba08942be77017a4935ddd2e22",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},h("div",{key:"532fcea8cc64b97257ee44f7513d24ae6369bc80",class:"\n            pds-tooltip\n            pds-tooltip--".concat(this.placement,"\n            ").concat(this.htmlContent?"pds-tooltip--has-html-content":"","\n            ").concat(this.opened?"pds-tooltip--is-open":"","\n            ").concat(this.hasArrow?"":"pds-tooltip--no-arrow","\n          ")},h("span",{key:"aeebff67bb54044f6c929b3da664c8b5185d34bb","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},h("slot",{key:"459356377503d70ca14d8fc52fc25ed989e9c54c"})),h("div",{key:"29eab9bdfc2579d96ba66cce94ecf82b52c3e8a5",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:function(r){return t.contentEl=r},role:"tooltip"},h("slot",{key:"33b625cdc333f23ad036a7623581e49b95ce23e7",name:"content"}),this.content)))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenToggle"]}},enumerable:false,configurable:true});return t}();PdsTooltip.style=PdsTooltipStyle0+PdsTooltipStyle1;export{PdsTooltip as pds_tooltip};
 //# sourceMappingURL=pds-tooltip.entry.js.map

package/dist/esm-es5/pds-tooltip.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["positionTooltip","_a","elem","elemPlacement","overlay","_b","offset","undefined","rect","getBoundingClientRect","contentRect","includes","style","top","left","concat","width","transform","bottom","right","height","baseCss","PdsTooltipStyle0","pdsTooltipCss","PdsTooltipStyle1","PdsTooltip","this","handleHide","_this","hideTooltip","pdsTooltipHide","emit","handleShow","showTooltip","pdsTooltipShow","class_1","prototype","handleOpenToggle","opened","componentWillLoad","el","addEventListener","componentDidUpdate","componentDidRender","placement","contentEl","render","h","Host","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","class","htmlContent","hasArrow","componentId","id","ref","role","name","content"],"sources":["src/utils/overlay.ts","src/global/styles/base.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n  elem: HTMLElement;\n  elemPlacement: string;\n  overlay: HTMLElement;\n  offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n  if (elem == undefined) return;\n\n  const rect = elem.getBoundingClientRect();\n  const contentRect = overlay.getBoundingClientRect();\n\n  // Exit the function if the placement is not set\n  if (!elemPlacement || elemPlacement == \"\") return;\n\n  switch (true) {\n    case elemPlacement.includes(\"right\"):\n      overlay.style.top = '50%';\n      overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"left\"):\n      overlay.style.top = '50%';\n      overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"bottom\"):\n      overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"top\"):\n      overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n  }\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-overlay: var(--pine-border-radius-125);\n\n  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n\n  --box-shadow-default: var(--pine-box-shadow-200);\n\n  --color-background-default: var(--pine-color-grey-900);\n  --color-text-default: var(--pine-color-white);\n\n  --font-size-overlay: var(--pine-font-size-085);\n\n  --line-height-overlay: var(--pine-line-height-125);\n\n  --sizing-arrow-default: 6px;\n  --sizing-arrow-offset: 14px;\n  --sizing-width-default: 320px;\n\n  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);\n\n  display: inline-block;\n  position: relative;\n\n  ::slotted(*) {\n    display: flex;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    display: block;\n    white-space: normal;\n    width: var(--sizing-width-default);\n  }\n}\n\n.pds-tooltip__content {\n  background-color: var(--color-background-default);\n  border-radius: var(--border-radius-overlay);\n  box-shadow: var(--box-shadow-default);\n  color: var(--color-text-default);\n  font-size: var(--font-size-overlay);\n  line-height: var(--line-height-overlay);\n  // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n  opacity: 0;\n  padding: var(--spacing-padding-overlay);\n  position: absolute;\n  visibility: hidden;\n  width: max-content;\n\n  .pds-tooltip--is-open & {\n    // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n    opacity: 1;\n    visibility: visible;\n    z-index: 1;\n  }\n\n  :host(.pds-tooltip--has-html-content) & {\n    width: auto;\n  }\n\n  &::after {\n    border-color: transparent;\n    border-right-color: transparent;\n    border-style: solid;\n    border-width: var(--border-width-arrow-left);\n    content: '';\n    height: 0;\n    position: absolute;\n    width: 0;\n\n    .pds-tooltip--right & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--right-end & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      bottom: var(--sizing-arrow-offset);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--right-start & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--top & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: 50%;\n      top: initial;\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--top-start & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--top-end & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--left & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--left-end & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      bottom: var(--sizing-arrow-offset);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--left-start & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--bottom & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: 50%;\n      top: calc(var(--sizing-arrow-default) * -1);\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--bottom-end & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--bottom-start & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--no-arrow & {\n      border-width: 0;\n    }\n  }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrls: ['../../global/styles/base.scss', 'pds-tooltip.scss'],\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["positionTooltip","_a","elem","elemPlacement","overlay","_b","offset","undefined","rect","getBoundingClientRect","contentRect","includes","style","top","left","concat","width","transform","bottom","right","height","baseCss","PdsTooltipStyle0","pdsTooltipCss","PdsTooltipStyle1","PdsTooltip","this","handleHide","_this","hideTooltip","pdsTooltipHide","emit","handleShow","showTooltip","pdsTooltipShow","class_1","prototype","handleOpenToggle","opened","componentWillLoad","el","addEventListener","componentDidUpdate","componentDidRender","placement","contentEl","render","h","Host","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","class","htmlContent","hasArrow","componentId","id","ref","role","name","content"],"sources":["src/utils/overlay.ts","src/global/styles/base.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n  elem: HTMLElement;\n  elemPlacement: string;\n  overlay: HTMLElement;\n  offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n  if (elem == undefined) return;\n\n  const rect = elem.getBoundingClientRect();\n  const contentRect = overlay.getBoundingClientRect();\n\n  // Exit the function if the placement is not set\n  if (!elemPlacement || elemPlacement == \"\") return;\n\n  switch (true) {\n    case elemPlacement.includes(\"right\"):\n      overlay.style.top = '50%';\n      overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"left\"):\n      overlay.style.top = '50%';\n      overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"bottom\"):\n      overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"top\"):\n      overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n  }\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: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\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(div, label, p, span) {\n  color: var(--pine-color-text-default);\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-overlay: var(--pine-border-radius-125);\n\n  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n\n  --box-shadow-default: var(--pine-box-shadow-200);\n\n  --color-background-default: var(--pine-color-grey-950);\n  --color-text-default: var(--pine-color-white);\n\n  --sizing-arrow-default: 6px;\n  --sizing-arrow-offset: 14px;\n  --sizing-width-default: 320px;\n\n  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);\n\n  display: inline-block;\n  position: relative;\n\n  ::slotted(*) {\n    display: flex;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    display: block;\n    white-space: normal;\n    width: var(--sizing-width-default);\n  }\n}\n\n.pds-tooltip__content {\n  background-color: var(--color-background-default);\n  border-radius: var(--border-radius-overlay);\n  box-shadow: var(--box-shadow-default);\n  color: var(--color-text-default);\n  // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n  opacity: 0;\n  padding: var(--spacing-padding-overlay);\n  position: absolute;\n  visibility: hidden;\n  width: max-content;\n\n  .pds-tooltip--is-open & {\n    // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n    opacity: 1;\n    visibility: visible;\n    z-index: 1;\n  }\n\n  :host(.pds-tooltip--has-html-content) & {\n    width: auto;\n  }\n\n  &::after {\n    border-color: transparent;\n    border-right-color: transparent;\n    border-style: solid;\n    border-width: var(--border-width-arrow-left);\n    content: '';\n    height: 0;\n    position: absolute;\n    width: 0;\n\n    .pds-tooltip--right & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--right-end & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      bottom: var(--sizing-arrow-offset);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--right-start & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--top & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: 50%;\n      top: initial;\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--top-start & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--top-end & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--left & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--left-end & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      bottom: var(--sizing-arrow-offset);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--left-start & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--bottom & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: 50%;\n      top: calc(var(--sizing-arrow-default) * -1);\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--bottom-end & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--bottom-start & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--no-arrow & {\n      border-width: 0;\n    }\n  }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrls: ['../../global/styles/base.scss', 'pds-tooltip.scss'],\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pine-core/p-0069affa.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as r,h as o,H as e,g as a}from"./p-7841bd18.js";const i=({elem:t,elemPlacement:r,overlay:o,offset:e=8})=>{if(t==undefined)return;const a=t.getBoundingClientRect();const i=o.getBoundingClientRect();if(!r||r=="")return;switch(true){case r.includes("right"):o.style.top="50%";o.style.left=`calc(${a.width}px + ${e}px)`;o.style.transform="translateY(-50%)";if(r.includes("start")){o.style.top="0";o.style.transform="translateY(0)"}if(r.includes("end")){o.style.bottom="0";o.style.top="initial";o.style.transform="translateY(0)"}break;case r.includes("left"):o.style.top="50%";o.style.right=`calc(${a.width}px + ${e}px)`;o.style.transform="translateY(-50%)";if(r.includes("start")){o.style.top="0";o.style.transform="translateY(0)"}if(r.includes("end")){o.style.bottom="0";o.style.top="initial";o.style.transform="translateY(0)"}break;case r.includes("bottom"):o.style.top=`calc(${a.height}px + ${e}px)`;o.style.left="50%";o.style.transform="translateX(-50%)";if(r.includes("start")){o.style.left="0";o.style.transform="translateX(0)"}if(r.includes("end")){o.style.left="initial";o.style.right="0";o.style.transform="translateX(0)"}break;case r.includes("top"):o.style.top=`calc((${i.height}px + ${e}px) * -1)`;o.style.left="50%";o.style.transform="translateX(-50%)";if(r.includes("start")){o.style.left="0";o.style.transform="translateX(0)"}if(r.includes("end")){o.style.left="initial";o.style.right="0";o.style.transform="translateX(0)"}break}};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:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}: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(div,label,p,span){color:var(--pine-color-text-default)}: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=n;const s=':host{--border-radius-overlay:var(--pine-border-radius-125);--border-width-arrow-down:var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-left:var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-right:var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);--border-width-arrow-up:0 var(--sizing-arrow-default) var(--sizing-arrow-default);--box-shadow-default:var(--pine-box-shadow-200);--color-background-default:var(--pine-color-grey-950);--color-text-default:var(--pine-color-white);--sizing-arrow-default:6px;--sizing-arrow-offset:14px;--sizing-width-default:320px;--spacing-padding-overlay:var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);display:inline-block;position:relative}:host ::slotted(*){display:-ms-flexbox;display:flex}:host ::slotted([slot=content]){display:block;white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);bottom:var(--sizing-arrow-offset);left:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:var(--sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:initial;right:var(--sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);bottom:var(--sizing-arrow-offset);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';const d=s;const p=class{constructor(o){t(this,o);this.pdsTooltipHide=r(this,"pdsTooltipHide",7);this.pdsTooltipShow=r(this,"pdsTooltipShow",7);this.handleHide=()=>{this.hideTooltip();this.pdsTooltipHide.emit()};this.handleShow=()=>{this.showTooltip();this.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}handleOpenToggle(){if(this.opened){this.handleShow()}else{this.handleHide()}}componentWillLoad(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)}componentDidUpdate(){if(this.opened){this.showTooltip()}}componentDidRender(){i({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})}async showTooltip(){this.opened=true}async hideTooltip(){this.opened=false}render(){return o(e,{key:"2d8f8962d48885ba08942be77017a4935ddd2e22",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},o("div",{key:"532fcea8cc64b97257ee44f7513d24ae6369bc80",class:`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent?"pds-tooltip--has-html-content":""}\n            ${this.opened?"pds-tooltip--is-open":""}\n            ${this.hasArrow?"":"pds-tooltip--no-arrow"}\n          `},o("span",{key:"aeebff67bb54044f6c929b3da664c8b5185d34bb","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},o("slot",{key:"459356377503d70ca14d8fc52fc25ed989e9c54c"})),o("div",{key:"29eab9bdfc2579d96ba66cce94ecf82b52c3e8a5",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:t=>this.contentEl=t,role:"tooltip"},o("slot",{key:"33b625cdc333f23ad036a7623581e49b95ce23e7",name:"content"}),this.content)))}get el(){return a(this)}static get watchers(){return{opened:["handleOpenToggle"]}}};p.style=l+d;export{p as pds_tooltip};
+//# sourceMappingURL=p-0069affa.entry.js.map

package/dist/pine-core/p-0069affa.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["positionTooltip","elem","elemPlacement","overlay","offset","undefined","rect","getBoundingClientRect","contentRect","includes","style","top","left","width","transform","bottom","right","height","baseCss","PdsTooltipStyle0","pdsTooltipCss","PdsTooltipStyle1","PdsTooltip","this","handleHide","hideTooltip","pdsTooltipHide","emit","handleShow","showTooltip","pdsTooltipShow","handleOpenToggle","opened","componentWillLoad","el","addEventListener","componentDidUpdate","componentDidRender","placement","contentEl","render","h","Host","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","class","htmlContent","hasArrow","componentId","id","ref","role","name","content"],"sources":["src/utils/overlay.ts","src/global/styles/base.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n  elem: HTMLElement;\n  elemPlacement: string;\n  overlay: HTMLElement;\n  offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n  if (elem == undefined) return;\n\n  const rect = elem.getBoundingClientRect();\n  const contentRect = overlay.getBoundingClientRect();\n\n  // Exit the function if the placement is not set\n  if (!elemPlacement || elemPlacement == \"\") return;\n\n  switch (true) {\n    case elemPlacement.includes(\"right\"):\n      overlay.style.top = '50%';\n      overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"left\"):\n      overlay.style.top = '50%';\n      overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"bottom\"):\n      overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"top\"):\n      overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n  }\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: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\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(div, label, p, span) {\n  color: var(--pine-color-text-default);\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-overlay: var(--pine-border-radius-125);\n\n  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n\n  --box-shadow-default: var(--pine-box-shadow-200);\n\n  --color-background-default: var(--pine-color-grey-950);\n  --color-text-default: var(--pine-color-white);\n\n  --sizing-arrow-default: 6px;\n  --sizing-arrow-offset: 14px;\n  --sizing-width-default: 320px;\n\n  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);\n\n  display: inline-block;\n  position: relative;\n\n  ::slotted(*) {\n    display: flex;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    display: block;\n    white-space: normal;\n    width: var(--sizing-width-default);\n  }\n}\n\n.pds-tooltip__content {\n  background-color: var(--color-background-default);\n  border-radius: var(--border-radius-overlay);\n  box-shadow: var(--box-shadow-default);\n  color: var(--color-text-default);\n  // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n  opacity: 0;\n  padding: var(--spacing-padding-overlay);\n  position: absolute;\n  visibility: hidden;\n  width: max-content;\n\n  .pds-tooltip--is-open & {\n    // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n    opacity: 1;\n    visibility: visible;\n    z-index: 1;\n  }\n\n  :host(.pds-tooltip--has-html-content) & {\n    width: auto;\n  }\n\n  &::after {\n    border-color: transparent;\n    border-right-color: transparent;\n    border-style: solid;\n    border-width: var(--border-width-arrow-left);\n    content: '';\n    height: 0;\n    position: absolute;\n    width: 0;\n\n    .pds-tooltip--right & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--right-end & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      bottom: var(--sizing-arrow-offset);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--right-start & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--top & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: 50%;\n      top: initial;\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--top-start & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--top-end & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--left & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--left-end & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      bottom: var(--sizing-arrow-offset);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--left-start & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--bottom & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: 50%;\n      top: calc(var(--sizing-arrow-default) * -1);\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--bottom-end & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--bottom-start & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--no-arrow & {\n      border-width: 0;\n    }\n  }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrls: ['../../global/styles/base.scss', 'pds-tooltip.scss'],\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pine-core/p-03ecf146.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as a,g as i}from"./p-7841bd18.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:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}: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(div,label,p,span){color:var(--pine-color-text-default)}: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 r=s;const n=":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";const o=n;const h=class{constructor(t){e(this,t);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}tabClickHandler(e){if(this.componentId===e.detail[1]){this.activeTabIndex=e.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}}handleKeyDown(e){const t=["ArrowLeft","ArrowRight","Home","End"];if(t.includes(e.key)){e.preventDefault();this.moveActiveTab(e.key)}}moveActiveTab(e){const t=0;const a=this.tabs.length-1;let i=null;switch(e){case"ArrowLeft":i=this.activeTabIndex===t?a:this.activeTabIndex+-1;break;case"ArrowRight":i=this.activeTabIndex===a?t:this.activeTabIndex+1;break;case"Home":i=t;break;case"End":i=a;break}this.tabs[i].children[0].focus();this.activeTabName=this.tabs[i].name;this.activeTabIndex=i}findAllChildren(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")}propGeneration(e,t=0){e.parentComponentId=this.componentId.toString();e.variant=this.variant.toString();e.selected=this.activeTabName===e.name?true:false;e["index"]=t}passPropsToChildren(){this.tabs.forEach(((e,t)=>{if(this.activeTabName===e.name)this.activeTabIndex=t;this.propGeneration(e,t)}));this.tabPanels.forEach((e=>{this.propGeneration(e)}))}classNames(){let e=`pds-tabs`;if(this.variant&&this.variant!="primary"){const t=`pds-tabs--${this.variant}`;e+=" "+t}return e}componentWillLoad(){this.findAllChildren()}componentWillRender(){this.passPropsToChildren()}render(){return t(a,{key:"590f66c80be5b92b015e6499ee60bef965bbaa1e","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},t("div",{key:"7251690cd8b8ac1425763212883c98826d15fed1",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel},t("slot",{key:"d07a6f7b621309db9cd7169184c8e7ae0b3b981f",name:"tabs"})),t("slot",{key:"dcc5b2ea9bdf45f33d3cb2b0a75fa4a2885ec00b",name:"tabpanels"}))}get el(){return i(this)}};h.style=r+o;export{h as pds_tabs};
+//# sourceMappingURL=p-03ecf146.entry.js.map

package/dist/pine-core/p-03ecf146.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["baseCss","PdsTabsStyle0","pdsTabsCss","PdsTabsStyle1","PdsTabs","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","forEach","classNames","className","variantClassName","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/global/styles/base.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.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: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\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(div, label, p, span) {\n  color: var(--pine-color-text-default);\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  /**\n   * @prop --spacing-panel-margin-top: Optional margin-top for panels\n   */\n  --spacing-panel-margin-top: 0;\n  /**\n   * @prop --spacing-panel-padding: Optional padding for panels\n   */\n  --spacing-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-blue-200);\n\n  --spacing-gap-availability: var(--pine-spacing-100);\n  --spacing-gap-default: var(--pine-spacing-300);\n  --spacing-gap-filter: var(--pine-spacing-200);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-gap-default);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--spacing-gap-availability);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--spacing-gap-filter);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrls: ['../../global/styles/base.scss', 'pds-tabs.scss'],\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAU,yrDAChB,MAAAC,EAAeD,ECDf,MAAME,EAAa,giBACnB,MAAAC,EAAeD,E,MCUFE,EAAO,M,kKAmClB,eAAAC,CAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,EAKxD,aAAAC,CAAcC,GACZ,MAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,EAIlB,aAAAE,CAAcF,GACpB,MAAMG,EAAiB,EACvB,MAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,CAGhB,eAAAG,GACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,CAGpC,cAAAE,CAAeC,EAAOC,EAAQ,GACpCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,CAGX,mBAAAK,GACN/B,KAAKK,KAAK2B,SAAQ,CAACP,EAAOC,KACxB,GAAI1B,KAAKI,gBAAkBqB,EAAMnB,KAAMN,KAAKG,eAAiBuB,EAC7D1B,KAAKwB,eAAeC,EAAOC,EAAM,IAGnC1B,KAAKuB,UAAUS,SAASP,IACtBzB,KAAKwB,eAAeC,EAAM,G,CAItB,UAAAQ,GACN,IAAIC,EAAY,WAChB,GAAIlC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,MAAMM,EAAmB,aAAanC,KAAK6B,UAC3CK,GAAa,IAAMC,C,CAGrB,OAAOD,C,CAGT,iBAAAE,GACEpC,KAAKoB,iB,CAGP,mBAAAiB,GACErC,KAAK+B,qB,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAA7B,IAAA,6DAAkBX,KAAKI,cAAeqC,MAAOzC,KAAKiC,aAAcS,GAAI1C,KAAKC,aAC5EsC,EAAA,OAAA5B,IAAA,2CAAK8B,MAAM,oBAAoBE,KAAK,UAAS,aAAa3C,KAAK4C,cAC7DL,EAAA,QAAA5B,IAAA,2CAAML,KAAK,UAEbiC,EAAA,QAAA5B,IAAA,2CAAML,KAAK,c","ignoreList":[]}

package/dist/pine-core/p-0c2553c6.system.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,r,n){function o(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,a){function i(e){try{c(n.next(e))}catch(e){a(e)}}function l(e){try{c(n["throw"](e))}catch(e){a(e)}}function c(e){e.done?r(e.value):o(e.value).then(i,l)}c((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},n,o,a,i;return i={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function l(e){return function(t){return c([e,t])}}function c(l){if(n)throw new TypeError("Generator is already executing.");while(i&&(i=0,l[0]&&(r=0)),r)try{if(n=1,o&&(a=l[0]&2?o["return"]:l[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,l[1])).done)return a;if(o=0,a)l=[l[0]&2,a.value];switch(l[0]){case 0:case 1:a=l;break;case 4:r.label++;return{value:l[1],done:false};case 5:r.label++;o=l[1];l=[0];continue;case 7:l=r.ops.pop();r.trys.pop();continue;default:if(!(a=r.trys,a=a.length>0&&a[a.length-1])&&(l[0]===6||l[0]===2)){r=0;continue}if(l[0]===3&&(!a||l[1]>a[0]&&l[1]<a[3])){r.label=l[1];break}if(l[0]===6&&r.label<a[1]){r.label=a[1];a=l;break}if(a&&r.label<a[2]){r.label=a[2];r.ops.push(l);break}if(a[2])r.ops.pop();r.trys.pop();continue}l=t.call(e,r)}catch(e){l=[6,e];o=0}finally{n=a=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-c6bee7a0.system.js"],(function(e){"use strict";var t,r,n,o,a;return{setters:[function(e){t=e.r;r=e.c;n=e.h;o=e.H;a=e.g}],execute:function(){var 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:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}: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(div,label,p,span){color:var(--pine-color-text-default)}: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 l=i;var c=":host{--color-background-default:var(--pine-color-white);background:var(--color-background-default);border-collapse:separate;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(:focus-visible){--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.is-responsive){background-attachment:local, local, scroll, scroll;background-image:-webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));background-position:left center, right center, left center, right center;background-repeat:no-repeat;background-size:4px 100%, 4px 100%, 4px 100%, 4px 100%;display:block;margin:0 auto;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow-x:auto;white-space:nowrap}";var h=c;var s=e("pds_table",function(){function e(e){t(this,e);this.pdsTableSelect=r(this,"pdsTableSelect",7);this.pdsTableSelectAll=r(this,"pdsTableSelectAll",7);this.compact=undefined;this.componentId=undefined;this.responsive=undefined;this.fixedColumn=undefined;this.selectable=undefined;this.sortingColumn=null;this.sortingDirection="asc"}e.prototype.componentWillLoad=function(){this.sortingColumn=null};e.prototype.classNames=function(){var e=["pds-table"];if(this.compact){e.push("is-compact")}if(this.responsive){e.push("is-responsive")}return e.join("  ")};e.prototype.sortTable=function(e,t){var r=this.el.querySelector("pds-table-body");var n=Array.from(r.querySelectorAll("pds-table-row"));var o=Array.from(this.el.querySelectorAll("pds-table-head-cell[sortable]"));var a=o.find((function(t){return t.innerText.trim()===e}));if(!a){console.warn('Column "'.concat(e,'" not found.'));return}var i=o.indexOf(a);n.sort((function(e,r){var n=e.querySelector("pds-table-cell:nth-child(".concat(i+1,")")).textContent.trim();var o=r.querySelector("pds-table-cell:nth-child(".concat(i+1,")")).textContent.trim();if(t==="asc"){return n.localeCompare(o)}else{return o.localeCompare(n)}}));r.innerHTML="";n.forEach((function(e){r.appendChild(e)}))};e.prototype.handleTableSort=function(e){var t=e.detail.direction;this.sortTable(e.detail.column,t);this.sortingColumn=e.detail.column;this.sortingDirection=t};e.prototype.handleTableSelectAll=function(e){if(e.defaultPrevented)return;var t=this.el.querySelector("pds-table-body");var r=Array.from(t.querySelectorAll("pds-table-row"));r.forEach((function(t){t.isSelected=e.detail.isSelected}))};e.prototype.handleTableSelect=function(e){return __awaiter(this,void 0,void 0,(function(){var t,r,n,o,a;return __generator(this,(function(i){if(e.defaultPrevented)return[2];t=this.el.querySelectorAll("pds-table-row");r=Array.from(t).every((function(e){return e.isSelected}));n=Array.from(t).every((function(e){return!e.isSelected}));o=this.el.querySelector("pds-table-head");if(!o)return[2];a=o.shadowRoot.querySelector("pds-checkbox");a.checked=r;a.indeterminate=!r&&!n;return[2]}))}))};e.prototype.render=function(){return n(o,{key:"e5b9a1f7239dc31f78f8ea3670367e3d633db1a8",class:this.classNames(),id:this.componentId,role:"grid",selectable:this.selectable,tabindex:"0"},n("slot",{key:"b745184147807d1a0cc0b36da86b06d8fb71669e"}))};Object.defineProperty(e.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return e}());s.style=l+h}}}));
+//# sourceMappingURL=p-0c2553c6.system.entry.js.map