@pine-ds/core 3.7.0 → 3.8.1

package/dist/cjs/pds-table-head-cell.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-table-head-cell.entry.cjs.js","mappings":"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","names":["h","Host","upSmall","downSmall"],"sources":["src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":[":host {\n  --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-100);\n\n  --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n  border-block-end: var(--border-head-cell-default);\n  color: var(--pine-color-text);\n  display: table-cell;\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size);\n  font-weight: var(--pine-font-weight-regular);\n  line-height: var(--pine-line-height-body);\n  padding: var(--pine-dimension-150);\n  position: relative;\n  text-align: start;\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n  background: var(--pine-color-background-container);\n  left: var(--pine-dimension-none);\n  position: sticky;\n  z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n  cursor: pointer;\n\n  pds-icon {\n    margin-inline-start: var(--pine-dimension-2xs);\n    padding-block-start: 2px;\n    position: absolute;\n  }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n  color: var(--pine-color-text-active);\n}\n\n// Text Alignment\n:host(.pds-table-head-cell--align-start) {\n  text-align: start;\n}\n\n:host(.pds-table-head-cell--align-center) {\n  text-align: center;\n}\n\n:host(.pds-table-head-cell--align-end) {\n  text-align: end;\n}\n\n:host(.pds-table-head-cell--align-justify) {\n  text-align: justify;\n}\n","import { Component, Element, Host, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-table-head-cell',\n  styleUrls: ['pds-table-head-cell.scss'],\n  shadow: true,\n})\nexport class PdsTableHeadCell {\n  @Element() hostElement: HTMLPdsTableHeadCellElement;\n  private tableRef: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private setupTimer: number | undefined;\n  private setupRetries: number = 0;\n\n  /**\n   * Sets the text alignment within the head cell.\n   */\n  @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Determines whether the table column is sortable when set to `true`.\n   */\n  @Prop() sortable: boolean;\n\n  /**\n   * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n   */\n  @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n  /**\n   * The direction of sorting.\n   */\n  @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n\n  /**\n   * Determines if the table is currently scrolling.\n   * @defaultValue false\n   */\n  @State() private tableScrolling: boolean = false;\n\n  /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n  @State() isSelected: boolean = false;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      // For responsive tables with fixed columns, set up scroll detection\n      // This enables the first column header to show a shadow when the table is scrolled horizontally\n      this.setupScrollListener();\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanupScrollListener();\n  }\n\n  private setupScrollListener() {\n    if (!this.tableRef) return;\n\n    // Query shadowRoot once and cache the container\n    const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n    if (container) {\n      // Container available immediately\n      this.scrollContainer = container;\n      this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n      this.handleScroll(); // Initial check\n      this.setupRetries = 0; // Reset counter on success\n    } else {\n      // Container not ready, set up timer for retry with bounds\n      this.setupTimer = window.setTimeout(() => {\n        if (this.scrollContainer) return; // Already found\n        this.setupRetries = (this.setupRetries || 0) + 1;\n        if (this.setupRetries <= 50) {\n          this.setupScrollListener();\n        } else {\n          console.warn('Failed to find responsive container after 50 attempts');\n        }\n      }, 100);\n    }\n  }\n\n  private cleanupScrollListener() {\n    if (this.scrollContainer) {\n      this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n      this.scrollContainer = null;\n    }\n\n    if (this.setupTimer !== undefined) {\n      window.clearTimeout(this.setupTimer);\n      this.setupTimer = undefined;\n    }\n\n    this.setupRetries = 0; // Reset retry counter\n  }\n\n  /**\n   * Handles scroll events to update fixed column shadow state.\n   * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n   * @private\n   */\n  private handleScroll = () => {\n    if (!this.scrollContainer) {\n      return;\n    }\n\n    try {\n      this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n    } catch (error) {\n      console.warn('Scroll handler error:', error);\n    }\n  };\n\n  private toggleSort = () => {\n    if (this.sortable) {\n      const column = this.hostElement.innerText.trim();\n      this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n\n      this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {\n        headCell.classList.remove('is-active');\n      });\n\n      this.hostElement.classList.toggle('is-active');\n      this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.cellAlign) {\n      classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);\n    }\n\n    if (this.sortable) {\n      classNames.push('is-sortable');\n    }\n\n    if (this.sortable && this.sortingDirection !== null) {\n      classNames.push('sort-' + this.sortingDirection);\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"columnheader\"\n        onClick={this.toggleSort}\n        part=\"head-cell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n        }\n      >\n        <slot></slot>\n        {this.sortable && (\n          <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} part=\"sort-icon\" />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-table-head-cell.entry.cjs.js","mappings":"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","names":["h","Host","upSmall","downSmall"],"sources":["src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":[":host {\n  --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-100);\n\n  --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n  border-block-end: var(--border-head-cell-default);\n  color: var(--pine-color-text);\n  display: table-cell;\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size);\n  font-weight: var(--pine-font-weight-regular);\n  line-height: var(--pine-line-height-body);\n  padding: var(--pine-dimension-150);\n  position: relative;\n  text-align: start;\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n  background: var(--pine-color-background-container);\n  left: var(--pine-dimension-none);\n  position: sticky;\n  z-index: var(--pine-z-index-raised);\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n  cursor: pointer;\n\n  pds-icon {\n    margin-inline-start: var(--pine-dimension-2xs);\n    padding-block-start: 2px;\n    position: absolute;\n  }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n  color: var(--pine-color-text-active);\n}\n\n// Text Alignment\n:host(.pds-table-head-cell--align-start) {\n  text-align: start;\n}\n\n:host(.pds-table-head-cell--align-center) {\n  text-align: center;\n}\n\n:host(.pds-table-head-cell--align-end) {\n  text-align: end;\n}\n\n:host(.pds-table-head-cell--align-justify) {\n  text-align: justify;\n}\n","import { Component, Element, Host, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-table-head-cell',\n  styleUrls: ['pds-table-head-cell.scss'],\n  shadow: true,\n})\nexport class PdsTableHeadCell {\n  @Element() hostElement: HTMLPdsTableHeadCellElement;\n  private tableRef: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private setupTimer: number | undefined;\n  private setupRetries: number = 0;\n\n  /**\n   * Sets the text alignment within the head cell.\n   */\n  @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Determines whether the table column is sortable when set to `true`.\n   */\n  @Prop() sortable: boolean;\n\n  /**\n   * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n   */\n  @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n  /**\n   * The direction of sorting.\n   */\n  @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n\n  /**\n   * Determines if the table is currently scrolling.\n   * @defaultValue false\n   */\n  @State() private tableScrolling: boolean = false;\n\n  /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n  @State() isSelected: boolean = false;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      // For responsive tables with fixed columns, set up scroll detection\n      // This enables the first column header to show a shadow when the table is scrolled horizontally\n      this.setupScrollListener();\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanupScrollListener();\n  }\n\n  private setupScrollListener() {\n    if (!this.tableRef) return;\n\n    // Query shadowRoot once and cache the container\n    const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n    if (container) {\n      // Container available immediately\n      this.scrollContainer = container;\n      this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n      this.handleScroll(); // Initial check\n      this.setupRetries = 0; // Reset counter on success\n    } else {\n      // Container not ready, set up timer for retry with bounds\n      this.setupTimer = window.setTimeout(() => {\n        if (this.scrollContainer) return; // Already found\n        this.setupRetries = (this.setupRetries || 0) + 1;\n        if (this.setupRetries <= 50) {\n          this.setupScrollListener();\n        } else {\n          console.warn('Failed to find responsive container after 50 attempts');\n        }\n      }, 100);\n    }\n  }\n\n  private cleanupScrollListener() {\n    if (this.scrollContainer) {\n      this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n      this.scrollContainer = null;\n    }\n\n    if (this.setupTimer !== undefined) {\n      window.clearTimeout(this.setupTimer);\n      this.setupTimer = undefined;\n    }\n\n    this.setupRetries = 0; // Reset retry counter\n  }\n\n  /**\n   * Handles scroll events to update fixed column shadow state.\n   * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n   * @private\n   */\n  private handleScroll = () => {\n    if (!this.scrollContainer) {\n      return;\n    }\n\n    try {\n      this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n    } catch (error) {\n      console.warn('Scroll handler error:', error);\n    }\n  };\n\n  private toggleSort = () => {\n    if (this.sortable) {\n      const column = this.hostElement.innerText.trim();\n      this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n\n      this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {\n        headCell.classList.remove('is-active');\n      });\n\n      this.hostElement.classList.toggle('is-active');\n      this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.cellAlign) {\n      classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);\n    }\n\n    if (this.sortable) {\n      classNames.push('is-sortable');\n    }\n\n    if (this.sortable && this.sortingDirection !== null) {\n      classNames.push('sort-' + this.sortingDirection);\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"columnheader\"\n        onClick={this.toggleSort}\n        part=\"head-cell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n        }\n      >\n        <slot></slot>\n        {this.sortable && (\n          <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} part=\"sort-icon\" />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-table-head-cell.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-table-head-cell.entry.cjs.js","sources":["src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":[":host {\n  --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-100);\n\n  --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n  border-block-end: var(--border-head-cell-default);\n  color: var(--pine-color-text);\n  display: table-cell;\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size);\n  font-weight: var(--pine-font-weight-regular);\n  line-height: var(--pine-line-height-body);\n  padding: var(--pine-dimension-150);\n  position: relative;\n  text-align: start;\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n  background: var(--pine-color-background-container);\n  left: var(--pine-dimension-none);\n  position: sticky;\n  z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n  cursor: pointer;\n\n  pds-icon {\n    margin-inline-start: var(--pine-dimension-2xs);\n    padding-block-start: 2px;\n    position: absolute;\n  }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n  color: var(--pine-color-text-active);\n}\n\n// Text Alignment\n:host(.pds-table-head-cell--align-start) {\n  text-align: start;\n}\n\n:host(.pds-table-head-cell--align-center) {\n  text-align: center;\n}\n\n:host(.pds-table-head-cell--align-end) {\n  text-align: end;\n}\n\n:host(.pds-table-head-cell--align-justify) {\n  text-align: justify;\n}\n","import { Component, Element, Host, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-table-head-cell',\n  styleUrls: ['pds-table-head-cell.scss'],\n  shadow: true,\n})\nexport class PdsTableHeadCell {\n  @Element() hostElement: HTMLPdsTableHeadCellElement;\n  private tableRef: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private setupTimer: number | undefined;\n  private setupRetries: number = 0;\n\n  /**\n   * Sets the text alignment within the head cell.\n   */\n  @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Determines whether the table column is sortable when set to `true`.\n   */\n  @Prop() sortable: boolean;\n\n  /**\n   * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n   */\n  @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n  /**\n   * The direction of sorting.\n   */\n  @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n\n  /**\n   * Determines if the table is currently scrolling.\n   * @defaultValue false\n   */\n  @State() private tableScrolling: boolean = false;\n\n  /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n  @State() isSelected: boolean = false;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      // For responsive tables with fixed columns, set up scroll detection\n      // This enables the first column header to show a shadow when the table is scrolled horizontally\n      this.setupScrollListener();\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanupScrollListener();\n  }\n\n  private setupScrollListener() {\n    if (!this.tableRef) return;\n\n    // Query shadowRoot once and cache the container\n    const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n    if (container) {\n      // Container available immediately\n      this.scrollContainer = container;\n      this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n      this.handleScroll(); // Initial check\n      this.setupRetries = 0; // Reset counter on success\n    } else {\n      // Container not ready, set up timer for retry with bounds\n      this.setupTimer = window.setTimeout(() => {\n        if (this.scrollContainer) return; // Already found\n        this.setupRetries = (this.setupRetries || 0) + 1;\n        if (this.setupRetries <= 50) {\n          this.setupScrollListener();\n        } else {\n          console.warn('Failed to find responsive container after 50 attempts');\n        }\n      }, 100);\n    }\n  }\n\n  private cleanupScrollListener() {\n    if (this.scrollContainer) {\n      this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n      this.scrollContainer = null;\n    }\n\n    if (this.setupTimer !== undefined) {\n      window.clearTimeout(this.setupTimer);\n      this.setupTimer = undefined;\n    }\n\n    this.setupRetries = 0; // Reset retry counter\n  }\n\n  /**\n   * Handles scroll events to update fixed column shadow state.\n   * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n   * @private\n   */\n  private handleScroll = () => {\n    if (!this.scrollContainer) {\n      return;\n    }\n\n    try {\n      this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n    } catch (error) {\n      console.warn('Scroll handler error:', error);\n    }\n  };\n\n  private toggleSort = () => {\n    if (this.sortable) {\n      const column = this.hostElement.innerText.trim();\n      this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n\n      this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {\n        headCell.classList.remove('is-active');\n      });\n\n      this.hostElement.classList.toggle('is-active');\n      this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.cellAlign) {\n      classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);\n    }\n\n    if (this.sortable) {\n      classNames.push('is-sortable');\n    }\n\n    if (this.sortable && this.sortingDirection !== null) {\n      classNames.push('sort-' + this.sortingDirection);\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"columnheader\"\n        onClick={this.toggleSort}\n        part=\"head-cell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n        }\n      >\n        <slot></slot>\n        {this.sortable && (\n          <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} part=\"sort-icon\" />\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","upSmall","downSmall"],"mappings":"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"}
+{"version":3,"file":"pds-table-head-cell.entry.cjs.js","sources":["src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":[":host {\n  --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-100);\n\n  --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n  border-block-end: var(--border-head-cell-default);\n  color: var(--pine-color-text);\n  display: table-cell;\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size);\n  font-weight: var(--pine-font-weight-regular);\n  line-height: var(--pine-line-height-body);\n  padding: var(--pine-dimension-150);\n  position: relative;\n  text-align: start;\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n  background: var(--pine-color-background-container);\n  left: var(--pine-dimension-none);\n  position: sticky;\n  z-index: var(--pine-z-index-raised);\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n  cursor: pointer;\n\n  pds-icon {\n    margin-inline-start: var(--pine-dimension-2xs);\n    padding-block-start: 2px;\n    position: absolute;\n  }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n  color: var(--pine-color-text-active);\n}\n\n// Text Alignment\n:host(.pds-table-head-cell--align-start) {\n  text-align: start;\n}\n\n:host(.pds-table-head-cell--align-center) {\n  text-align: center;\n}\n\n:host(.pds-table-head-cell--align-end) {\n  text-align: end;\n}\n\n:host(.pds-table-head-cell--align-justify) {\n  text-align: justify;\n}\n","import { Component, Element, Host, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-table-head-cell',\n  styleUrls: ['pds-table-head-cell.scss'],\n  shadow: true,\n})\nexport class PdsTableHeadCell {\n  @Element() hostElement: HTMLPdsTableHeadCellElement;\n  private tableRef: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private setupTimer: number | undefined;\n  private setupRetries: number = 0;\n\n  /**\n   * Sets the text alignment within the head cell.\n   */\n  @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Determines whether the table column is sortable when set to `true`.\n   */\n  @Prop() sortable: boolean;\n\n  /**\n   * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n   */\n  @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n  /**\n   * The direction of sorting.\n   */\n  @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n\n  /**\n   * Determines if the table is currently scrolling.\n   * @defaultValue false\n   */\n  @State() private tableScrolling: boolean = false;\n\n  /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n  @State() isSelected: boolean = false;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      // For responsive tables with fixed columns, set up scroll detection\n      // This enables the first column header to show a shadow when the table is scrolled horizontally\n      this.setupScrollListener();\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanupScrollListener();\n  }\n\n  private setupScrollListener() {\n    if (!this.tableRef) return;\n\n    // Query shadowRoot once and cache the container\n    const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n    if (container) {\n      // Container available immediately\n      this.scrollContainer = container;\n      this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n      this.handleScroll(); // Initial check\n      this.setupRetries = 0; // Reset counter on success\n    } else {\n      // Container not ready, set up timer for retry with bounds\n      this.setupTimer = window.setTimeout(() => {\n        if (this.scrollContainer) return; // Already found\n        this.setupRetries = (this.setupRetries || 0) + 1;\n        if (this.setupRetries <= 50) {\n          this.setupScrollListener();\n        } else {\n          console.warn('Failed to find responsive container after 50 attempts');\n        }\n      }, 100);\n    }\n  }\n\n  private cleanupScrollListener() {\n    if (this.scrollContainer) {\n      this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n      this.scrollContainer = null;\n    }\n\n    if (this.setupTimer !== undefined) {\n      window.clearTimeout(this.setupTimer);\n      this.setupTimer = undefined;\n    }\n\n    this.setupRetries = 0; // Reset retry counter\n  }\n\n  /**\n   * Handles scroll events to update fixed column shadow state.\n   * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n   * @private\n   */\n  private handleScroll = () => {\n    if (!this.scrollContainer) {\n      return;\n    }\n\n    try {\n      this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n    } catch (error) {\n      console.warn('Scroll handler error:', error);\n    }\n  };\n\n  private toggleSort = () => {\n    if (this.sortable) {\n      const column = this.hostElement.innerText.trim();\n      this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n\n      this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {\n        headCell.classList.remove('is-active');\n      });\n\n      this.hostElement.classList.toggle('is-active');\n      this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.cellAlign) {\n      classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);\n    }\n\n    if (this.sortable) {\n      classNames.push('is-sortable');\n    }\n\n    if (this.sortable && this.sortingDirection !== null) {\n      classNames.push('sort-' + this.sortingDirection);\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"columnheader\"\n        onClick={this.toggleSort}\n        part=\"head-cell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n        }\n      >\n        <slot></slot>\n        {this.sortable && (\n          <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} part=\"sort-icon\" />\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","upSmall","downSmall"],"mappings":"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"}

package/dist/cjs/pds-table-head.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DDTyvZD7.js');
 var closest = require('./closest-BZXvuB_Y.js');
 
-const pdsTableHeadCss = ":host{--border-head-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:1}:host pds-table-checkbox-cell{-webkit-border-after:var(--border-head-default);border-block-end:var(--border-head-default)}";
+const pdsTableHeadCss = ":host{--border-head-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host pds-table-checkbox-cell{-webkit-border-after:var(--border-head-default);border-block-end:var(--border-head-default)}";
 
 const PdsTableHead = class {
     constructor(hostRef) {

package/dist/cjs/pds-table-head.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-table-head.entry.cjs.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,ogBAAogB;;MCQ/gB,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAyBU,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/D,YAAA,MAAM,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;AAChE,YAAA,MAAM,QAAQ,GAAG,CAAA,EAAG,YAAY,CAAI,CAAA,EAAA,SAAS,EAAE;AAE/C,YAAA,OAAO,QAAQ;AACjB,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;YAClC,IAAI,CAAC,UAAU,GAAG,CAAE,EAAE,CAAC,MAA2B,CAAC,OAAO;AAC1D,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AACpC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,UAAmB,KAAI;AAC7C,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAE1B,IAAKA,eAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,WAAW,CAAC,EAAG;gBACjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;;;IAItC,mBAAmB,GAAA;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB;QAE5E,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iCAAiC,CAAC;YACnF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;;;IAIxC,MAAM,GAAA;QACJ,QACEC,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAA,EACzB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,KACxCD,OAAqB,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,eAAe,GAAG,EAAE,EAAA,EACxEA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACpC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,iBAAiB,EACxB,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,IAAI,EAAC,qBAAqB,EAAA,CAC1B,CACkB,CACvB,EACDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;","names":["closest","h","Host"],"sources":["src/components/pds-table/pds-table-head/pds-table-head.scss?tag=pds-table-head&encapsulation=shadow","src/components/pds-table/pds-table-head/pds-table-head.tsx"],"sourcesContent":[":host {\n  --border-head-default: var(--pine-border-width-thin) solid var(--pine-color-grey-100);\n\n  border-color: inherit;\n  box-sizing: border-box;\n  display: table-header-group;\n  vertical-align: middle;\n\n  // used for pds-checkbox-cell\n  // because it is in the ShadowDom\n  &::part(checkbox-cell) {\n    background-color: var(--pine-color-background-container);\n    inset-inline-start: var(--pine-dimension-none);\n    position: sticky;\n    z-index: 1;\n  }\n}\n\n:host pds-table-checkbox-cell {\n  border-block-end: var(--border-head-default);\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { closest } from '@utils/closest';\n\n@Component({\n  tag: 'pds-table-head',\n  styleUrls: ['pds-table-head.scss'],\n  shadow: true,\n})\nexport class PdsTableHead {\n  @Element() hostElement: HTMLPdsTableHeadElement;\n  private tableRef: HTMLPdsTableElement\n\n   /**\n    * Determines if the select all checkbox is in an indeterminate state.\n    */\n   @Prop({ mutable: true }) indeterminate?: boolean;\n\n   /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n   @Prop({mutable: true}) 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  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  private handleInput = (ev: Event) => {\n    this.isSelected = !(ev.target as HTMLInputElement).checked\n    this.handleSelect(this.isSelected)\n  };\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false\n\n    if ( closest('pds-table-head', this.hostElement) ) {\n      this.pdsTableSelectAll.emit({ isSelected });\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected)\n    }\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-head-cell:first-child');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"row\" part=\"head\">\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-head-cell part={this.tableRef.selectable ? 'checkbox-cell' : ''}>\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              indeterminate={this.indeterminate}\n              onInput={this.handleInput}\n              label={\"Select All Rows\"}\n              hideLabel={true}\n              checked={this.isSelected}\n              part=\"select-all-checkbox\"\n            />\n          </pds-table-head-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-table-head.entry.cjs.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,6hBAA6hB;;MCQxiB,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAyBU,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/D,YAAA,MAAM,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;AAChE,YAAA,MAAM,QAAQ,GAAG,CAAA,EAAG,YAAY,CAAI,CAAA,EAAA,SAAS,EAAE;AAE/C,YAAA,OAAO,QAAQ;AACjB,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;YAClC,IAAI,CAAC,UAAU,GAAG,CAAE,EAAE,CAAC,MAA2B,CAAC,OAAO;AAC1D,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AACpC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,UAAmB,KAAI;AAC7C,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAE1B,IAAKA,eAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,WAAW,CAAC,EAAG;gBACjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;;;IAItC,mBAAmB,GAAA;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB;QAE5E,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iCAAiC,CAAC;YACnF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;;;IAIxC,MAAM,GAAA;QACJ,QACEC,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAA,EACzB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,KACxCD,OAAqB,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,eAAe,GAAG,EAAE,EAAA,EACxEA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACpC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,iBAAiB,EACxB,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,IAAI,EAAC,qBAAqB,EAAA,CAC1B,CACkB,CACvB,EACDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;","names":["closest","h","Host"],"sources":["src/components/pds-table/pds-table-head/pds-table-head.scss?tag=pds-table-head&encapsulation=shadow","src/components/pds-table/pds-table-head/pds-table-head.tsx"],"sourcesContent":[":host {\n  --border-head-default: var(--pine-border-width-thin) solid var(--pine-color-grey-100);\n\n  border-color: inherit;\n  box-sizing: border-box;\n  display: table-header-group;\n  vertical-align: middle;\n\n  // used for pds-checkbox-cell\n  // because it is in the ShadowDom\n  &::part(checkbox-cell) {\n    background-color: var(--pine-color-background-container);\n    inset-inline-start: var(--pine-dimension-none);\n    position: sticky;\n    z-index: var(--pine-z-index-raised);\n  }\n}\n\n:host pds-table-checkbox-cell {\n  border-block-end: var(--border-head-default);\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { closest } from '@utils/closest';\n\n@Component({\n  tag: 'pds-table-head',\n  styleUrls: ['pds-table-head.scss'],\n  shadow: true,\n})\nexport class PdsTableHead {\n  @Element() hostElement: HTMLPdsTableHeadElement;\n  private tableRef: HTMLPdsTableElement\n\n   /**\n    * Determines if the select all checkbox is in an indeterminate state.\n    */\n   @Prop({ mutable: true }) indeterminate?: boolean;\n\n   /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n   @Prop({mutable: true}) 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  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  private handleInput = (ev: Event) => {\n    this.isSelected = !(ev.target as HTMLInputElement).checked\n    this.handleSelect(this.isSelected)\n  };\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false\n\n    if ( closest('pds-table-head', this.hostElement) ) {\n      this.pdsTableSelectAll.emit({ isSelected });\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected)\n    }\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-head-cell:first-child');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"row\" part=\"head\">\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-head-cell part={this.tableRef.selectable ? 'checkbox-cell' : ''}>\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              indeterminate={this.indeterminate}\n              onInput={this.handleInput}\n              label={\"Select All Rows\"}\n              hideLabel={true}\n              checked={this.isSelected}\n              part=\"select-all-checkbox\"\n            />\n          </pds-table-head-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-table-head.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-table-head.entry.cjs.js","sources":["src/components/pds-table/pds-table-head/pds-table-head.scss?tag=pds-table-head&encapsulation=shadow","src/components/pds-table/pds-table-head/pds-table-head.tsx"],"sourcesContent":[":host {\n  --border-head-default: var(--pine-border-width-thin) solid var(--pine-color-grey-100);\n\n  border-color: inherit;\n  box-sizing: border-box;\n  display: table-header-group;\n  vertical-align: middle;\n\n  // used for pds-checkbox-cell\n  // because it is in the ShadowDom\n  &::part(checkbox-cell) {\n    background-color: var(--pine-color-background-container);\n    inset-inline-start: var(--pine-dimension-none);\n    position: sticky;\n    z-index: 1;\n  }\n}\n\n:host pds-table-checkbox-cell {\n  border-block-end: var(--border-head-default);\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { closest } from '@utils/closest';\n\n@Component({\n  tag: 'pds-table-head',\n  styleUrls: ['pds-table-head.scss'],\n  shadow: true,\n})\nexport class PdsTableHead {\n  @Element() hostElement: HTMLPdsTableHeadElement;\n  private tableRef: HTMLPdsTableElement\n\n   /**\n    * Determines if the select all checkbox is in an indeterminate state.\n    */\n   @Prop({ mutable: true }) indeterminate?: boolean;\n\n   /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n   @Prop({mutable: true}) 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  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  private handleInput = (ev: Event) => {\n    this.isSelected = !(ev.target as HTMLInputElement).checked\n    this.handleSelect(this.isSelected)\n  };\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false\n\n    if ( closest('pds-table-head', this.hostElement) ) {\n      this.pdsTableSelectAll.emit({ isSelected });\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected)\n    }\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-head-cell:first-child');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"row\" part=\"head\">\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-head-cell part={this.tableRef.selectable ? 'checkbox-cell' : ''}>\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              indeterminate={this.indeterminate}\n              onInput={this.handleInput}\n              label={\"Select All Rows\"}\n              hideLabel={true}\n              checked={this.isSelected}\n              part=\"select-all-checkbox\"\n            />\n          </pds-table-head-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["closest","h","Host"],"mappings":";;;;;AAAA,MAAM,eAAe,GAAG,ogBAAogB;;MCQ/gB,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAyBU,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/D,YAAA,MAAM,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;AAChE,YAAA,MAAM,QAAQ,GAAG,CAAA,EAAG,YAAY,CAAI,CAAA,EAAA,SAAS,EAAE;AAE/C,YAAA,OAAO,QAAQ;AACjB,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;YAClC,IAAI,CAAC,UAAU,GAAG,CAAE,EAAE,CAAC,MAA2B,CAAC,OAAO;AAC1D,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AACpC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,UAAmB,KAAI;AAC7C,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAE1B,IAAKA,eAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,WAAW,CAAC,EAAG;gBACjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;;;IAItC,mBAAmB,GAAA;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB;QAE5E,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iCAAiC,CAAC;YACnF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;;;IAIxC,MAAM,GAAA;QACJ,QACEC,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAA,EACzB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,KACxCD,OAAqB,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,eAAe,GAAG,EAAE,EAAA,EACxEA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACpC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,iBAAiB,EACxB,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,IAAI,EAAC,qBAAqB,EAAA,CAC1B,CACkB,CACvB,EACDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}
+{"version":3,"file":"pds-table-head.entry.cjs.js","sources":["src/components/pds-table/pds-table-head/pds-table-head.scss?tag=pds-table-head&encapsulation=shadow","src/components/pds-table/pds-table-head/pds-table-head.tsx"],"sourcesContent":[":host {\n  --border-head-default: var(--pine-border-width-thin) solid var(--pine-color-grey-100);\n\n  border-color: inherit;\n  box-sizing: border-box;\n  display: table-header-group;\n  vertical-align: middle;\n\n  // used for pds-checkbox-cell\n  // because it is in the ShadowDom\n  &::part(checkbox-cell) {\n    background-color: var(--pine-color-background-container);\n    inset-inline-start: var(--pine-dimension-none);\n    position: sticky;\n    z-index: var(--pine-z-index-raised);\n  }\n}\n\n:host pds-table-checkbox-cell {\n  border-block-end: var(--border-head-default);\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { closest } from '@utils/closest';\n\n@Component({\n  tag: 'pds-table-head',\n  styleUrls: ['pds-table-head.scss'],\n  shadow: true,\n})\nexport class PdsTableHead {\n  @Element() hostElement: HTMLPdsTableHeadElement;\n  private tableRef: HTMLPdsTableElement\n\n   /**\n    * Determines if the select all checkbox is in an indeterminate state.\n    */\n   @Prop({ mutable: true }) indeterminate?: boolean;\n\n   /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n   @Prop({mutable: true}) 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  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  private handleInput = (ev: Event) => {\n    this.isSelected = !(ev.target as HTMLInputElement).checked\n    this.handleSelect(this.isSelected)\n  };\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false\n\n    if ( closest('pds-table-head', this.hostElement) ) {\n      this.pdsTableSelectAll.emit({ isSelected });\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected)\n    }\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-head-cell:first-child');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"row\" part=\"head\">\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-head-cell part={this.tableRef.selectable ? 'checkbox-cell' : ''}>\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              indeterminate={this.indeterminate}\n              onInput={this.handleInput}\n              label={\"Select All Rows\"}\n              hideLabel={true}\n              checked={this.isSelected}\n              part=\"select-all-checkbox\"\n            />\n          </pds-table-head-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["closest","h","Host"],"mappings":";;;;;AAAA,MAAM,eAAe,GAAG,6hBAA6hB;;MCQxiB,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAyBU,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/D,YAAA,MAAM,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;AAChE,YAAA,MAAM,QAAQ,GAAG,CAAA,EAAG,YAAY,CAAI,CAAA,EAAA,SAAS,EAAE;AAE/C,YAAA,OAAO,QAAQ;AACjB,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;YAClC,IAAI,CAAC,UAAU,GAAG,CAAE,EAAE,CAAC,MAA2B,CAAC,OAAO;AAC1D,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AACpC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,UAAmB,KAAI;AAC7C,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAE1B,IAAKA,eAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,WAAW,CAAC,EAAG;gBACjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;;;IAItC,mBAAmB,GAAA;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB;QAE5E,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iCAAiC,CAAC;YACnF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;;;IAIxC,MAAM,GAAA;QACJ,QACEC,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAA,EACzB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,KACxCD,OAAqB,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,eAAe,GAAG,EAAE,EAAA,EACxEA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACpC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,iBAAiB,EACxB,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,IAAI,EAAC,qBAAqB,EAAA,CAC1B,CACkB,CACvB,EACDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}

package/dist/cjs/pds-table-row.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DDTyvZD7.js');
 var closest = require('./closest-BZXvuB_Y.js');
 
-const pdsTableRowCss = ":host{--color-background-interactive:var(--pine-color-grey-200);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:1}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}";
+const pdsTableRowCss = ":host{--color-background-interactive:var(--pine-color-grey-200);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}";
 
 const PdsTableRow = class {
     constructor(hostRef) {

package/dist/cjs/pds-table-row.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-table-row.entry.cjs.js","mappings":"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","names":["closest","h","Host"],"sources":["src/components/pds-table/pds-table-row/pds-table-row.scss?tag=pds-table-row&encapsulation=shadow","src/components/pds-table/pds-table-row/pds-table-row.tsx"],"sourcesContent":[":host {\n  --color-background-interactive: var(--pine-color-grey-200);\n\n  border-color: inherit;\n  display: table-row;\n  vertical-align: inherit;\n\n  // used for pds-checkbox-cell\n  // because it is in the ShadowDom\n  &::part(checkbox-cell) {\n    background-color: var(--pine-color-background-container);\n    inset-inline-start: var(--pine-dimension-none);\n    position: sticky;\n    z-index: 1;\n  }\n}\n\n:host(:hover),\n:host(:hover)::part(checkbox-cell),\n:host(:hover) ::slotted(pds-table-cell),\n:host(.is-selected),\n:host(.is-selected)::part(checkbox-cell),\n:host(.is-selected) ::slotted(pds-table-cell) {\n  background: var(--color-background-interactive);\n}\n","import { Component, Element, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\n\nimport { closest } from '../../../utils/closest';\n\n@Component({\n  tag: 'pds-table-row',\n  styleUrls: ['pds-table-row.scss'],\n  shadow: true,\n})\nexport class PdsTableRow {\n  @Element() hostElement: HTMLPdsTableRowElement;\n  private tableRef: HTMLPdsTableElement;\n\n  /**\n    * Determines if the row selected is in an indeterminate state.\n    */\n  @Prop({ mutable: true }) indeterminate?: boolean;\n\n  /**\n   * Determines if the table row is currently selected.\n   */\n  @Prop({ mutable: true }) isSelected?: boolean;\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableRowSelected: EventEmitter<{ rowIndex: number; isSelected: boolean; }>;\n\n  private handleClick = () => {\n    this.isSelected = !this.isSelected; // Toggle the selected state\n    this.handleSelect(this.isSelected);\n  }\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false;\n\n    if (!closest('pds-table-head', this.hostElement)) {\n      const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement)\n      this.pdsTableRowSelected.emit({\n        rowIndex,\n        isSelected,\n      })\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.isSelected) {\n      classNames.push(\"is-selected\");\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-cell');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected);\n    }\n  }\n\n  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"row\"\n        part=\"row\"\n      >\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell'} class={this.tableRef.selectable ? 'has-checkbox' : ''} >\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              onClick={this.handleClick}\n              indeterminate={this.indeterminate}\n              label={\"Select Row\"}\n              hideLabel={true}\n              checked={this.isSelected}\n              part=\"row-checkbox\"\n            />\n          </pds-table-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-table-row.entry.cjs.js","mappings":"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","names":["closest","h","Host"],"sources":["src/components/pds-table/pds-table-row/pds-table-row.scss?tag=pds-table-row&encapsulation=shadow","src/components/pds-table/pds-table-row/pds-table-row.tsx"],"sourcesContent":[":host {\n  --color-background-interactive: var(--pine-color-grey-200);\n\n  border-color: inherit;\n  display: table-row;\n  vertical-align: inherit;\n\n  // used for pds-checkbox-cell\n  // because it is in the ShadowDom\n  &::part(checkbox-cell) {\n    background-color: var(--pine-color-background-container);\n    inset-inline-start: var(--pine-dimension-none);\n    position: sticky;\n    z-index: var(--pine-z-index-raised);\n  }\n}\n\n:host(:hover),\n:host(:hover)::part(checkbox-cell),\n:host(:hover) ::slotted(pds-table-cell),\n:host(.is-selected),\n:host(.is-selected)::part(checkbox-cell),\n:host(.is-selected) ::slotted(pds-table-cell) {\n  background: var(--color-background-interactive);\n}\n","import { Component, Element, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\n\nimport { closest } from '../../../utils/closest';\n\n@Component({\n  tag: 'pds-table-row',\n  styleUrls: ['pds-table-row.scss'],\n  shadow: true,\n})\nexport class PdsTableRow {\n  @Element() hostElement: HTMLPdsTableRowElement;\n  private tableRef: HTMLPdsTableElement;\n\n  /**\n    * Determines if the row selected is in an indeterminate state.\n    */\n  @Prop({ mutable: true }) indeterminate?: boolean;\n\n  /**\n   * Determines if the table row is currently selected.\n   */\n  @Prop({ mutable: true }) isSelected?: boolean;\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableRowSelected: EventEmitter<{ rowIndex: number; isSelected: boolean; }>;\n\n  private handleClick = () => {\n    this.isSelected = !this.isSelected; // Toggle the selected state\n    this.handleSelect(this.isSelected);\n  }\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false;\n\n    if (!closest('pds-table-head', this.hostElement)) {\n      const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement)\n      this.pdsTableRowSelected.emit({\n        rowIndex,\n        isSelected,\n      })\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.isSelected) {\n      classNames.push(\"is-selected\");\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-cell');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected);\n    }\n  }\n\n  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"row\"\n        part=\"row\"\n      >\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell'} class={this.tableRef.selectable ? 'has-checkbox' : ''} >\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              onClick={this.handleClick}\n              indeterminate={this.indeterminate}\n              label={\"Select Row\"}\n              hideLabel={true}\n              checked={this.isSelected}\n              part=\"row-checkbox\"\n            />\n          </pds-table-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-table-row.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-table-row.entry.cjs.js","sources":["src/components/pds-table/pds-table-row/pds-table-row.scss?tag=pds-table-row&encapsulation=shadow","src/components/pds-table/pds-table-row/pds-table-row.tsx"],"sourcesContent":[":host {\n  --color-background-interactive: var(--pine-color-grey-200);\n\n  border-color: inherit;\n  display: table-row;\n  vertical-align: inherit;\n\n  // used for pds-checkbox-cell\n  // because it is in the ShadowDom\n  &::part(checkbox-cell) {\n    background-color: var(--pine-color-background-container);\n    inset-inline-start: var(--pine-dimension-none);\n    position: sticky;\n    z-index: 1;\n  }\n}\n\n:host(:hover),\n:host(:hover)::part(checkbox-cell),\n:host(:hover) ::slotted(pds-table-cell),\n:host(.is-selected),\n:host(.is-selected)::part(checkbox-cell),\n:host(.is-selected) ::slotted(pds-table-cell) {\n  background: var(--color-background-interactive);\n}\n","import { Component, Element, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\n\nimport { closest } from '../../../utils/closest';\n\n@Component({\n  tag: 'pds-table-row',\n  styleUrls: ['pds-table-row.scss'],\n  shadow: true,\n})\nexport class PdsTableRow {\n  @Element() hostElement: HTMLPdsTableRowElement;\n  private tableRef: HTMLPdsTableElement;\n\n  /**\n    * Determines if the row selected is in an indeterminate state.\n    */\n  @Prop({ mutable: true }) indeterminate?: boolean;\n\n  /**\n   * Determines if the table row is currently selected.\n   */\n  @Prop({ mutable: true }) isSelected?: boolean;\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableRowSelected: EventEmitter<{ rowIndex: number; isSelected: boolean; }>;\n\n  private handleClick = () => {\n    this.isSelected = !this.isSelected; // Toggle the selected state\n    this.handleSelect(this.isSelected);\n  }\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false;\n\n    if (!closest('pds-table-head', this.hostElement)) {\n      const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement)\n      this.pdsTableRowSelected.emit({\n        rowIndex,\n        isSelected,\n      })\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.isSelected) {\n      classNames.push(\"is-selected\");\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-cell');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected);\n    }\n  }\n\n  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"row\"\n        part=\"row\"\n      >\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell'} class={this.tableRef.selectable ? 'has-checkbox' : ''} >\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              onClick={this.handleClick}\n              indeterminate={this.indeterminate}\n              label={\"Select Row\"}\n              hideLabel={true}\n              checked={this.isSelected}\n              part=\"row-checkbox\"\n            />\n          </pds-table-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["closest","h","Host"],"mappings":"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"}
+{"version":3,"file":"pds-table-row.entry.cjs.js","sources":["src/components/pds-table/pds-table-row/pds-table-row.scss?tag=pds-table-row&encapsulation=shadow","src/components/pds-table/pds-table-row/pds-table-row.tsx"],"sourcesContent":[":host {\n  --color-background-interactive: var(--pine-color-grey-200);\n\n  border-color: inherit;\n  display: table-row;\n  vertical-align: inherit;\n\n  // used for pds-checkbox-cell\n  // because it is in the ShadowDom\n  &::part(checkbox-cell) {\n    background-color: var(--pine-color-background-container);\n    inset-inline-start: var(--pine-dimension-none);\n    position: sticky;\n    z-index: var(--pine-z-index-raised);\n  }\n}\n\n:host(:hover),\n:host(:hover)::part(checkbox-cell),\n:host(:hover) ::slotted(pds-table-cell),\n:host(.is-selected),\n:host(.is-selected)::part(checkbox-cell),\n:host(.is-selected) ::slotted(pds-table-cell) {\n  background: var(--color-background-interactive);\n}\n","import { Component, Element, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\n\nimport { closest } from '../../../utils/closest';\n\n@Component({\n  tag: 'pds-table-row',\n  styleUrls: ['pds-table-row.scss'],\n  shadow: true,\n})\nexport class PdsTableRow {\n  @Element() hostElement: HTMLPdsTableRowElement;\n  private tableRef: HTMLPdsTableElement;\n\n  /**\n    * Determines if the row selected is in an indeterminate state.\n    */\n  @Prop({ mutable: true }) indeterminate?: boolean;\n\n  /**\n   * Determines if the table row is currently selected.\n   */\n  @Prop({ mutable: true }) isSelected?: boolean;\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableRowSelected: EventEmitter<{ rowIndex: number; isSelected: boolean; }>;\n\n  private handleClick = () => {\n    this.isSelected = !this.isSelected; // Toggle the selected state\n    this.handleSelect(this.isSelected);\n  }\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false;\n\n    if (!closest('pds-table-head', this.hostElement)) {\n      const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement)\n      this.pdsTableRowSelected.emit({\n        rowIndex,\n        isSelected,\n      })\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.isSelected) {\n      classNames.push(\"is-selected\");\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-cell');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected);\n    }\n  }\n\n  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"row\"\n        part=\"row\"\n      >\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell'} class={this.tableRef.selectable ? 'has-checkbox' : ''} >\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              onClick={this.handleClick}\n              indeterminate={this.indeterminate}\n              label={\"Select Row\"}\n              hideLabel={true}\n              checked={this.isSelected}\n              part=\"row-checkbox\"\n            />\n          </pds-table-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["closest","h","Host"],"mappings":"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"}

package/dist/cjs/pds-table.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DDTyvZD7.js');
 
-const pdsTableCss = "@charset \"UTF-8\";:host{--color-background-default:var(--pine-color-white);background:var(--color-background-default);border-collapse:separate;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(:focus-visible){outline:var(--pine-outline-focus)}:host(.pds-table-responsive-host){border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;max-width:100% !important;overflow:hidden !important;position:relative !important;width:100% !important}.pds-table-responsive-container{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;overflow-x:auto !important;overflow-y:visible !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper .pds-table{display:table !important;min-width:-webkit-max-content !important;min-width:-moz-max-content !important;min-width:max-content !important;table-layout:auto !important;white-space:nowrap !important;width:100% !important}.scroll-shadow-left,.scroll-shadow-right{height:100%;opacity:0;pointer-events:none;position:absolute;top:0;-webkit-transition:opacity 0.1s ease;transition:opacity 0.1s ease;width:4px;z-index:10}.scroll-shadow-left{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);border-bottom-left-radius:inherit;border-top-left-radius:inherit;left:0}.scroll-shadow-right{background:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);border-bottom-right-radius:inherit;border-top-right-radius:inherit;right:0}";
+const pdsTableCss = "@charset \"UTF-8\";:host{--color-background-default:var(--pine-color-white);background:var(--color-background-default);border-collapse:separate;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(:focus-visible){outline:var(--pine-outline-focus)}:host(.pds-table-responsive-host){border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;max-width:100% !important;overflow:hidden !important;position:relative !important;width:100% !important}.pds-table-responsive-container{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;overflow-x:auto !important;overflow-y:visible !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper .pds-table{display:table !important;min-width:-webkit-max-content !important;min-width:-moz-max-content !important;min-width:max-content !important;table-layout:auto !important;white-space:nowrap !important;width:100% !important}.scroll-shadow-left,.scroll-shadow-right{height:100%;opacity:0;pointer-events:none;position:absolute;top:0;-webkit-transition:opacity 0.1s ease;transition:opacity 0.1s ease;width:4px;z-index:var(--pine-z-index)}.scroll-shadow-left{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);border-bottom-left-radius:inherit;border-top-left-radius:inherit;left:0}.scroll-shadow-right{background:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);border-bottom-right-radius:inherit;border-top-right-radius:inherit;right:0}";
 
 const PdsTable = class {
     constructor(hostRef) {

package/dist/cjs/pds-table.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-table.entry.cjs.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,07DAA07D;;MCOj8D,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAOU,QAAA,IAAe,CAAA,eAAA,GAAuB,IAAI;AAC1C,QAAA,IAAuB,CAAA,uBAAA,GAAwB,IAAI;AACnD,QAAA,IAAuB,CAAA,uBAAA,GAAwB,IAAI;AACnD,QAAA,IAAyB,CAAA,yBAAA,GAA0B,IAAI;AACvD,QAAA,IAAmB,CAAA,mBAAA,GAAwB,IAAI;AA2BvD;;;AAGG;AACM,QAAA,IAAa,CAAA,aAAA,GAAkB,IAAI;AAE5C;;;AAGG;AACM,QAAA,IAAgB,CAAA,gBAAA,GAAmB,KAAK;AA0PlD;IA7OC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI;;IAG3B,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,wBAAwB,EAAE;;;IAInC,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,IAAI,CAAC,mBAAmB,EAAE;AAC1B,YAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI;;;AAInC;;;;;;;;;;;;;;;AAeG;IACK,wBAAwB,GAAA;;AAC9B,QAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,iCAAiC,CAAgB;AACrG,QAAA,MAAM,UAAU,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,qBAAqB,CAAgB;AAC1F,QAAA,MAAM,WAAW,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,sBAAsB,CAAgB;AAE5F,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW;YAAE;;AAG/C,QAAA,IAAI,CAAC,eAAe,GAAG,SAAS;AAEhC;;;;AAIG;AACH,QAAA,IAAI,CAAC,uBAAuB,GAAG,MAAK;YAClC,IAAI,CAAC,IAAI,CAAC,eAAe;gBAAE;AAE3B,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,UAAU;AAClD,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW;;YAGzF,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,GAAG,GAAG,GAAG;;YAG5E,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,aAAa,GAAG,CAAC,IAAI,UAAU,GAAG,aAAa,GAAG,CAAC,IAAI,GAAG,GAAG,GAAG;AAC/F,SAAC;;AAGD,QAAA,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;QAGhG,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,cAAc,EAAE;AAC1D,YAAA,IAAI;AACF,gBAAA,IAAI,CAAC,yBAAyB,GAAG,IAAI,cAAc,CAAC,MAAK;;oBACvD,CAAA,EAAA,GAAA,IAAI,CAAC,uBAAuB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;AAClC,iBAAC,CAAC;gBACF,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC;;YAC5D,OAAO,KAAK,EAAE;;;;;;AAOlB,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AACjC,YAAA,IAAI,CAAC,uBAAuB,GAAG,MAAK;;gBAClC,CAAA,EAAA,GAAA,IAAI,CAAC,uBAAuB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;AAClC,aAAC;YACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC;;;AAIjE,QAAA,IAAI,CAAC,mBAAmB,GAAG,MAAK;YAC9B,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,uBAAuB,EAAE;gBACxD,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC;AAChF,gBAAA,IAAI,CAAC,eAAe,GAAG,IAAI;;AAG7B,YAAA,IAAI,IAAI,CAAC,yBAAyB,EAAE;AAClC,gBAAA,IAAI,CAAC,yBAAyB,CAAC,UAAU,EAAE;AAC3C,gBAAA,IAAI,CAAC,yBAAyB,GAAG,IAAI;;YAGvC,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,CAAC,uBAAuB,EAAE;gBACjE,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC;AAClE,gBAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI;;AAGrC,YAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI;AACrC,SAAC;;QAGD,IAAI,CAAC,uBAAuB,EAAE;;IAIxB,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,CAAC,WAAW,CAAC;AAEhC,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;AAG/B,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;AAGlC,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGtB,SAAS,CAAC,MAAc,EAAE,SAAyB,EAAA;QACzD,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;;AAGzD,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;;AAGzE,QAAA,MAAM,iBAAiB,GAAkB,KAAK,CAAC,IAAI,CACjD,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,+BAA+B,CAAC,CAC1D;QAED,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,IAAI,CAC7C,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,MAAM,CAC3C;QAED,IAAI,CAAC,gBAAgB,EAAE;AACrB,YAAA,OAAO,CAAC,IAAI,CAAC,WAAW,MAAM,CAAA,YAAA,CAAc,CAAC;YAC7C;;QAGF,MAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;;QAG/D,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AACtB,YAAA,MAAM,MAAM,GAAG,CAAC,CAAC,aAAa,CAAC,CAA4B,yBAAA,EAAA,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE;AACjG,YAAA,MAAM,MAAM,GAAG,CAAC,CAAC,aAAa,CAAC,CAA4B,yBAAA,EAAA,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE;AAEjG,YAAA,IAAI,SAAS,KAAK,KAAK,EAAE;AACvB,gBAAA,OAAO,MAAM,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;;iBAClE;AACL,gBAAA,OAAO,MAAM,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;;AAE3E,SAAC,CAAC;;AAGF,QAAA,SAAS,CAAC,SAAS,GAAG,EAAE;AACxB,QAAA,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACxB,YAAA,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC;AAC5B,SAAC,CAAC;;AAIJ,IAAA,eAAe,CAAC,KAAiE,EAAA;AAC/E,QAAA,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,MAAM;QAClC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;QAC9C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM;AACxC,QAAA,IAAI,CAAC,gBAAgB,GAAG,SAAS;;AAInC,IAAA,oBAAoB,CAAC,KAA2C,EAAA;QAC9D,IAAI,KAAK,CAAC,gBAAgB;YAAE;QAE5B,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;AAC5D,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAE5E,QAAA,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;YACxB,GAAG,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU;AAC1C,SAAC,CAAC;;IAIJ,MAAM,iBAAiB,CAAC,KAA6D,EAAA;QACnF,IAAI,KAAK,CAAC,gBAAgB;YAAE;QAE5B,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,CAAC;QAC9D,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,UAAU,CAAC;QAC/E,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC;QACjF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;AAC5D,QAAA,IAAI,CAAC,YAAY;YAAE;QAEnB,MAAM,cAAc,GAAG,YAAY,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC;AAC5E,QAAA,cAAc,CAAC,OAAO,GAAG,eAAe;QACxC,cAAc,CAAC,aAAa,GAAG,CAAC,eAAe,IAAI,CAAC,gBAAgB;;IAGtE,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,QACEA,OAAA,CAACC,UAAI,EAAA,EACH,KAAK,EAAC,mDAAmD,EACzD,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,wBAAwB,EAAA,EAE7BD,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,oBAAoB,EAAO,CAAA,EAChEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,qBAAqB,EAAO,CAAA,EAClEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,sBAAsB,EAAA,EACrEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAC,oBAAoB,EAAA,EACjEA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,aAAa,EAAA,EAC/CA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACT,CACF,CACF,CACD;;QAIX,QACEA,OAAA,CAACC,UAAI,EAAA,EACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,OAAO,EAAA,EAEZD,OAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACR;;;;;;;;","names":["h","Host"],"sources":["src/components/pds-table/pds-table.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.tsx"],"sourcesContent":[":host {\n  --color-background-default: var(--pine-color-white);\n\n  background: var(--color-background-default);\n  border-collapse: separate;\n  border-radius: inherit;\n  box-sizing: border-box;\n  display: table;\n  width: 100%;\n}\n\n:host(:focus-visible) {\n  outline: var(--pine-outline-focus);\n}\n\n/*\n * Responsive Table Architecture\n *\n * When responsive=true, the table uses a nested structure to provide horizontal scrolling\n * while maintaining proper width behavior and scroll shadows:\n *\n * Host (.pds-table-responsive-host)\n * ├── Shadow Left (positioned fixed to left edge)\n * ├── Shadow Right (positioned fixed to right edge)\n * └── Container (.pds-table-responsive-container)\n *     └── Wrapper (.pds-table-responsive-wrapper)\n *         └── Table (.pds-table)\n *\n * - Host: Constrains everything to parent width, clips shadows to border-radius\n * - Shadows: Stay fixed during scroll, provide visual scroll indicators\n * - Container: Handles horizontal scrolling (overflow-x: auto)\n * - Table: Expands to full width or scrolls based on content\n */\n:host(.pds-table-responsive-host) {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  max-width: 100% !important;\n  overflow: hidden !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-container {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  overflow-x: auto !important;\n  overflow-y: visible !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper .pds-table {\n  display: table !important;\n  min-width: max-content !important;\n  table-layout: auto !important;\n  white-space: nowrap !important;\n  width: 100% !important;\n}\n\n/* Shadows positioned relative to host (non-scrolling), covering container edges */\n.scroll-shadow-left,\n.scroll-shadow-right {\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  transition: opacity 0.1s ease;\n  width: 4px;\n  z-index: 10;\n}\n\n.scroll-shadow-left {\n  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-left-radius: inherit;\n  border-top-left-radius: inherit;\n  left: 0;\n}\n\n.scroll-shadow-right {\n  background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-right-radius: inherit;\n  border-top-right-radius: inherit;\n  right: 0;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrls: ['pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private _responsiveHandleScroll: (() => void) | null = null;\n  private _responsiveHandleResize: (() => void) | null = null;\n  private _responsiveResizeObserver: ResizeObserver | null = null;\n  private _teardownResponsive: (() => void) | null = null;\n\n  /**\n   * Determines if the table displays with reduced table cell padding.\n   */\n  @Prop() compact: boolean;\n\n  /**\n   * A unique identifier used for the table `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enables the table to be responsive by horizontally scrolling on smaller screens.\n   */\n  @Prop() responsive: boolean;\n\n  /**\n   * Determines if the should display a fixed first column.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if the table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  /**\n   * The name of the column being sorted.\n   * @defaultValue null\n   */\n  @State() sortingColumn: string | null = null;\n\n  /**\n   * The direction of sorting.\n   * @defaultValue 'asc'\n   */\n  @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n   */\n  @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  componentWillLoad() {\n    this.sortingColumn = null;\n  }\n\n  componentDidLoad() {\n    if (this.responsive) {\n      this.setupResponsiveScrolling();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._teardownResponsive) {\n      this._teardownResponsive();\n      this._teardownResponsive = null;\n    }\n  }\n\n  /**\n   * Sets up responsive scrolling behavior for the table.\n   *\n   * This method creates a horizontal scrolling system where:\n   * - The table content can scroll horizontally when it exceeds the container width\n   * - Scroll shadows appear at the left/right edges to indicate scrollable content\n   * - Fixed columns remain sticky during horizontal scrolling\n   * - Shadows respect border-radius and don't appear when there's nothing to scroll\n   *\n   * Architecture:\n   * - Host element: Contains everything, respects parent constraints\n   * - Container element: Handles horizontal scrolling (overflow-x: auto)\n   * - Shadow elements: Positioned fixed relative to host, show scroll indicators\n   *\n   * @private\n   */\n  private setupResponsiveScrolling() {\n    const container = this.el.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n    const leftShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-left') as HTMLElement;\n    const rightShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-right') as HTMLElement;\n\n    if (!container || !leftShadow || !rightShadow) return;\n\n    // Store container reference for cleanup\n    this.scrollContainer = container;\n\n    /**\n     * Updates the visibility of scroll shadows based on current scroll position.\n     * Left shadow: Shows when scrolled away from start (hidden if fixedColumn is enabled)\n     * Right shadow: Shows when there's content to scroll and not at the end\n     */\n    this._responsiveHandleScroll = () => {\n      if (!this.scrollContainer) return;\n\n      const scrollLeft = this.scrollContainer.scrollLeft;\n      const maxScrollLeft = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\n\n      // Show left shadow when scrolled away from start, but not if there's a fixed column\n      leftShadow.style.opacity = (scrollLeft > 0 && !this.fixedColumn) ? '1' : '0';\n\n      // Show right shadow only if there's content to scroll AND not at end\n      rightShadow.style.opacity = (maxScrollLeft > 0 && scrollLeft < maxScrollLeft - 1) ? '1' : '0';\n    };\n\n    // Add scroll event listener to container element\n    this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });\n\n    // Add resize observer to update shadows when container size changes\n    if (typeof window !== 'undefined' && window.ResizeObserver) {\n      try {\n        this._responsiveResizeObserver = new ResizeObserver(() => {\n          this._responsiveHandleScroll?.();\n        });\n        this._responsiveResizeObserver.observe(this.scrollContainer);\n      } catch (error) {\n        // ResizeObserver not available in some environments (e.g., tests)\n        // Fall back to window resize listener only\n      }\n    }\n\n    // Listen for window resize as fallback\n    if (typeof window !== 'undefined') {\n      this._responsiveHandleResize = () => {\n        this._responsiveHandleScroll?.();\n      };\n      window.addEventListener('resize', this._responsiveHandleResize);\n    }\n\n    // Create teardown function for cleanup\n    this._teardownResponsive = () => {\n      if (this.scrollContainer && this._responsiveHandleScroll) {\n        this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);\n        this.scrollContainer = null;\n      }\n\n      if (this._responsiveResizeObserver) {\n        this._responsiveResizeObserver.disconnect();\n        this._responsiveResizeObserver = null;\n      }\n\n      if (typeof window !== 'undefined' && this._responsiveHandleResize) {\n        window.removeEventListener('resize', this._responsiveHandleResize);\n        this._responsiveHandleResize = null;\n      }\n\n      this._responsiveHandleScroll = null;\n    };\n\n    // Initial check after setup\n    this._responsiveHandleScroll();\n  }\n\n\n  private classNames() {\n    const classNames = ['pds-table'];\n\n    if (this.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.responsive) {\n      classNames.push('is-responsive');\n    }\n\n    return classNames.join('  ');\n  }\n\n  private sortTable(column: string, direction: 'asc' | 'desc') {\n    const tableBody = this.el.querySelector('pds-table-body');\n\n    // Get the rows in the table body\n    const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n    // Find the column index based on the column name\n    const columnHeaderCells: HTMLElement[] = Array.from(\n      this.el.querySelectorAll('pds-table-head-cell[sortable]')\n    );\n\n    const columnHeaderCell = columnHeaderCells.find(\n      (cell) => cell.innerText.trim() === column\n    );\n\n    if (!columnHeaderCell) {\n      console.warn(`Column \"${column}\" not found.`);\n      return;\n    }\n\n    const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n    // Sort the rows based on the content of the specified column\n    tableRows.sort((a, b) => {\n      const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n      const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n      if (direction === 'asc') {\n        return valueA.localeCompare(valueB, undefined, { sensitivity: 'base' });\n      } else {\n        return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });\n      }\n    });\n\n    // Clear and append the sorted rows back to the table body\n    tableBody.innerHTML = '';\n    tableRows.forEach((row) => {\n      tableBody.appendChild(row);\n    });\n  }\n\n  @Listen('pdsTableSort')\n  handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n    const { direction } = event.detail;\n    this.sortTable(event.detail.column, direction);\n    this.sortingColumn = event.detail.column;\n    this.sortingDirection = direction;\n  }\n\n  @Listen('pdsTableSelectAll')\n  handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const pdsTableBody = this.el.querySelector('pds-table-body');\n    const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n    tableRows.forEach((row) => {\n      row.isSelected = event.detail.isSelected;\n    });\n  }\n\n  @Listen('pdsTableRowSelected')\n  async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const allTableRows = this.el.querySelectorAll('pds-table-row');\n    const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n    const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n    const pdsTableHead = this.el.querySelector('pds-table-head');\n    if (!pdsTableHead) return;\n\n    const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n    headerCheckbox.checked = allSelectedRows;\n    headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n  }\n\n  render() {\n    if (this.responsive) {\n      return (\n        <Host\n          class=\"pds-table is-responsive pds-table-responsive-host\"\n          id={this.componentId}\n          role=\"grid\"\n          selectable={this.selectable}\n          tabindex=\"0\"\n          part=\"table responsive-table\"\n        >\n          <div class=\"scroll-shadow-left\" part=\"scroll-shadow-left\"></div>\n          <div class=\"scroll-shadow-right\" part=\"scroll-shadow-right\"></div>\n          <div class=\"pds-table-responsive-container\" part=\"responsive-container\">\n            <div class=\"pds-table-responsive-wrapper\" part=\"responsive-wrapper\">\n              <div class={this.classNames()} part=\"table-inner\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n        part=\"table\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-table.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/pds-table/pds-table.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.tsx"],"sourcesContent":[":host {\n  --color-background-default: var(--pine-color-white);\n\n  background: var(--color-background-default);\n  border-collapse: separate;\n  border-radius: inherit;\n  box-sizing: border-box;\n  display: table;\n  width: 100%;\n}\n\n:host(:focus-visible) {\n  outline: var(--pine-outline-focus);\n}\n\n/*\n * Responsive Table Architecture\n *\n * When responsive=true, the table uses a nested structure to provide horizontal scrolling\n * while maintaining proper width behavior and scroll shadows:\n *\n * Host (.pds-table-responsive-host)\n * ├── Shadow Left (positioned fixed to left edge)\n * ├── Shadow Right (positioned fixed to right edge)\n * └── Container (.pds-table-responsive-container)\n *     └── Wrapper (.pds-table-responsive-wrapper)\n *         └── Table (.pds-table)\n *\n * - Host: Constrains everything to parent width, clips shadows to border-radius\n * - Shadows: Stay fixed during scroll, provide visual scroll indicators\n * - Container: Handles horizontal scrolling (overflow-x: auto)\n * - Table: Expands to full width or scrolls based on content\n */\n:host(.pds-table-responsive-host) {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  max-width: 100% !important;\n  overflow: hidden !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-container {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  overflow-x: auto !important;\n  overflow-y: visible !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper .pds-table {\n  display: table !important;\n  min-width: max-content !important;\n  table-layout: auto !important;\n  white-space: nowrap !important;\n  width: 100% !important;\n}\n\n/* Shadows positioned relative to host (non-scrolling), covering container edges */\n.scroll-shadow-left,\n.scroll-shadow-right {\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  transition: opacity 0.1s ease;\n  width: 4px;\n  z-index: var(--pine-z-index);\n}\n\n.scroll-shadow-left {\n  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-left-radius: inherit;\n  border-top-left-radius: inherit;\n  left: 0;\n}\n\n.scroll-shadow-right {\n  background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-right-radius: inherit;\n  border-top-right-radius: inherit;\n  right: 0;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrls: ['pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private _responsiveHandleScroll: (() => void) | null = null;\n  private _responsiveHandleResize: (() => void) | null = null;\n  private _responsiveResizeObserver: ResizeObserver | null = null;\n  private _teardownResponsive: (() => void) | null = null;\n\n  /**\n   * Determines if the table displays with reduced table cell padding.\n   */\n  @Prop() compact: boolean;\n\n  /**\n   * A unique identifier used for the table `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enables the table to be responsive by horizontally scrolling on smaller screens.\n   */\n  @Prop() responsive: boolean;\n\n  /**\n   * Determines if the should display a fixed first column.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if the table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  /**\n   * The name of the column being sorted.\n   * @defaultValue null\n   */\n  @State() sortingColumn: string | null = null;\n\n  /**\n   * The direction of sorting.\n   * @defaultValue 'asc'\n   */\n  @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n   */\n  @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  componentWillLoad() {\n    this.sortingColumn = null;\n  }\n\n  componentDidLoad() {\n    if (this.responsive) {\n      this.setupResponsiveScrolling();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._teardownResponsive) {\n      this._teardownResponsive();\n      this._teardownResponsive = null;\n    }\n  }\n\n  /**\n   * Sets up responsive scrolling behavior for the table.\n   *\n   * This method creates a horizontal scrolling system where:\n   * - The table content can scroll horizontally when it exceeds the container width\n   * - Scroll shadows appear at the left/right edges to indicate scrollable content\n   * - Fixed columns remain sticky during horizontal scrolling\n   * - Shadows respect border-radius and don't appear when there's nothing to scroll\n   *\n   * Architecture:\n   * - Host element: Contains everything, respects parent constraints\n   * - Container element: Handles horizontal scrolling (overflow-x: auto)\n   * - Shadow elements: Positioned fixed relative to host, show scroll indicators\n   *\n   * @private\n   */\n  private setupResponsiveScrolling() {\n    const container = this.el.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n    const leftShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-left') as HTMLElement;\n    const rightShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-right') as HTMLElement;\n\n    if (!container || !leftShadow || !rightShadow) return;\n\n    // Store container reference for cleanup\n    this.scrollContainer = container;\n\n    /**\n     * Updates the visibility of scroll shadows based on current scroll position.\n     * Left shadow: Shows when scrolled away from start (hidden if fixedColumn is enabled)\n     * Right shadow: Shows when there's content to scroll and not at the end\n     */\n    this._responsiveHandleScroll = () => {\n      if (!this.scrollContainer) return;\n\n      const scrollLeft = this.scrollContainer.scrollLeft;\n      const maxScrollLeft = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\n\n      // Show left shadow when scrolled away from start, but not if there's a fixed column\n      leftShadow.style.opacity = (scrollLeft > 0 && !this.fixedColumn) ? '1' : '0';\n\n      // Show right shadow only if there's content to scroll AND not at end\n      rightShadow.style.opacity = (maxScrollLeft > 0 && scrollLeft < maxScrollLeft - 1) ? '1' : '0';\n    };\n\n    // Add scroll event listener to container element\n    this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });\n\n    // Add resize observer to update shadows when container size changes\n    if (typeof window !== 'undefined' && window.ResizeObserver) {\n      try {\n        this._responsiveResizeObserver = new ResizeObserver(() => {\n          this._responsiveHandleScroll?.();\n        });\n        this._responsiveResizeObserver.observe(this.scrollContainer);\n      } catch (error) {\n        // ResizeObserver not available in some environments (e.g., tests)\n        // Fall back to window resize listener only\n      }\n    }\n\n    // Listen for window resize as fallback\n    if (typeof window !== 'undefined') {\n      this._responsiveHandleResize = () => {\n        this._responsiveHandleScroll?.();\n      };\n      window.addEventListener('resize', this._responsiveHandleResize);\n    }\n\n    // Create teardown function for cleanup\n    this._teardownResponsive = () => {\n      if (this.scrollContainer && this._responsiveHandleScroll) {\n        this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);\n        this.scrollContainer = null;\n      }\n\n      if (this._responsiveResizeObserver) {\n        this._responsiveResizeObserver.disconnect();\n        this._responsiveResizeObserver = null;\n      }\n\n      if (typeof window !== 'undefined' && this._responsiveHandleResize) {\n        window.removeEventListener('resize', this._responsiveHandleResize);\n        this._responsiveHandleResize = null;\n      }\n\n      this._responsiveHandleScroll = null;\n    };\n\n    // Initial check after setup\n    this._responsiveHandleScroll();\n  }\n\n\n  private classNames() {\n    const classNames = ['pds-table'];\n\n    if (this.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.responsive) {\n      classNames.push('is-responsive');\n    }\n\n    return classNames.join('  ');\n  }\n\n  private sortTable(column: string, direction: 'asc' | 'desc') {\n    const tableBody = this.el.querySelector('pds-table-body');\n\n    // Get the rows in the table body\n    const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n    // Find the column index based on the column name\n    const columnHeaderCells: HTMLElement[] = Array.from(\n      this.el.querySelectorAll('pds-table-head-cell[sortable]')\n    );\n\n    const columnHeaderCell = columnHeaderCells.find(\n      (cell) => cell.innerText.trim() === column\n    );\n\n    if (!columnHeaderCell) {\n      console.warn(`Column \"${column}\" not found.`);\n      return;\n    }\n\n    const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n    // Sort the rows based on the content of the specified column\n    tableRows.sort((a, b) => {\n      const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n      const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n      if (direction === 'asc') {\n        return valueA.localeCompare(valueB, undefined, { sensitivity: 'base' });\n      } else {\n        return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });\n      }\n    });\n\n    // Clear and append the sorted rows back to the table body\n    tableBody.innerHTML = '';\n    tableRows.forEach((row) => {\n      tableBody.appendChild(row);\n    });\n  }\n\n  @Listen('pdsTableSort')\n  handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n    const { direction } = event.detail;\n    this.sortTable(event.detail.column, direction);\n    this.sortingColumn = event.detail.column;\n    this.sortingDirection = direction;\n  }\n\n  @Listen('pdsTableSelectAll')\n  handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const pdsTableBody = this.el.querySelector('pds-table-body');\n    const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n    tableRows.forEach((row) => {\n      row.isSelected = event.detail.isSelected;\n    });\n  }\n\n  @Listen('pdsTableRowSelected')\n  async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const allTableRows = this.el.querySelectorAll('pds-table-row');\n    const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n    const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n    const pdsTableHead = this.el.querySelector('pds-table-head');\n    if (!pdsTableHead) return;\n\n    const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n    headerCheckbox.checked = allSelectedRows;\n    headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n  }\n\n  render() {\n    if (this.responsive) {\n      return (\n        <Host\n          class=\"pds-table is-responsive pds-table-responsive-host\"\n          id={this.componentId}\n          role=\"grid\"\n          selectable={this.selectable}\n          tabindex=\"0\"\n          part=\"table responsive-table\"\n        >\n          <div class=\"scroll-shadow-left\" part=\"scroll-shadow-left\"></div>\n          <div class=\"scroll-shadow-right\" part=\"scroll-shadow-right\"></div>\n          <div class=\"pds-table-responsive-container\" part=\"responsive-container\">\n            <div class=\"pds-table-responsive-wrapper\" part=\"responsive-wrapper\">\n              <div class={this.classNames()} part=\"table-inner\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n        part=\"table\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-table.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-table.entry.cjs.js","sources":["src/components/pds-table/pds-table.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.tsx"],"sourcesContent":[":host {\n  --color-background-default: var(--pine-color-white);\n\n  background: var(--color-background-default);\n  border-collapse: separate;\n  border-radius: inherit;\n  box-sizing: border-box;\n  display: table;\n  width: 100%;\n}\n\n:host(:focus-visible) {\n  outline: var(--pine-outline-focus);\n}\n\n/*\n * Responsive Table Architecture\n *\n * When responsive=true, the table uses a nested structure to provide horizontal scrolling\n * while maintaining proper width behavior and scroll shadows:\n *\n * Host (.pds-table-responsive-host)\n * ├── Shadow Left (positioned fixed to left edge)\n * ├── Shadow Right (positioned fixed to right edge)\n * └── Container (.pds-table-responsive-container)\n *     └── Wrapper (.pds-table-responsive-wrapper)\n *         └── Table (.pds-table)\n *\n * - Host: Constrains everything to parent width, clips shadows to border-radius\n * - Shadows: Stay fixed during scroll, provide visual scroll indicators\n * - Container: Handles horizontal scrolling (overflow-x: auto)\n * - Table: Expands to full width or scrolls based on content\n */\n:host(.pds-table-responsive-host) {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  max-width: 100% !important;\n  overflow: hidden !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-container {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  overflow-x: auto !important;\n  overflow-y: visible !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper .pds-table {\n  display: table !important;\n  min-width: max-content !important;\n  table-layout: auto !important;\n  white-space: nowrap !important;\n  width: 100% !important;\n}\n\n/* Shadows positioned relative to host (non-scrolling), covering container edges */\n.scroll-shadow-left,\n.scroll-shadow-right {\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  transition: opacity 0.1s ease;\n  width: 4px;\n  z-index: 10;\n}\n\n.scroll-shadow-left {\n  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-left-radius: inherit;\n  border-top-left-radius: inherit;\n  left: 0;\n}\n\n.scroll-shadow-right {\n  background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-right-radius: inherit;\n  border-top-right-radius: inherit;\n  right: 0;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrls: ['pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private _responsiveHandleScroll: (() => void) | null = null;\n  private _responsiveHandleResize: (() => void) | null = null;\n  private _responsiveResizeObserver: ResizeObserver | null = null;\n  private _teardownResponsive: (() => void) | null = null;\n\n  /**\n   * Determines if the table displays with reduced table cell padding.\n   */\n  @Prop() compact: boolean;\n\n  /**\n   * A unique identifier used for the table `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enables the table to be responsive by horizontally scrolling on smaller screens.\n   */\n  @Prop() responsive: boolean;\n\n  /**\n   * Determines if the should display a fixed first column.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if the table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  /**\n   * The name of the column being sorted.\n   * @defaultValue null\n   */\n  @State() sortingColumn: string | null = null;\n\n  /**\n   * The direction of sorting.\n   * @defaultValue 'asc'\n   */\n  @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n   */\n  @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  componentWillLoad() {\n    this.sortingColumn = null;\n  }\n\n  componentDidLoad() {\n    if (this.responsive) {\n      this.setupResponsiveScrolling();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._teardownResponsive) {\n      this._teardownResponsive();\n      this._teardownResponsive = null;\n    }\n  }\n\n  /**\n   * Sets up responsive scrolling behavior for the table.\n   *\n   * This method creates a horizontal scrolling system where:\n   * - The table content can scroll horizontally when it exceeds the container width\n   * - Scroll shadows appear at the left/right edges to indicate scrollable content\n   * - Fixed columns remain sticky during horizontal scrolling\n   * - Shadows respect border-radius and don't appear when there's nothing to scroll\n   *\n   * Architecture:\n   * - Host element: Contains everything, respects parent constraints\n   * - Container element: Handles horizontal scrolling (overflow-x: auto)\n   * - Shadow elements: Positioned fixed relative to host, show scroll indicators\n   *\n   * @private\n   */\n  private setupResponsiveScrolling() {\n    const container = this.el.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n    const leftShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-left') as HTMLElement;\n    const rightShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-right') as HTMLElement;\n\n    if (!container || !leftShadow || !rightShadow) return;\n\n    // Store container reference for cleanup\n    this.scrollContainer = container;\n\n    /**\n     * Updates the visibility of scroll shadows based on current scroll position.\n     * Left shadow: Shows when scrolled away from start (hidden if fixedColumn is enabled)\n     * Right shadow: Shows when there's content to scroll and not at the end\n     */\n    this._responsiveHandleScroll = () => {\n      if (!this.scrollContainer) return;\n\n      const scrollLeft = this.scrollContainer.scrollLeft;\n      const maxScrollLeft = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\n\n      // Show left shadow when scrolled away from start, but not if there's a fixed column\n      leftShadow.style.opacity = (scrollLeft > 0 && !this.fixedColumn) ? '1' : '0';\n\n      // Show right shadow only if there's content to scroll AND not at end\n      rightShadow.style.opacity = (maxScrollLeft > 0 && scrollLeft < maxScrollLeft - 1) ? '1' : '0';\n    };\n\n    // Add scroll event listener to container element\n    this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });\n\n    // Add resize observer to update shadows when container size changes\n    if (typeof window !== 'undefined' && window.ResizeObserver) {\n      try {\n        this._responsiveResizeObserver = new ResizeObserver(() => {\n          this._responsiveHandleScroll?.();\n        });\n        this._responsiveResizeObserver.observe(this.scrollContainer);\n      } catch (error) {\n        // ResizeObserver not available in some environments (e.g., tests)\n        // Fall back to window resize listener only\n      }\n    }\n\n    // Listen for window resize as fallback\n    if (typeof window !== 'undefined') {\n      this._responsiveHandleResize = () => {\n        this._responsiveHandleScroll?.();\n      };\n      window.addEventListener('resize', this._responsiveHandleResize);\n    }\n\n    // Create teardown function for cleanup\n    this._teardownResponsive = () => {\n      if (this.scrollContainer && this._responsiveHandleScroll) {\n        this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);\n        this.scrollContainer = null;\n      }\n\n      if (this._responsiveResizeObserver) {\n        this._responsiveResizeObserver.disconnect();\n        this._responsiveResizeObserver = null;\n      }\n\n      if (typeof window !== 'undefined' && this._responsiveHandleResize) {\n        window.removeEventListener('resize', this._responsiveHandleResize);\n        this._responsiveHandleResize = null;\n      }\n\n      this._responsiveHandleScroll = null;\n    };\n\n    // Initial check after setup\n    this._responsiveHandleScroll();\n  }\n\n\n  private classNames() {\n    const classNames = ['pds-table'];\n\n    if (this.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.responsive) {\n      classNames.push('is-responsive');\n    }\n\n    return classNames.join('  ');\n  }\n\n  private sortTable(column: string, direction: 'asc' | 'desc') {\n    const tableBody = this.el.querySelector('pds-table-body');\n\n    // Get the rows in the table body\n    const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n    // Find the column index based on the column name\n    const columnHeaderCells: HTMLElement[] = Array.from(\n      this.el.querySelectorAll('pds-table-head-cell[sortable]')\n    );\n\n    const columnHeaderCell = columnHeaderCells.find(\n      (cell) => cell.innerText.trim() === column\n    );\n\n    if (!columnHeaderCell) {\n      console.warn(`Column \"${column}\" not found.`);\n      return;\n    }\n\n    const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n    // Sort the rows based on the content of the specified column\n    tableRows.sort((a, b) => {\n      const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n      const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n      if (direction === 'asc') {\n        return valueA.localeCompare(valueB, undefined, { sensitivity: 'base' });\n      } else {\n        return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });\n      }\n    });\n\n    // Clear and append the sorted rows back to the table body\n    tableBody.innerHTML = '';\n    tableRows.forEach((row) => {\n      tableBody.appendChild(row);\n    });\n  }\n\n  @Listen('pdsTableSort')\n  handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n    const { direction } = event.detail;\n    this.sortTable(event.detail.column, direction);\n    this.sortingColumn = event.detail.column;\n    this.sortingDirection = direction;\n  }\n\n  @Listen('pdsTableSelectAll')\n  handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const pdsTableBody = this.el.querySelector('pds-table-body');\n    const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n    tableRows.forEach((row) => {\n      row.isSelected = event.detail.isSelected;\n    });\n  }\n\n  @Listen('pdsTableRowSelected')\n  async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const allTableRows = this.el.querySelectorAll('pds-table-row');\n    const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n    const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n    const pdsTableHead = this.el.querySelector('pds-table-head');\n    if (!pdsTableHead) return;\n\n    const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n    headerCheckbox.checked = allSelectedRows;\n    headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n  }\n\n  render() {\n    if (this.responsive) {\n      return (\n        <Host\n          class=\"pds-table is-responsive pds-table-responsive-host\"\n          id={this.componentId}\n          role=\"grid\"\n          selectable={this.selectable}\n          tabindex=\"0\"\n          part=\"table responsive-table\"\n        >\n          <div class=\"scroll-shadow-left\" part=\"scroll-shadow-left\"></div>\n          <div class=\"scroll-shadow-right\" part=\"scroll-shadow-right\"></div>\n          <div class=\"pds-table-responsive-container\" part=\"responsive-container\">\n            <div class=\"pds-table-responsive-wrapper\" part=\"responsive-wrapper\">\n              <div class={this.classNames()} part=\"table-inner\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n        part=\"table\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}
+{"version":3,"file":"pds-table.entry.cjs.js","sources":["src/components/pds-table/pds-table.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.tsx"],"sourcesContent":[":host {\n  --color-background-default: var(--pine-color-white);\n\n  background: var(--color-background-default);\n  border-collapse: separate;\n  border-radius: inherit;\n  box-sizing: border-box;\n  display: table;\n  width: 100%;\n}\n\n:host(:focus-visible) {\n  outline: var(--pine-outline-focus);\n}\n\n/*\n * Responsive Table Architecture\n *\n * When responsive=true, the table uses a nested structure to provide horizontal scrolling\n * while maintaining proper width behavior and scroll shadows:\n *\n * Host (.pds-table-responsive-host)\n * ├── Shadow Left (positioned fixed to left edge)\n * ├── Shadow Right (positioned fixed to right edge)\n * └── Container (.pds-table-responsive-container)\n *     └── Wrapper (.pds-table-responsive-wrapper)\n *         └── Table (.pds-table)\n *\n * - Host: Constrains everything to parent width, clips shadows to border-radius\n * - Shadows: Stay fixed during scroll, provide visual scroll indicators\n * - Container: Handles horizontal scrolling (overflow-x: auto)\n * - Table: Expands to full width or scrolls based on content\n */\n:host(.pds-table-responsive-host) {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  max-width: 100% !important;\n  overflow: hidden !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-container {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  overflow-x: auto !important;\n  overflow-y: visible !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper .pds-table {\n  display: table !important;\n  min-width: max-content !important;\n  table-layout: auto !important;\n  white-space: nowrap !important;\n  width: 100% !important;\n}\n\n/* Shadows positioned relative to host (non-scrolling), covering container edges */\n.scroll-shadow-left,\n.scroll-shadow-right {\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  transition: opacity 0.1s ease;\n  width: 4px;\n  z-index: var(--pine-z-index);\n}\n\n.scroll-shadow-left {\n  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-left-radius: inherit;\n  border-top-left-radius: inherit;\n  left: 0;\n}\n\n.scroll-shadow-right {\n  background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-right-radius: inherit;\n  border-top-right-radius: inherit;\n  right: 0;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrls: ['pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private _responsiveHandleScroll: (() => void) | null = null;\n  private _responsiveHandleResize: (() => void) | null = null;\n  private _responsiveResizeObserver: ResizeObserver | null = null;\n  private _teardownResponsive: (() => void) | null = null;\n\n  /**\n   * Determines if the table displays with reduced table cell padding.\n   */\n  @Prop() compact: boolean;\n\n  /**\n   * A unique identifier used for the table `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enables the table to be responsive by horizontally scrolling on smaller screens.\n   */\n  @Prop() responsive: boolean;\n\n  /**\n   * Determines if the should display a fixed first column.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if the table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  /**\n   * The name of the column being sorted.\n   * @defaultValue null\n   */\n  @State() sortingColumn: string | null = null;\n\n  /**\n   * The direction of sorting.\n   * @defaultValue 'asc'\n   */\n  @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n   */\n  @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  componentWillLoad() {\n    this.sortingColumn = null;\n  }\n\n  componentDidLoad() {\n    if (this.responsive) {\n      this.setupResponsiveScrolling();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._teardownResponsive) {\n      this._teardownResponsive();\n      this._teardownResponsive = null;\n    }\n  }\n\n  /**\n   * Sets up responsive scrolling behavior for the table.\n   *\n   * This method creates a horizontal scrolling system where:\n   * - The table content can scroll horizontally when it exceeds the container width\n   * - Scroll shadows appear at the left/right edges to indicate scrollable content\n   * - Fixed columns remain sticky during horizontal scrolling\n   * - Shadows respect border-radius and don't appear when there's nothing to scroll\n   *\n   * Architecture:\n   * - Host element: Contains everything, respects parent constraints\n   * - Container element: Handles horizontal scrolling (overflow-x: auto)\n   * - Shadow elements: Positioned fixed relative to host, show scroll indicators\n   *\n   * @private\n   */\n  private setupResponsiveScrolling() {\n    const container = this.el.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n    const leftShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-left') as HTMLElement;\n    const rightShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-right') as HTMLElement;\n\n    if (!container || !leftShadow || !rightShadow) return;\n\n    // Store container reference for cleanup\n    this.scrollContainer = container;\n\n    /**\n     * Updates the visibility of scroll shadows based on current scroll position.\n     * Left shadow: Shows when scrolled away from start (hidden if fixedColumn is enabled)\n     * Right shadow: Shows when there's content to scroll and not at the end\n     */\n    this._responsiveHandleScroll = () => {\n      if (!this.scrollContainer) return;\n\n      const scrollLeft = this.scrollContainer.scrollLeft;\n      const maxScrollLeft = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\n\n      // Show left shadow when scrolled away from start, but not if there's a fixed column\n      leftShadow.style.opacity = (scrollLeft > 0 && !this.fixedColumn) ? '1' : '0';\n\n      // Show right shadow only if there's content to scroll AND not at end\n      rightShadow.style.opacity = (maxScrollLeft > 0 && scrollLeft < maxScrollLeft - 1) ? '1' : '0';\n    };\n\n    // Add scroll event listener to container element\n    this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });\n\n    // Add resize observer to update shadows when container size changes\n    if (typeof window !== 'undefined' && window.ResizeObserver) {\n      try {\n        this._responsiveResizeObserver = new ResizeObserver(() => {\n          this._responsiveHandleScroll?.();\n        });\n        this._responsiveResizeObserver.observe(this.scrollContainer);\n      } catch (error) {\n        // ResizeObserver not available in some environments (e.g., tests)\n        // Fall back to window resize listener only\n      }\n    }\n\n    // Listen for window resize as fallback\n    if (typeof window !== 'undefined') {\n      this._responsiveHandleResize = () => {\n        this._responsiveHandleScroll?.();\n      };\n      window.addEventListener('resize', this._responsiveHandleResize);\n    }\n\n    // Create teardown function for cleanup\n    this._teardownResponsive = () => {\n      if (this.scrollContainer && this._responsiveHandleScroll) {\n        this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);\n        this.scrollContainer = null;\n      }\n\n      if (this._responsiveResizeObserver) {\n        this._responsiveResizeObserver.disconnect();\n        this._responsiveResizeObserver = null;\n      }\n\n      if (typeof window !== 'undefined' && this._responsiveHandleResize) {\n        window.removeEventListener('resize', this._responsiveHandleResize);\n        this._responsiveHandleResize = null;\n      }\n\n      this._responsiveHandleScroll = null;\n    };\n\n    // Initial check after setup\n    this._responsiveHandleScroll();\n  }\n\n\n  private classNames() {\n    const classNames = ['pds-table'];\n\n    if (this.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.responsive) {\n      classNames.push('is-responsive');\n    }\n\n    return classNames.join('  ');\n  }\n\n  private sortTable(column: string, direction: 'asc' | 'desc') {\n    const tableBody = this.el.querySelector('pds-table-body');\n\n    // Get the rows in the table body\n    const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n    // Find the column index based on the column name\n    const columnHeaderCells: HTMLElement[] = Array.from(\n      this.el.querySelectorAll('pds-table-head-cell[sortable]')\n    );\n\n    const columnHeaderCell = columnHeaderCells.find(\n      (cell) => cell.innerText.trim() === column\n    );\n\n    if (!columnHeaderCell) {\n      console.warn(`Column \"${column}\" not found.`);\n      return;\n    }\n\n    const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n    // Sort the rows based on the content of the specified column\n    tableRows.sort((a, b) => {\n      const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n      const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n      if (direction === 'asc') {\n        return valueA.localeCompare(valueB, undefined, { sensitivity: 'base' });\n      } else {\n        return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });\n      }\n    });\n\n    // Clear and append the sorted rows back to the table body\n    tableBody.innerHTML = '';\n    tableRows.forEach((row) => {\n      tableBody.appendChild(row);\n    });\n  }\n\n  @Listen('pdsTableSort')\n  handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n    const { direction } = event.detail;\n    this.sortTable(event.detail.column, direction);\n    this.sortingColumn = event.detail.column;\n    this.sortingDirection = direction;\n  }\n\n  @Listen('pdsTableSelectAll')\n  handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const pdsTableBody = this.el.querySelector('pds-table-body');\n    const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n    tableRows.forEach((row) => {\n      row.isSelected = event.detail.isSelected;\n    });\n  }\n\n  @Listen('pdsTableRowSelected')\n  async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const allTableRows = this.el.querySelectorAll('pds-table-row');\n    const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n    const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n    const pdsTableHead = this.el.querySelector('pds-table-head');\n    if (!pdsTableHead) return;\n\n    const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n    headerCheckbox.checked = allSelectedRows;\n    headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n  }\n\n  render() {\n    if (this.responsive) {\n      return (\n        <Host\n          class=\"pds-table is-responsive pds-table-responsive-host\"\n          id={this.componentId}\n          role=\"grid\"\n          selectable={this.selectable}\n          tabindex=\"0\"\n          part=\"table responsive-table\"\n        >\n          <div class=\"scroll-shadow-left\" part=\"scroll-shadow-left\"></div>\n          <div class=\"scroll-shadow-right\" part=\"scroll-shadow-right\"></div>\n          <div class=\"pds-table-responsive-container\" part=\"responsive-container\">\n            <div class=\"pds-table-responsive-wrapper\" part=\"responsive-wrapper\">\n              <div class={this.classNames()} part=\"table-inner\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n        part=\"table\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/pds-tabs.cjs.entry.js

@@ -16,7 +16,13 @@ const PdsTabs = class {
     }
     handleKeyDown(ev) {
         const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
-        if (keySet.includes(ev.key)) {
+        // Only handle keyboard navigation if the event originated from a tab button
+        // that belongs to THIS tabs component
+        const target = ev.target;
+        const targetTab = target.closest('pds-tab');
+        // Check if the tab belongs to this tabs instance (not a nested one)
+        const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;
+        if (keySet.includes(ev.key) && isOwnTab) {
             ev.preventDefault();
             this.moveActiveTab(ev.key);
         }
@@ -45,8 +51,12 @@ const PdsTabs = class {
         this.activeTabIndex = moveFocusTo;
     }
     findAllChildren() {
-        this.tabs = this.el.querySelectorAll('pds-tab');
-        this.tabPanels = this.el.querySelectorAll('pds-tabpanel');
+        // Only select direct children tabs/tabpanels, not nested ones
+        const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));
+        const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));
+        // Filter to only include tabs that belong to this tabs component (not nested)
+        this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);
+        this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);
     }
     propGeneration(child, index = 0) {
         child.parentComponentId = this.componentId.toString();
@@ -80,7 +90,7 @@ const PdsTabs = class {
         this.passPropsToChildren();
     }
     render() {
-        return (index.h(index.Host, { key: '46ae07c28f9fb645e0e4a8165b5c3d2b0b9bdc4a', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, index.h("div", { key: 'ab3ea42f6998356ea4a089e07bbe49c6f8e45d54', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, index.h("slot", { key: 'e63be406b7d26ba2eff737d31fbc0d3bf959c99f', name: "tabs" })), index.h("slot", { key: 'cacce277c237acfff91b879ea90ba134cf7e2b80', name: "tabpanels" })));
+        return (index.h(index.Host, { key: '89db4772ef4dab7f4dba38306b0fdf1ae55c8a9b', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, index.h("div", { key: 'c1596be516168b0f2548b90344ad3bffcc5cb844', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, index.h("slot", { key: 'be58f90ec895da67fc84eded670183151feb261f', name: "tabs" })), index.h("slot", { key: '24d3bed1750d8b64a8ffc9c86f517b5e8b15f615', name: "tabpanels" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-tabs.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-tabs.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels\n   */\n  --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n  /**\n   * @prop --tabs-dimension-panel-padding: Optional padding for panels\n   */\n  --tabs-dimension-panel-padding: 0;\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n  background-color: var(--pine-color-grey-100);\n  border: var(--pine-border-width-thin) solid var(--pine-color-grey-200);\n  border-radius: var(--pine-dimension-100);\n  display: inline-flex;\n  display: flex;\n  gap: 0;\n  height: var(--pine-dimension-450);\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 * @part tab-list - Exposes the container element that holds all the tab buttons for styling.\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrls: ['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' | 'pill';\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} part=\"tab-list\">\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-tabs.entry.cjs.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,0rBAA0rB;;MCYhsB,OAAO,GAAA,MAAA;;;;AAmClB,IAAA,eAAe,CAAC,KAAuB,EAAA;QACrC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;YACxC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;AACrC,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,IAAI;;;AAK5D,IAAA,aAAa,CAAC,EAAiB,EAAA;QAC7B,MAAM,MAAM,GAAG,CAAC,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC;;;AAIzD,QAAA,MAAM,MAAM,GAAG,EAAE,CAAC,MAAqB;QACvC,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;;AAG3C,QAAA,MAAM,QAAQ,GAAG,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,EAAE;QAEvE,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,QAAQ,EAAE;YACvC,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,GAAG,CAAC;;;AAItB,IAAA,aAAa,CAAC,GAAW,EAAA;QAC/B,MAAM,cAAc,GAAG,CAAC;QACxB,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;QAE1C,IAAI,WAAW,GAAG,IAAI;QAEtB,QAAQ,GAAG;AACT,YAAA,KAAK,WAAW;gBACd,WAAW,GAAG,CAAC,IAAI,CAAC,cAAc,KAAK,cAAc,IAAI,aAAa,IAAI,IAAI,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC;gBACrG;AACF,YAAA,KAAK,YAAY;gBACf,WAAW,GAAG,CAAC,IAAI,CAAC,cAAc,KAAK,aAAa,IAAI,cAAc,IAAI,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;gBAClG;AACF,YAAA,KAAK,MAAM;gBACT,WAAW,GAAG,cAAc;gBAC5B;AACF,YAAA,KAAK,KAAK;gBACR,WAAW,GAAG,aAAa;gBAC3B;;;AAIJ,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;QAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI;AAChD,QAAA,IAAI,CAAC,cAAc,GAAG,WAAW;;IAG3B,eAAe,GAAA;;AAErB,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;AAC/D,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;;QAGzE,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC;QACtE,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC;;AAG9E,IAAA,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,EAAA;QACrC,KAAK,CAAC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;QACrD,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;QACvC,KAAK,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK;AACnE,QAAA,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK;;IAGhB,mBAAmB,GAAA;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;AACjC,YAAA,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,IAAI;AAAE,gBAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAClE,YAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC;AACnC,SAAC,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AAC/B,YAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;AAC5B,SAAC,CAAC;;IAGI,UAAU,GAAA;QAChB,IAAI,SAAS,GAAG,CAAA,QAAA,CAAU;QAC1B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;AAC7C,YAAA,MAAM,gBAAgB,GAAG,CAAA,UAAA,EAAa,IAAI,CAAC,OAAO,EAAE;AACpD,YAAA,SAAS,IAAI,GAAG,GAAG,gBAAgB;;AAGrC,QAAA,OAAO,SAAS;;;IAGlB,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;;IAGxB,mBAAmB,GAAA;QACjB,IAAI,CAAC,mBAAmB,EAAE;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACEA,OAAC,CAAAC,UAAI,wEAAkB,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EACvFD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,SAAS,EAAa,YAAA,EAAA,IAAI,CAAC,YAAY,EAAE,IAAI,EAAC,UAAU,EAAA,EAC1FA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACNA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAG,CAAA,CACpB;;;;;;;;","names":["h","Host"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels\n   */\n  --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n  /**\n   * @prop --tabs-dimension-panel-padding: Optional padding for panels\n   */\n  --tabs-dimension-panel-padding: 0;\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n  background-color: var(--pine-color-grey-100);\n  border: var(--pine-border-width-thin) solid var(--pine-color-grey-200);\n  border-radius: var(--pine-dimension-100);\n  display: inline-flex;\n  display: flex;\n  gap: 0;\n  height: var(--pine-dimension-450);\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 * @part tab-list - Exposes the container element that holds all the tab buttons for styling.\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrls: ['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' | 'pill';\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    // Only handle keyboard navigation if the event originated from a tab button\n    // that belongs to THIS tabs component\n    const target = ev.target as HTMLElement;\n    const targetTab = target.closest('pds-tab');\n\n    // Check if the tab belongs to this tabs instance (not a nested one)\n    const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;\n\n    if (keySet.includes(ev.key) && isOwnTab) {\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    // Only select direct children tabs/tabpanels, not nested ones\n    const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));\n    const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));\n\n    // Filter to only include tabs that belong to this tabs component (not nested)\n    this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);\n    this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);\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} part=\"tab-list\">\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}