@pine-ds/core 2.1.2 → 2.1.3

package/dist/pine-core/p-ee21fa25.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["baseCss","PdsTableStyle0","pdsTableCss","PdsTableStyle1","PdsTable","exports","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":"gnDAAA,IAAMA,EAAU,yrDAChB,IAAAC,EAAeD,ECDf,IAAME,EAAc,qiDACpB,IAAAC,EAAeD,E,ICMFE,EAAQC,EAAA,uB,gRA4BqB,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,EAAI,CAAAC,IAAA,2CACHC,MAAO7D,KAAKE,aACZ4D,GAAI9D,KAAK+D,YACTC,KAAK,OACLC,WAAYjE,KAAKiE,WACjBC,SAAS,KAETR,EAAA,QAAAE,IAAA,6C,uHAjJa,I","ignoreList":[]}