@spw-ds/spw-stencil-library 1.2.0 → 1.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"spw-table.entry.cjs.js","sources":["src/components/spw-table/spw-table.scss?tag=spw-table&encapsulation=shadow","src/components/spw-table/spw-table.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n%highlight {\n  font-weight: 700;\n  background: var(--spw-color-themes-grey-grey-100);\n}\n\n.spw-table-container {\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: var(--spw-table-max-height);\n  border-radius: 4px;\n  outline: 1px solid var(--spw-color-themes-grey-grey-300);\n  outline-offset: -1px;\n  position: relative;\n  @include scrollbars(var(--spw-color-themes-grey-grey-400), var(--spw-ds-white));\n}\n\n.spw-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: var(--spw-table-min-width);\n  border-radius: 4px;\n  position: relative;\n}\n","import { Component, Element, Event, Listen, State, EventEmitter, Host, Prop, h } from '@stencil/core';\n\nexport interface SortEvent {\n  column: string;\n  direction: 'asc' | 'desc';\n}\n\n@Component({\n  tag: 'spw-table',\n  styleUrl: 'spw-table.scss',\n  shadow: true,\n})\nexport class SpwTable {\n  @Element() el: HTMLSpwTableElement;\n\n  /** Propriété pour l'aria-label, à des fins d'accessibilité */\n  @Prop() accAriaLabel?: string;\n  /** Si le header du tableau doit être sticky ou non */\n  @Prop() isSticky?: boolean = false;\n  /** Si défini, apparition d'une scrollbar verticale et max-height  */\n  @Prop() maxHeight?: string;\n  /** Si défini, apparition d'une scrollbar horizontale et max-width  */\n  @Prop() minWidth?: string = '600';\n  /** Définit un background de couleur différent une ligne sur 2 */\n  @Prop() isZebra?: boolean = false;\n\n  @Event() spwSort: EventEmitter<SortEvent>;\n\n  @State() currentSort?: SortEvent;\n\n  componentDidLoad() {\n    this.updateZebra();\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    if (slot) {\n      slot.addEventListener('slotchange', () => this.setupHeaderCheckboxListener());\n    }\n    this.setupHeaderCheckboxListener();\n    this.setupBodyCheckboxListener();\n  }\n\n  private getMasterCheckboxColumnIndex(): number | null {\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    if (!slot) return null;\n\n    const assignedElements = slot.assignedElements({ flatten: true }) as HTMLElement[];\n    const head = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-head');\n    if (!head) return null;\n\n    const headerRow = head.querySelector('spw-table-row');\n    if (!headerRow) return null;\n\n    const headerCells = Array.from(headerRow.querySelectorAll('spw-table-header'));\n\n    for (let i = 0; i < headerCells.length; i++) {\n      if (headerCells[i].querySelector('spw-checkbox')) {\n        return i;\n      }\n    }\n\n    return null;\n  }\n\n  private updateMasterCheckboxState() {\n    const columnIndex = this.getMasterCheckboxColumnIndex();\n    if (columnIndex === null) return;\n\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    const assignedElements = slot?.assignedElements({ flatten: true }) as HTMLElement[] | undefined;\n    if (!assignedElements) return;\n\n    const head = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-head');\n    const body = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-body');\n    if (!head || !body) return;\n\n    const headerRow = head.querySelector('spw-table-row');\n    const headerCell = headerRow?.querySelectorAll('spw-table-header')[columnIndex];\n    const masterCheckbox = headerCell?.querySelector('spw-checkbox') as any;\n\n    const rows = body.querySelectorAll('spw-table-row');\n    const values = Array.from(rows).map(row => {\n      const cell = row.querySelectorAll('spw-table-cell')[columnIndex];\n      const cb = cell?.querySelector('spw-checkbox') as any;\n      return cb?.checked === true || cb?.getAttribute('checked') === 'true';\n    });\n\n    if (values.length === 0) return;\n\n    const allChecked = values.every(Boolean);\n    const noneChecked = values.every(v => !v);\n\n    if (!masterCheckbox) return;\n\n    if (allChecked) {\n      masterCheckbox.checked = true;\n      masterCheckbox.setAttribute('checked', 'true');\n      masterCheckbox.setAttribute('icon', 'fa-check');\n    } else if (noneChecked) {\n      masterCheckbox.checked = false;\n      masterCheckbox.setAttribute('checked', 'false');\n      masterCheckbox.setAttribute('icon', 'fa-check');\n    } else {\n      masterCheckbox.checked = true;\n      masterCheckbox.setAttribute('checked', 'true');\n      masterCheckbox.setAttribute('icon', 'fa-minus');\n    }\n  }\n\n  private setupHeaderCheckboxListener() {\n    const assignedElements = this.el.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) as HTMLElement[] | undefined;\n\n    if (!assignedElements) return;\n\n    const head = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-head');\n    if (!head) return;\n\n    const headerRows = head.querySelectorAll('spw-table-row');\n\n    headerRows.forEach(row => {\n      const checkboxes = row.querySelectorAll('spw-checkbox');\n      checkboxes.forEach(cb => {\n        cb.addEventListener('spwChange', (event: CustomEvent<boolean>) => {\n          this.toggleAllRowCheckboxes(event.detail);\n        });\n      });\n    });\n  }\n\n  private setupBodyCheckboxListener() {\n    const body = Array.from(this.el.children).find(el => el.tagName.toLowerCase() === 'spw-table-body');\n    if (!body) return;\n\n    const rows = body.querySelectorAll('spw-table-row');\n    rows.forEach(row => {\n      const checkboxes = row.querySelectorAll('spw-checkbox');\n      checkboxes.forEach(cb => {\n        cb.addEventListener('spwChange', () => this.updateMasterCheckboxState());\n      });\n    });\n  }\n\n  private toggleAllRowCheckboxes(checked: boolean) {\n    const columnIndex = this.getMasterCheckboxColumnIndex();\n    if (columnIndex === null) return;\n\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    const assignedElements = slot?.assignedElements({ flatten: true }) as HTMLElement[] | undefined;\n    if (!assignedElements) return;\n\n    const body = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-body');\n    if (!body) return;\n\n    const rows = body.querySelectorAll('spw-table-row');\n\n    rows.forEach(row => {\n      const cells = Array.from(row.querySelectorAll('spw-table-cell'));\n      const targetCell = cells[columnIndex];\n      const checkbox = targetCell?.querySelector('spw-checkbox') as any;\n\n      if (checkbox) {\n        checkbox.checked = checked;\n        checkbox.setAttribute('checked', checked.toString());\n      }\n    });\n\n    setTimeout(() => {\n      this.updateMasterCheckboxState();\n    }, 0);\n  }\n\n  @Listen('spwHeaderClick')\n  handleHeaderClick(event: CustomEvent<string>) {\n    const columnId = event.detail;\n    const current = this.currentSort;\n\n    const newSort: SortEvent = {\n      column: columnId,\n      direction: current?.column === columnId && current.direction === 'asc' ? 'desc' : 'asc',\n    };\n\n    this.currentSort = newSort;\n    this.spwSort.emit(newSort);\n    this.sortRows(newSort.column, newSort.direction);\n    this.updateHeadersSortState(newSort);\n    this.updateZebra();\n  }\n\n  private updateZebra() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    if (!slot) return;\n\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const body = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-body') as any;\n\n    if (body) {\n      if (this.isZebra) {\n        body.setAttribute('is-zebra', 'true');\n      } else {\n        body.removeAttribute('is-zebra');\n      }\n\n      if (typeof body.updateZebraStyles === 'function') {\n        body.updateZebraStyles();\n      }\n    }\n  }\n\n  private sortRows(columnId: string, direction: 'asc' | 'desc') {\n    const body = this.el.shadowRoot\n      .querySelector('slot')\n      ?.assignedElements()\n      .find(el => el.tagName.toLowerCase() === 'spw-table-body');\n    if (!body) return;\n\n    const rows = Array.from(body.querySelectorAll('spw-table-row'));\n\n    const columnIndex = Array.from(this.el.querySelectorAll('spw-table-header')).findIndex((header: any) => header.columnId === columnId);\n    if (columnIndex === -1) return;\n\n    rows.sort((a: any, b: any) => {\n      const aCell = a.querySelectorAll('spw-table-cell')[columnIndex];\n      const bCell = b.querySelectorAll('spw-table-cell')[columnIndex];\n      if (!aCell || !bCell) return 0;\n\n      const aValue = aCell.textContent.trim();\n      const bValue = bCell.textContent.trim();\n\n      if (!isNaN(Number(aValue)) && !isNaN(Number(bValue))) {\n        return direction === 'asc' ? +aValue - +bValue : +bValue - +aValue;\n      }\n\n      return direction === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);\n    });\n\n    rows.forEach(row => body.appendChild(row));\n\n    const bodyComponent = body as HTMLSpwTableBodyElement;\n    if (bodyComponent?.updateZebraStyles) {\n      bodyComponent.updateZebraStyles();\n    }\n  }\n\n  private updateHeadersSortState(sort: SortEvent) {\n    const headers = this.el.querySelectorAll('spw-table-header');\n    headers.forEach((header: any) => {\n      const isCurrent = header.columnId === sort.column;\n      header.isSorted = isCurrent;\n      header.sortDirection = isCurrent ? sort.direction : undefined;\n    });\n  }\n\n  private formatSize(value?: string): string {\n    if (value === undefined || value === null) {\n      return 'auto';\n    }\n    return `${value}px`;\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-table': true,\n      'spw-table--is-sticky': this.isSticky,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          '--spw-table-max-height': this.formatSize(this.maxHeight),\n          '--spw-table-min-width': this.formatSize(this.minWidth),\n        }}\n      >\n        <div class=\"spw-table-container\">\n          <table part=\"table\" class={this.elementClass} role=\"table\" aria-label={this.accAriaLabel}>\n            <slot />\n          </table>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}
+{"version":3,"file":"spw-table.entry.cjs.js","sources":["src/components/spw-table/spw-table.scss?tag=spw-table&encapsulation=shadow","src/components/spw-table/spw-table.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n%highlight {\n  font-weight: 700;\n  background: var(--spw-color-themes-grey-grey-100);\n}\n\n.spw-table-container {\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: var(--spw-table-max-height);\n  border-radius: 4px;\n  outline: 1px solid var(--spw-color-themes-grey-grey-300);\n  outline-offset: -1px;\n  position: relative;\n  @include scrollbars(var(--spw-color-themes-grey-grey-400), var(--spw-ds-white));\n}\n\n.spw-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: var(--spw-table-min-width);\n  border-radius: 4px;\n  position: relative;\n}\n","import { Component, Element, Event, Listen, State, EventEmitter, Host, Prop, h } from '@stencil/core';\n\nexport interface SortEvent {\n  column: string;\n  direction: 'asc' | 'desc';\n}\n\n@Component({\n  tag: 'spw-table',\n  styleUrl: 'spw-table.scss',\n  shadow: true,\n})\nexport class SpwTable {\n  @Element() el: HTMLSpwTableElement;\n\n  /** Propriété pour l'aria-label, à des fins d'accessibilité */\n  @Prop() accAriaLabel?: string;\n  /** Si le header du tableau doit être sticky ou non */\n  @Prop() isSticky?: boolean = false;\n  /** Si défini, apparition d'une scrollbar verticale et max-height  */\n  @Prop() maxHeight?: string;\n  /** Si défini, apparition d'une scrollbar horizontale et max-width  */\n  @Prop() minWidth?: string = '600';\n  /** Définit un background de couleur différent une ligne sur 2 */\n  @Prop() isZebra?: boolean = false;\n\n  @Event() spwSort: EventEmitter<SortEvent>;\n\n  @State() currentSort?: SortEvent;\n\n  componentDidLoad() {\n    this.updateZebra();\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    if (slot) {\n      slot.addEventListener('slotchange', () => {\n        this.setupHeaderCheckboxListener();\n        this.updateMasterCheckboxState();\n      });\n    }\n    this.setupHeaderCheckboxListener();\n    this.setupBodyCheckboxListener();\n    setTimeout(() => {\n      this.updateMasterCheckboxState();\n    }, 0);\n  }\n\n  private getMasterCheckboxColumnIndex(): number | null {\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    if (!slot) return null;\n\n    const assignedElements = slot.assignedElements({ flatten: true }) as HTMLElement[];\n    const head = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-head');\n    if (!head) return null;\n\n    const headerRow = head.querySelector('spw-table-row');\n    if (!headerRow) return null;\n\n    const headerCells = Array.from(headerRow.querySelectorAll('spw-table-header'));\n\n    for (let i = 0; i < headerCells.length; i++) {\n      if (headerCells[i].querySelector('spw-checkbox')) {\n        return i;\n      }\n    }\n\n    return null;\n  }\n\n  private isCheckboxDisabled(checkbox: any): boolean {\n    return checkbox?.disabled === true || checkbox?.getAttribute('disabled') === 'true' || checkbox?.getAttribute('disabled') === '';\n  }\n\n  private updateMasterCheckboxState() {\n    const columnIndex = this.getMasterCheckboxColumnIndex();\n    if (columnIndex === null) return;\n\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    const assignedElements = slot?.assignedElements({ flatten: true }) as HTMLElement[] | undefined;\n    if (!assignedElements) return;\n\n    const head = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-head');\n    const body = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-body');\n    if (!head || !body) return;\n\n    const headerRow = head.querySelector('spw-table-row');\n    const headerCell = headerRow?.querySelectorAll('spw-table-header')[columnIndex];\n    const masterCheckbox = headerCell?.querySelector('spw-checkbox') as any;\n\n    const rows = body.querySelectorAll('spw-table-row');\n    const checkboxData = Array.from(rows).map(row => {\n      const cell = row.querySelectorAll('spw-table-cell')[columnIndex];\n      const cb = cell?.querySelector('spw-checkbox') as any;\n      return {\n        checked: cb?.checked === true || cb?.getAttribute('checked') === 'true',\n        disabled: this.isCheckboxDisabled(cb),\n      };\n    });\n\n    const enabledCheckboxes = checkboxData.filter(item => !item.disabled);\n\n    if (enabledCheckboxes.length === 0) return;\n\n    const allChecked = enabledCheckboxes.every(item => item.checked);\n    const noneChecked = enabledCheckboxes.every(item => !item.checked);\n\n    if (!masterCheckbox) return;\n\n    if (allChecked) {\n      masterCheckbox.checked = true;\n      masterCheckbox.setAttribute('checked', 'true');\n      masterCheckbox.setAttribute('icon', 'fa-check');\n    } else if (noneChecked) {\n      masterCheckbox.checked = false;\n      masterCheckbox.setAttribute('checked', 'false');\n      masterCheckbox.setAttribute('icon', 'fa-check');\n    } else {\n      masterCheckbox.checked = true;\n      masterCheckbox.setAttribute('checked', 'true');\n      masterCheckbox.setAttribute('icon', 'fa-minus');\n    }\n  }\n\n  private setupHeaderCheckboxListener() {\n    const assignedElements = this.el.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) as HTMLElement[] | undefined;\n\n    if (!assignedElements) return;\n\n    const head = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-head');\n    if (!head) return;\n\n    const headerRows = head.querySelectorAll('spw-table-row');\n\n    headerRows.forEach(row => {\n      const checkboxes = row.querySelectorAll('spw-checkbox');\n      checkboxes.forEach(cb => {\n        cb.addEventListener('spwChange', (event: CustomEvent<boolean>) => {\n          this.toggleAllRowCheckboxes(event.detail);\n        });\n      });\n    });\n  }\n\n  private setupBodyCheckboxListener() {\n    const body = Array.from(this.el.children).find(el => el.tagName.toLowerCase() === 'spw-table-body');\n    if (!body) return;\n\n    const rows = body.querySelectorAll('spw-table-row');\n    rows.forEach(row => {\n      const checkboxes = row.querySelectorAll('spw-checkbox');\n      checkboxes.forEach(cb => {\n        cb.addEventListener('spwChange', () => this.updateMasterCheckboxState());\n      });\n    });\n  }\n\n  private toggleAllRowCheckboxes(checked: boolean) {\n    const columnIndex = this.getMasterCheckboxColumnIndex();\n    if (columnIndex === null) return;\n\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    const assignedElements = slot?.assignedElements({ flatten: true }) as HTMLElement[] | undefined;\n    if (!assignedElements) return;\n\n    const body = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-body');\n    if (!body) return;\n\n    const rows = body.querySelectorAll('spw-table-row');\n\n    rows.forEach(row => {\n      const cells = Array.from(row.querySelectorAll('spw-table-cell'));\n      const targetCell = cells[columnIndex];\n      const checkbox = targetCell?.querySelector('spw-checkbox') as any;\n\n      if (checkbox && !this.isCheckboxDisabled(checkbox)) {\n        checkbox.checked = checked;\n        checkbox.setAttribute('checked', checked.toString());\n      }\n    });\n\n    setTimeout(() => {\n      this.updateMasterCheckboxState();\n    }, 0);\n  }\n\n  @Listen('spwHeaderClick')\n  handleHeaderClick(event: CustomEvent<string>) {\n    const columnId = event.detail;\n    const current = this.currentSort;\n\n    const newSort: SortEvent = {\n      column: columnId,\n      direction: current?.column === columnId && current.direction === 'asc' ? 'desc' : 'asc',\n    };\n\n    this.currentSort = newSort;\n    this.spwSort.emit(newSort);\n    this.sortRows(newSort.column, newSort.direction);\n    this.updateHeadersSortState(newSort);\n    this.updateZebra();\n  }\n\n  private updateZebra() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    if (!slot) return;\n\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const body = assignedElements.find(el => el.tagName.toLowerCase() === 'spw-table-body') as any;\n\n    if (body) {\n      if (this.isZebra) {\n        body.setAttribute('is-zebra', 'true');\n      } else {\n        body.removeAttribute('is-zebra');\n      }\n\n      if (typeof body.updateZebraStyles === 'function') {\n        body.updateZebraStyles();\n      }\n    }\n  }\n\n  private sortRows(columnId: string, direction: 'asc' | 'desc') {\n    const body = this.el.shadowRoot\n      .querySelector('slot')\n      ?.assignedElements()\n      .find(el => el.tagName.toLowerCase() === 'spw-table-body');\n    if (!body) return;\n\n    const rows = Array.from(body.querySelectorAll('spw-table-row'));\n\n    const columnIndex = Array.from(this.el.querySelectorAll('spw-table-header')).findIndex((header: any) => header.columnId === columnId);\n    if (columnIndex === -1) return;\n\n    rows.sort((a: any, b: any) => {\n      const aCell = a.querySelectorAll('spw-table-cell')[columnIndex];\n      const bCell = b.querySelectorAll('spw-table-cell')[columnIndex];\n      if (!aCell || !bCell) return 0;\n\n      const aValue = aCell.textContent.trim();\n      const bValue = bCell.textContent.trim();\n\n      if (!isNaN(Number(aValue)) && !isNaN(Number(bValue))) {\n        return direction === 'asc' ? +aValue - +bValue : +bValue - +aValue;\n      }\n\n      return direction === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);\n    });\n\n    rows.forEach(row => body.appendChild(row));\n\n    const bodyComponent = body as HTMLSpwTableBodyElement;\n    if (bodyComponent?.updateZebraStyles) {\n      bodyComponent.updateZebraStyles();\n    }\n  }\n\n  private updateHeadersSortState(sort: SortEvent) {\n    const headers = this.el.querySelectorAll('spw-table-header');\n    headers.forEach((header: any) => {\n      const isCurrent = header.columnId === sort.column;\n      header.isSorted = isCurrent;\n      header.sortDirection = isCurrent ? sort.direction : undefined;\n    });\n  }\n\n  private formatSize(value?: string): string {\n    if (value === undefined || value === null) {\n      return 'auto';\n    }\n    return `${value}px`;\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-table': true,\n      'spw-table--is-sticky': this.isSticky,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          '--spw-table-max-height': this.formatSize(this.maxHeight),\n          '--spw-table-min-width': this.formatSize(this.minWidth),\n        }}\n      >\n        <div class=\"spw-table-container\">\n          <table part=\"table\" class={this.elementClass} role=\"table\" aria-label={this.accAriaLabel}>\n            <slot />\n          </table>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,qzGAAqzG;;MCY5zG,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAWU,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;;AAI1B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEzB,QAAA,IAAO,CAAA,OAAA,GAAa,KAAK;AA+QlC;IAzQC,gBAAgB,GAAA;;QACd,IAAI,CAAC,WAAW,EAAE;AAClB,QAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,MAAM,CAAC;QACtD,IAAI,IAAI,EAAE;AACR,YAAA,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAK;gBACvC,IAAI,CAAC,2BAA2B,EAAE;gBAClC,IAAI,CAAC,yBAAyB,EAAE;AAClC,aAAC,CAAC;;QAEJ,IAAI,CAAC,2BAA2B,EAAE;QAClC,IAAI,CAAC,yBAAyB,EAAE;QAChC,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,yBAAyB,EAAE;SACjC,EAAE,CAAC,CAAC;;IAGC,4BAA4B,GAAA;;AAClC,QAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,MAAM,CAAC;AACtD,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,IAAI;AAEtB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAkB;AAClF,QAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CAAC;AACvF,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,IAAI;QAEtB,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;AACrD,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,IAAI;AAE3B,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAE9E,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC3C,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE;AAChD,gBAAA,OAAO,CAAC;;;AAIZ,QAAA,OAAO,IAAI;;AAGL,IAAA,kBAAkB,CAAC,QAAa,EAAA;AACtC,QAAA,OAAO,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAE,QAAQ,MAAK,IAAI,IAAI,CAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAE,YAAY,CAAC,UAAU,CAAC,MAAK,MAAM,IAAI,CAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,MAAA,GAAA,MAAA,GAAA,QAAQ,CAAE,YAAY,CAAC,UAAU,CAAC,MAAK,EAAE;;IAG1H,yBAAyB,GAAA;;AAC/B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,4BAA4B,EAAE;QACvD,IAAI,WAAW,KAAK,IAAI;YAAE;AAE1B,QAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,MAAM,CAAC;AACtD,QAAA,MAAM,gBAAgB,GAAG,IAAI,KAAJ,IAAA,IAAA,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAA8B;AAC/F,QAAA,IAAI,CAAC,gBAAgB;YAAE;AAEvB,QAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CAAC;AACvF,QAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CAAC;AACvF,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI;YAAE;QAEpB,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;QACrD,MAAM,UAAU,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,MAAA,GAAA,MAAA,GAAA,SAAS,CAAE,gBAAgB,CAAC,kBAAkB,CAAE,CAAA,WAAW,CAAC;QAC/E,MAAM,cAAc,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,aAAa,CAAC,cAAc,CAAQ;QAEvE,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC;AACnD,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,IAAG;YAC9C,MAAM,IAAI,GAAG,GAAG,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC;YAChE,MAAM,EAAE,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,aAAa,CAAC,cAAc,CAAQ;YACrD,OAAO;gBACL,OAAO,EAAE,CAAA,EAAE,KAAF,IAAA,IAAA,EAAE,uBAAF,EAAE,CAAE,OAAO,MAAK,IAAI,IAAI,CAAA,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAA,MAAA,GAAF,EAAE,CAAE,YAAY,CAAC,SAAS,CAAC,MAAK,MAAM;AACvE,gBAAA,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC;aACtC;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAG,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;AAErE,QAAA,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC;YAAE;AAEpC,QAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC;AAChE,QAAA,MAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAElE,QAAA,IAAI,CAAC,cAAc;YAAE;QAErB,IAAI,UAAU,EAAE;AACd,YAAA,cAAc,CAAC,OAAO,GAAG,IAAI;AAC7B,YAAA,cAAc,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC;AAC9C,YAAA,cAAc,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;;aAC1C,IAAI,WAAW,EAAE;AACtB,YAAA,cAAc,CAAC,OAAO,GAAG,KAAK;AAC9B,YAAA,cAAc,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC;AAC/C,YAAA,cAAc,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;;aAC1C;AACL,YAAA,cAAc,CAAC,OAAO,GAAG,IAAI;AAC7B,YAAA,cAAc,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC;AAC9C,YAAA,cAAc,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;;;IAI3C,2BAA2B,GAAA;;AACjC,QAAA,MAAM,gBAAgB,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,MAAM,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAA8B;AAEpI,QAAA,IAAI,CAAC,gBAAgB;YAAE;AAEvB,QAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CAAC;AACvF,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC;AAEzD,QAAA,UAAU,CAAC,OAAO,CAAC,GAAG,IAAG;YACvB,MAAM,UAAU,GAAG,GAAG,CAAC,gBAAgB,CAAC,cAAc,CAAC;AACvD,YAAA,UAAU,CAAC,OAAO,CAAC,EAAE,IAAG;gBACtB,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAA2B,KAAI;AAC/D,oBAAA,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAC;AAC3C,iBAAC,CAAC;AACJ,aAAC,CAAC;AACJ,SAAC,CAAC;;IAGI,yBAAyB,GAAA;AAC/B,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CAAC;AACnG,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC;AACnD,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,IAAG;YACjB,MAAM,UAAU,GAAG,GAAG,CAAC,gBAAgB,CAAC,cAAc,CAAC;AACvD,YAAA,UAAU,CAAC,OAAO,CAAC,EAAE,IAAG;AACtB,gBAAA,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,IAAI,CAAC,yBAAyB,EAAE,CAAC;AAC1E,aAAC,CAAC;AACJ,SAAC,CAAC;;AAGI,IAAA,sBAAsB,CAAC,OAAgB,EAAA;;AAC7C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,4BAA4B,EAAE;QACvD,IAAI,WAAW,KAAK,IAAI;YAAE;AAE1B,QAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,MAAM,CAAC;AACtD,QAAA,MAAM,gBAAgB,GAAG,IAAI,KAAJ,IAAA,IAAA,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAA8B;AAC/F,QAAA,IAAI,CAAC,gBAAgB;YAAE;AAEvB,QAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CAAC;AACvF,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC;AAEnD,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,IAAG;AACjB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAChE,YAAA,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC;YACrC,MAAM,QAAQ,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,aAAa,CAAC,cAAc,CAAQ;YAEjE,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE;AAClD,gBAAA,QAAQ,CAAC,OAAO,GAAG,OAAO;gBAC1B,QAAQ,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE,CAAC;;AAExD,SAAC,CAAC;QAEF,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,yBAAyB,EAAE;SACjC,EAAE,CAAC,CAAC;;AAIP,IAAA,iBAAiB,CAAC,KAA0B,EAAA;AAC1C,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM;AAC7B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW;AAEhC,QAAA,MAAM,OAAO,GAAc;AACzB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,SAAS,EAAE,CAAA,OAAO,KAAP,IAAA,IAAA,OAAO,uBAAP,OAAO,CAAE,MAAM,MAAK,QAAQ,IAAI,OAAO,CAAC,SAAS,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK;SACxF;AAED,QAAA,IAAI,CAAC,WAAW,GAAG,OAAO;AAC1B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QAC1B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC;AAChD,QAAA,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,WAAW,EAAE;;IAGZ,WAAW,GAAA;AACjB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC;AACrD,QAAA,IAAI,CAAC,IAAI;YAAE;AAEX,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACjE,QAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CAAQ;QAE9F,IAAI,IAAI,EAAE;AACR,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,gBAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC;;iBAChC;AACL,gBAAA,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC;;AAGlC,YAAA,IAAI,OAAO,IAAI,CAAC,iBAAiB,KAAK,UAAU,EAAE;gBAChD,IAAI,CAAC,iBAAiB,EAAE;;;;IAKtB,QAAQ,CAAC,QAAgB,EAAE,SAAyB,EAAA;;QAC1D,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC;AAClB,aAAA,aAAa,CAAC,MAAM,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CACpB,gBAAgB,EACjB,CAAA,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CAAC;AAC5D,QAAA,IAAI,CAAC,IAAI;YAAE;AAEX,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAE/D,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,MAAW,KAAK,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC;QACrI,IAAI,WAAW,KAAK,EAAE;YAAE;QAExB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAM,EAAE,CAAM,KAAI;YAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC;YAC/D,MAAM,KAAK,GAAG,CAAC,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC;AAC/D,YAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;AAAE,gBAAA,OAAO,CAAC;YAE9B,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE;YACvC,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE;AAEvC,YAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE;AACpD,gBAAA,OAAO,SAAS,KAAK,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,MAAM,GAAG,CAAC,MAAM,GAAG,CAAC,MAAM;;YAGpE,OAAO,SAAS,KAAK,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC;AAC1F,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAE1C,MAAM,aAAa,GAAG,IAA+B;QACrD,IAAI,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,iBAAiB,EAAE;YACpC,aAAa,CAAC,iBAAiB,EAAE;;;AAI7B,IAAA,sBAAsB,CAAC,IAAe,EAAA;QAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;AAC5D,QAAA,OAAO,CAAC,OAAO,CAAC,CAAC,MAAW,KAAI;YAC9B,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,KAAK,IAAI,CAAC,MAAM;AACjD,YAAA,MAAM,CAAC,QAAQ,GAAG,SAAS;AAC3B,YAAA,MAAM,CAAC,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS;AAC/D,SAAC,CAAC;;AAGI,IAAA,UAAU,CAAC,KAAc,EAAA;QAC/B,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;AACzC,YAAA,OAAO,MAAM;;QAEf,OAAO,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI;;AAGrB,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,WAAW,EAAE,IAAI;YACjB,sBAAsB,EAAE,IAAI,CAAC,QAAQ;SACtC;;IAGH,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC;gBACzD,uBAAuB,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC;aACxD,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9BA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAC,OAAO,EAAa,YAAA,EAAA,IAAI,CAAC,YAAY,EAAA,EACtFA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACF,CACJ,CACD;;;;;;;;"}

package/dist/cjs/spw-tabs-content.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DPoQq9TD.js');
+var index = require('./index-iVhYitTd.js');
 
 const spwTabsContentCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host(.--box) .spw-tabs-content{background:#fff;border:1px solid var(--spw-colors-support-grey-grey-300);border-radius:0 0 4px 4px}";
 

package/dist/cjs/spw-tabs-navigation-item.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DPoQq9TD.js');
+var index = require('./index-iVhYitTd.js');
 
-const spwTabsNavigationItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;--spw-tabs-max-width-text:200px;--spw-tabs-border-radius:4px 4px 0 0;--spw-tabs-margin-left:0;box-sizing:border-box;display:contents;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-tabs-navigation-item{color:var(--spw-colors-support-grey-grey-700);cursor:pointer;font-size:14px;padding:8px 0 12px;position:relative;transition:color .2s linear;-webkit-user-select:none;-moz-user-select:none;user-select:none}.spw-tabs-navigation-item:hover{color:var(--spw-colors-support-grey-grey-900)}:host(.--box) .spw-tabs-navigation-item:hover{color:var(--spw-colors-support-grey-grey-900)}.spw-tabs-navigation-item:focus-visible{outline:2px solid #000;outline-offset:-2px}:host(.--box) .spw-tabs-navigation-item{background:var(--spw-colors-support-grey-grey-100);border:1px solid var(--spw-colors-support-grey-grey-300);border-radius:var(--spw-tabs-border-radius);color:var(--spw-colors-support-grey-grey-600);margin-left:var(--spw-tabs-margin-left);margin-top:3px;padding:7px 16px 6px}.spw-tabs-navigation-item--disabled{cursor:not-allowed;opacity:.6}.spw-tabs-navigation-item--disabled:hover{color:var(--spw-colors-support-grey-grey-700)}:host(.--box) .spw-tabs-navigation-item--disabled{color:var(--spw-colors-support-grey-grey-400);opacity:1}:host(.--box) .spw-tabs-navigation-item--disabled:hover{color:var(--spw-colors-support-grey-grey-400)}:host(.--box) .spw-tabs-navigation-item--disabled:active{transform:none}.spw-tabs-navigation-item--active{color:var(--spw-colors-support-grey-grey-900)}.spw-tabs-navigation-item--active:after{background:var(--spw-ds-primary);bottom:0;content:\"\";height:2px;left:0;position:absolute;width:100%}:host(.--box) .spw-tabs-navigation-item--active{background:#fff;border-bottom-color:transparent;color:var(--spw-colors-support-grey-grey-900);margin-top:0;padding:8px 16px}:host(.--box) .spw-tabs-navigation-item--active:after{display:none}.spw-tabs-navigation-item--bubble:before{background:var(--spw-ds-primary);border-radius:50%;content:\"\";height:6px;position:absolute;right:-8px;top:2px;width:6px}:host(.--box) .spw-tabs-navigation-item--bubble:before{right:4px;top:4px}:host(.--ellipsis) .spw-tabs-navigation-item{max-width:var(--spw-tabs-max-width-text);overflow:hidden;text-overflow:ellipsis}";
+const spwTabsNavigationItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;--spw-tabs-max-width-text:200px;--spw-tabs-border-radius:4px 4px 0 0;--spw-tabs-margin-left:0;box-sizing:border-box;display:contents;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-tabs-navigation-item{color:var(--spw-colors-support-grey-grey-700);cursor:pointer;position:relative;transition:color .2s linear;-webkit-user-select:none;-moz-user-select:none;user-select:none}.spw-tabs-navigation-item:hover{color:var(--spw-colors-support-grey-grey-900)}:host(.--box) .spw-tabs-navigation-item:hover{color:var(--spw-colors-support-grey-grey-900)}.spw-tabs-navigation-item:focus-visible{outline:2px solid #000;outline-offset:-2px}:host(.--box) .spw-tabs-navigation-item{background:var(--spw-colors-support-grey-grey-100);border:1px solid var(--spw-colors-support-grey-grey-300);border-radius:var(--spw-tabs-border-radius);color:var(--spw-colors-support-grey-grey-600);margin-left:var(--spw-tabs-margin-left);margin-top:3px}.spw-tabs-navigation-item--disabled{cursor:not-allowed;opacity:.6}.spw-tabs-navigation-item--disabled:hover{color:var(--spw-colors-support-grey-grey-700)}:host(.--box) .spw-tabs-navigation-item--disabled{color:var(--spw-colors-support-grey-grey-400);opacity:1}:host(.--box) .spw-tabs-navigation-item--disabled:hover{color:var(--spw-colors-support-grey-grey-400)}:host(.--box) .spw-tabs-navigation-item--disabled:active{transform:none}.spw-tabs-navigation-item--active{border-bottom:0;color:var(--spw-colors-support-grey-grey-900)}.spw-tabs-navigation-item--active:after{background:var(--spw-ds-primary);bottom:0;content:\"\";height:2px;left:0;position:absolute;width:100%}:host(.--box) .spw-tabs-navigation-item--active{background:#fff;color:var(--spw-colors-support-grey-grey-900);margin-top:0;position:relative;top:1px}:host(.--box) .spw-tabs-navigation-item--active:after{display:none}.spw-tabs-navigation-item--bubble:before{background:var(--spw-ds-primary);border-radius:50%;content:\"\";height:6px;position:absolute;right:-8px;top:2px;width:6px}:host(.--box) .spw-tabs-navigation-item--bubble:before{right:4px;top:4px}:host(.--ellipsis) .spw-tabs-navigation-item{flex-shrink:0;max-width:var(--spw-tabs-max-width-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.--ellipsis) .spw-tabs-navigation-item spw-tooltip{display:contents}:host(.--small) .spw-tabs-navigation-item{font-size:14px;padding:8px 0 12px}:host(.--small.--box) .spw-tabs-navigation-item{padding:7px 16px 6px}:host(.--small.--box) .spw-tabs-navigation-item .spw-tabs-navigation-item--active{padding:8px 16px}:host(.--medium) .spw-tabs-navigation-item{font-size:16px;padding:12px 0 16px}:host(.--medium.--box) .spw-tabs-navigation-item{padding:11px 16px 10px}:host(.--medium.--box) .spw-tabs-navigation-item .spw-tabs-navigation-item--active{padding:12px 16px}:host(.--large) .spw-tabs-navigation-item{font-size:18px;padding:16px 0 20px}:host(.--large.--box) .spw-tabs-navigation-item{padding:15px 20px 14px}:host(.--large.--box) .spw-tabs-navigation-item .spw-tabs-navigation-item--active{padding:16px 20px}.spw-tabs-navigation-item .spw-icon--left{margin-right:4px}.spw-tabs-navigation-item .spw-icon--right{margin-left:4px}";
 
 const SpwTabsNavigationItem = class {
     constructor(hostRef) {
@@ -62,7 +62,10 @@ const SpwTabsNavigationItem = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'b5f5ba80518a0280d25f2e5ce2d2eea33b7f0547', class: this.active ? '--active' : '' }, index.h("li", { key: 'e198a88b0be47c3d5f73da337dff90ad03c79801', id: `tab-${this.tabId}`, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `panel-${this.tabId}`, "aria-label": this.slotText, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0, class: this.elementClass, onClick: this.handleClick, title: this.hasEllipsis ? this.slotText : undefined }, index.h("slot", { key: '62bdf41c1e4b6c96f3146be38ba909c9ea0f4a81' }), this.bubble && index.h("span", { key: '9bc854ccfce8464ee8e5878a29f10f92ff417e4d', class: "bubble" }))));
+        const iconPosition = this.icon && !this.iconPosition ? 'right' : this.iconPosition;
+        const iconClass = `spw-icon--${iconPosition}`;
+        const iconElement = this.icon ? index.h("spw-icon", { class: iconClass, icon: this.icon }) : null;
+        return (index.h(index.Host, { key: '2c8b4f33a4ce4b0d93d19f60d71c5e98493f9b61', class: this.active ? '--active' : '' }, index.h("li", { key: '13bd151dd875a78cb40a1dbccd572d1c27fc498d', id: `tab-${this.tabId}`, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `panel-${this.tabId}`, "aria-label": this.slotText, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0, class: this.elementClass, onClick: this.handleClick }, this.hasEllipsis && (index.h("spw-tooltip", { key: '4a23e2eabd0c9ebfd3a4a8585bf4c970588324e0', cursor: this.disabled ? 'disabled' : 'pointer', class: "spw-tooltip--has-ellipsis", tooltipText: this.slotText }, iconPosition === 'left' && iconElement, index.h("slot", { key: '6c2b2f731b1e33fa59970126366b0fec3a195351' }), iconPosition === 'right' && iconElement)), !this.hasEllipsis && (index.h(index.Fragment, { key: '1512342a37d70d6f77261c827b04a7fef5bb3518' }, iconPosition === 'left' && iconElement, index.h("slot", { key: 'e922274eabdd91e4ed47cda20f79e9214e7cbc73' }), iconPosition === 'right' && iconElement)), ' ', this.bubble && index.h("span", { key: '88b495cdbf39dabff8a04231da392e78f43e39c4', class: "bubble" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/spw-tabs-navigation-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"spw-tabs-navigation-item.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.scss?tag=spw-tabs-navigation-item&encapsulation=shadow","src/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.tsx"],"sourcesContent":[":host {\n  display: contents;\n  --spw-tabs-max-width-text: 200px;\n  --spw-tabs-border-radius: 4px 4px 0 0;\n  --spw-tabs-margin-left: 0;\n}\n\n.spw-tabs-navigation-item {\n  position: relative;\n  cursor: pointer;\n  padding: 8px 0 12px 0;\n  font-size: 14px;\n  color: var(--spw-colors-support-grey-grey-700);\n  user-select: none;\n  transition: color 0.2s linear;\n  &:hover {\n    color: var(--spw-colors-support-grey-grey-900);\n    :host(.--box) & {\n      color: var(--spw-colors-support-grey-grey-900);\n    }\n  }\n  &:focus-visible {\n    outline: 2px solid black;\n    outline-offset: -2px;\n  }\n  :host(.--box) & {\n    background: var(--spw-colors-support-grey-grey-100);\n    color: var(--spw-colors-support-grey-grey-600);\n    border: 1px solid var(--spw-colors-support-grey-grey-300);\n    padding: 7px 16px 6px 16px;\n    margin-top: 3px;\n    border-radius: var(--spw-tabs-border-radius);\n    margin-left: var(--spw-tabs-margin-left);\n  }\n  &--disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n    &:hover {\n      color: var(--spw-colors-support-grey-grey-700);\n    }\n    :host(.--box) & {\n      opacity: 1;\n      color: var(--spw-colors-support-grey-grey-400);\n      &:hover {\n        color: var(--spw-colors-support-grey-grey-400);\n      }\n      &:active {\n        transform: none;\n      }\n    }\n  }\n  &--active {\n    color: var(--spw-colors-support-grey-grey-900);\n    &:after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      bottom: 0;\n      left: 0;\n      height: 2px;\n      background: var(--spw-ds-primary);\n    }\n    :host(.--box) & {\n      color: var(--spw-colors-support-grey-grey-900);\n      background: white;\n      border-bottom-color: transparent;\n      padding: 8px 16px;\n      margin-top: 0;\n      &:after {\n        display: none;\n      }\n    }\n  }\n  &--bubble {\n    &:before {\n      content: '';\n      position: absolute;\n      top: 2px;\n      right: -8px;\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--spw-ds-primary);\n      :host(.--box) & {\n        top: 4px;\n        right: 4px;\n      }\n    }\n  }\n  :host(.--ellipsis) & {\n    max-width: var(--spw-tabs-max-width-text);\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n","import { Component, h, Element, Prop, Event, State, EventEmitter, Host, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'spw-tabs-navigation-item',\n  styleUrl: 'spw-tabs-navigation-item.scss',\n  shadow: true,\n})\nexport class SpwTabsNavigationItem {\n  @Element() el: HTMLElement;\n\n  /** Définit un id pour le tab */\n  @Prop() tabId!: string;\n  /** Définit si le tab est actif ou non */\n  @Prop() active: boolean = false;\n  /** Définit si le tab est disabled ou non */\n  @Prop() disabled: boolean = false;\n  /** Prévoit la présence d'une pastille sur l'élément de navigation */\n  @Prop() bubble: boolean = false;\n  /** Définit si le texte doit être coupé pour les onglets au titre trop long */\n  @Prop() hasEllipsis?: boolean;\n\n  @State() slotText: string = '';\n\n  @Event() tabSelected: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.updateSlotText();\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.updateSlotText();\n  }\n\n  private updateSlotText() {\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    if (slot) {\n      const assignedNodes = slot.assignedNodes({ flatten: true });\n      const text = assignedNodes\n        .filter(n => n.nodeType === Node.TEXT_NODE || n.nodeType === Node.ELEMENT_NODE)\n        .map(n => (n as HTMLElement | Text).textContent?.trim())\n        .join(' ')\n        .trim();\n\n      this.slotText = text || '';\n    }\n  }\n\n  private handleClick = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (!this.disabled) {\n      this.tabSelected.emit(this.tabId);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    const key = event.key;\n    if (key === 'Enter' || key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.tabSelected.emit(this.tabId);\n    }\n  };\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-tabs-navigation-item': true,\n      'spw-tabs-navigation-item--active': this.active,\n      'spw-tabs-navigation-item--disabled': this.disabled,\n      'spw-tabs-navigation-item--bubble': this.bubble,\n      'spw-tabs-navigation-item--ellipsis': this.hasEllipsis,\n    };\n  }\n\n  render() {\n    return (\n      <Host class={this.active ? '--active' : ''}>\n        <li\n          id={`tab-${this.tabId}`}\n          role=\"tab\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-controls={`panel-${this.tabId}`}\n          aria-label={this.slotText}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={this.disabled ? -1 : 0}\n          class={this.elementClass}\n          onClick={this.handleClick}\n          title={this.hasEllipsis ? this.slotText : undefined}\n        >\n          <slot></slot>\n          {this.bubble && <span class=\"bubble\"></span>}\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"spw-tabs-navigation-item.entry.cjs.js","mappings":"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","names":["h","Host","Fragment"],"sources":["src/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.scss?tag=spw-tabs-navigation-item&encapsulation=shadow","src/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.tsx"],"sourcesContent":[":host {\n  display: contents;\n  --spw-tabs-max-width-text: 200px;\n  --spw-tabs-border-radius: 4px 4px 0 0;\n  --spw-tabs-margin-left: 0;\n}\n\n.spw-tabs-navigation-item {\n  position: relative;\n  cursor: pointer;\n  color: var(--spw-colors-support-grey-grey-700);\n  user-select: none;\n  transition: color 0.2s linear;\n  &:hover {\n    color: var(--spw-colors-support-grey-grey-900);\n    :host(.--box) & {\n      color: var(--spw-colors-support-grey-grey-900);\n    }\n  }\n  &:focus-visible {\n    outline: 2px solid black;\n    outline-offset: -2px;\n  }\n  :host(.--box) & {\n    background: var(--spw-colors-support-grey-grey-100);\n    color: var(--spw-colors-support-grey-grey-600);\n    border: 1px solid var(--spw-colors-support-grey-grey-300);\n    margin-top: 3px;\n    border-radius: var(--spw-tabs-border-radius);\n    margin-left: var(--spw-tabs-margin-left);\n  }\n  &--disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n    &:hover {\n      color: var(--spw-colors-support-grey-grey-700);\n    }\n    :host(.--box) & {\n      opacity: 1;\n      color: var(--spw-colors-support-grey-grey-400);\n      &:hover {\n        color: var(--spw-colors-support-grey-grey-400);\n      }\n      &:active {\n        transform: none;\n      }\n    }\n  }\n  &--active {\n    border-bottom: 0;\n    color: var(--spw-colors-support-grey-grey-900);\n    &:after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      bottom: 0;\n      left: 0;\n      height: 2px;\n      background: var(--spw-ds-primary);\n    }\n    :host(.--box) & {\n      position: relative;\n      top: 1px;\n      color: var(--spw-colors-support-grey-grey-900);\n      background: white;\n      // border-bottom-color: transparent;\n      margin-top: 0;\n      &:after {\n        display: none;\n      }\n    }\n  }\n  &--bubble {\n    &:before {\n      content: '';\n      position: absolute;\n      top: 2px;\n      right: -8px;\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--spw-ds-primary);\n      :host(.--box) & {\n        top: 4px;\n        right: 4px;\n      }\n    }\n  }\n  :host(.--ellipsis) & {\n    max-width: var(--spw-tabs-max-width-text);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex-shrink: 0;\n    spw-tooltip {\n      display: contents;\n    }\n  }\n  :host(.--small) & {\n    padding: 8px 0 12px 0;\n    font-size: 14px;\n  }\n  :host(.--small.--box) & {\n    padding: 7px 16px 6px 16px;\n    .spw-tabs-navigation-item--active {\n      padding: 8px 16px;\n    }\n  }\n  :host(.--medium) & {\n    padding: 12px 0 16px 0;\n    font-size: 16px;\n  }\n  :host(.--medium.--box) & {\n    padding: 11px 16px 10px 16px;\n    .spw-tabs-navigation-item--active {\n      padding: 12px 16px;\n    }\n  }\n  :host(.--large) & {\n    padding: 16px 0 20px 0;\n    font-size: 18px;\n  }\n  :host(.--large.--box) & {\n    padding: 15px 20px 14px 20px;\n    .spw-tabs-navigation-item--active {\n      padding: 16px 20px;\n    }\n  }\n  .spw-icon {\n    &--left {\n      margin-right: 4px;\n    }\n    &--right {\n      margin-left: 4px;\n    }\n  }\n}\n","import { Component, h, Fragment, Element, Prop, Event, State, EventEmitter, Host, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'spw-tabs-navigation-item',\n  styleUrl: 'spw-tabs-navigation-item.scss',\n  shadow: true,\n})\nexport class SpwTabsNavigationItem {\n  @Element() el: HTMLElement;\n\n  /** Définit un id pour le tab */\n  @Prop() tabId!: string;\n  /** Définit si le tab est actif ou non */\n  @Prop() active: boolean = false;\n  /** Définit si le tab est disabled ou non */\n  @Prop() disabled: boolean = false;\n  /** Prévoit la présence d'une pastille sur l'élément de navigation */\n  @Prop() bubble: boolean = false;\n  /** Définit si le texte doit être coupé pour les onglets au titre trop long */\n  @Prop() hasEllipsis?: boolean;\n  /** Si rempli, vous pouvez utiliser une référence d'icône font-awesome sur le spw-tabs-navigation-item */\n  @Prop() icon?: string;\n  /** Position de l'icône à l'intérieur du bouton sur le spw-tabs-navigation-item */\n  @Prop() iconPosition?: 'left' | 'right';\n\n  @State() slotText: string = '';\n\n  @Event() tabSelected: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.updateSlotText();\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.updateSlotText();\n  }\n\n  private updateSlotText() {\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    if (slot) {\n      const assignedNodes = slot.assignedNodes({ flatten: true });\n      const text = assignedNodes\n        .filter(n => n.nodeType === Node.TEXT_NODE || n.nodeType === Node.ELEMENT_NODE)\n        .map(n => (n as HTMLElement | Text).textContent?.trim())\n        .join(' ')\n        .trim();\n\n      this.slotText = text || '';\n    }\n  }\n\n  private handleClick = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (!this.disabled) {\n      this.tabSelected.emit(this.tabId);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    const key = event.key;\n    if (key === 'Enter' || key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.tabSelected.emit(this.tabId);\n    }\n  };\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-tabs-navigation-item': true,\n      'spw-tabs-navigation-item--active': this.active,\n      'spw-tabs-navigation-item--disabled': this.disabled,\n      'spw-tabs-navigation-item--bubble': this.bubble,\n      'spw-tabs-navigation-item--ellipsis': this.hasEllipsis,\n    };\n  }\n\n  render() {\n    const iconPosition = this.icon && !this.iconPosition ? 'right' : this.iconPosition;\n    const iconClass = `spw-icon--${iconPosition}`;\n    const iconElement = this.icon ? <spw-icon class={iconClass} icon={this.icon}></spw-icon> : null;\n\n    return (\n      <Host class={this.active ? '--active' : ''}>\n        <li\n          id={`tab-${this.tabId}`}\n          role=\"tab\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-controls={`panel-${this.tabId}`}\n          aria-label={this.slotText}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={this.disabled ? -1 : 0}\n          class={this.elementClass}\n          onClick={this.handleClick}\n        >\n          {this.hasEllipsis && (\n            <spw-tooltip cursor={this.disabled ? 'disabled' : 'pointer'} class=\"spw-tooltip--has-ellipsis\" tooltipText={this.slotText}>\n              {iconPosition === 'left' && iconElement}\n              <slot></slot>\n              {iconPosition === 'right' && iconElement}\n            </spw-tooltip>\n          )}\n          {!this.hasEllipsis && (\n            <Fragment>\n              {iconPosition === 'left' && iconElement}\n              <slot></slot>\n              {iconPosition === 'right' && iconElement}\n            </Fragment>\n          )}{' '}\n          {this.bubble && <span class=\"bubble\"></span>}\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/spw-tabs-navigation-item.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-tabs-navigation-item.entry.cjs.js","sources":["src/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.scss?tag=spw-tabs-navigation-item&encapsulation=shadow","src/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.tsx"],"sourcesContent":[":host {\n  display: contents;\n  --spw-tabs-max-width-text: 200px;\n  --spw-tabs-border-radius: 4px 4px 0 0;\n  --spw-tabs-margin-left: 0;\n}\n\n.spw-tabs-navigation-item {\n  position: relative;\n  cursor: pointer;\n  padding: 8px 0 12px 0;\n  font-size: 14px;\n  color: var(--spw-colors-support-grey-grey-700);\n  user-select: none;\n  transition: color 0.2s linear;\n  &:hover {\n    color: var(--spw-colors-support-grey-grey-900);\n    :host(.--box) & {\n      color: var(--spw-colors-support-grey-grey-900);\n    }\n  }\n  &:focus-visible {\n    outline: 2px solid black;\n    outline-offset: -2px;\n  }\n  :host(.--box) & {\n    background: var(--spw-colors-support-grey-grey-100);\n    color: var(--spw-colors-support-grey-grey-600);\n    border: 1px solid var(--spw-colors-support-grey-grey-300);\n    padding: 7px 16px 6px 16px;\n    margin-top: 3px;\n    border-radius: var(--spw-tabs-border-radius);\n    margin-left: var(--spw-tabs-margin-left);\n  }\n  &--disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n    &:hover {\n      color: var(--spw-colors-support-grey-grey-700);\n    }\n    :host(.--box) & {\n      opacity: 1;\n      color: var(--spw-colors-support-grey-grey-400);\n      &:hover {\n        color: var(--spw-colors-support-grey-grey-400);\n      }\n      &:active {\n        transform: none;\n      }\n    }\n  }\n  &--active {\n    color: var(--spw-colors-support-grey-grey-900);\n    &:after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      bottom: 0;\n      left: 0;\n      height: 2px;\n      background: var(--spw-ds-primary);\n    }\n    :host(.--box) & {\n      color: var(--spw-colors-support-grey-grey-900);\n      background: white;\n      border-bottom-color: transparent;\n      padding: 8px 16px;\n      margin-top: 0;\n      &:after {\n        display: none;\n      }\n    }\n  }\n  &--bubble {\n    &:before {\n      content: '';\n      position: absolute;\n      top: 2px;\n      right: -8px;\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--spw-ds-primary);\n      :host(.--box) & {\n        top: 4px;\n        right: 4px;\n      }\n    }\n  }\n  :host(.--ellipsis) & {\n    max-width: var(--spw-tabs-max-width-text);\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n","import { Component, h, Element, Prop, Event, State, EventEmitter, Host, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'spw-tabs-navigation-item',\n  styleUrl: 'spw-tabs-navigation-item.scss',\n  shadow: true,\n})\nexport class SpwTabsNavigationItem {\n  @Element() el: HTMLElement;\n\n  /** Définit un id pour le tab */\n  @Prop() tabId!: string;\n  /** Définit si le tab est actif ou non */\n  @Prop() active: boolean = false;\n  /** Définit si le tab est disabled ou non */\n  @Prop() disabled: boolean = false;\n  /** Prévoit la présence d'une pastille sur l'élément de navigation */\n  @Prop() bubble: boolean = false;\n  /** Définit si le texte doit être coupé pour les onglets au titre trop long */\n  @Prop() hasEllipsis?: boolean;\n\n  @State() slotText: string = '';\n\n  @Event() tabSelected: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.updateSlotText();\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.updateSlotText();\n  }\n\n  private updateSlotText() {\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    if (slot) {\n      const assignedNodes = slot.assignedNodes({ flatten: true });\n      const text = assignedNodes\n        .filter(n => n.nodeType === Node.TEXT_NODE || n.nodeType === Node.ELEMENT_NODE)\n        .map(n => (n as HTMLElement | Text).textContent?.trim())\n        .join(' ')\n        .trim();\n\n      this.slotText = text || '';\n    }\n  }\n\n  private handleClick = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (!this.disabled) {\n      this.tabSelected.emit(this.tabId);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    const key = event.key;\n    if (key === 'Enter' || key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.tabSelected.emit(this.tabId);\n    }\n  };\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-tabs-navigation-item': true,\n      'spw-tabs-navigation-item--active': this.active,\n      'spw-tabs-navigation-item--disabled': this.disabled,\n      'spw-tabs-navigation-item--bubble': this.bubble,\n      'spw-tabs-navigation-item--ellipsis': this.hasEllipsis,\n    };\n  }\n\n  render() {\n    return (\n      <Host class={this.active ? '--active' : ''}>\n        <li\n          id={`tab-${this.tabId}`}\n          role=\"tab\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-controls={`panel-${this.tabId}`}\n          aria-label={this.slotText}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={this.disabled ? -1 : 0}\n          class={this.elementClass}\n          onClick={this.handleClick}\n          title={this.hasEllipsis ? this.slotText : undefined}\n        >\n          <slot></slot>\n          {this.bubble && <span class=\"bubble\"></span>}\n        </li>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}
+{"version":3,"file":"spw-tabs-navigation-item.entry.cjs.js","sources":["src/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.scss?tag=spw-tabs-navigation-item&encapsulation=shadow","src/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.tsx"],"sourcesContent":[":host {\n  display: contents;\n  --spw-tabs-max-width-text: 200px;\n  --spw-tabs-border-radius: 4px 4px 0 0;\n  --spw-tabs-margin-left: 0;\n}\n\n.spw-tabs-navigation-item {\n  position: relative;\n  cursor: pointer;\n  color: var(--spw-colors-support-grey-grey-700);\n  user-select: none;\n  transition: color 0.2s linear;\n  &:hover {\n    color: var(--spw-colors-support-grey-grey-900);\n    :host(.--box) & {\n      color: var(--spw-colors-support-grey-grey-900);\n    }\n  }\n  &:focus-visible {\n    outline: 2px solid black;\n    outline-offset: -2px;\n  }\n  :host(.--box) & {\n    background: var(--spw-colors-support-grey-grey-100);\n    color: var(--spw-colors-support-grey-grey-600);\n    border: 1px solid var(--spw-colors-support-grey-grey-300);\n    margin-top: 3px;\n    border-radius: var(--spw-tabs-border-radius);\n    margin-left: var(--spw-tabs-margin-left);\n  }\n  &--disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n    &:hover {\n      color: var(--spw-colors-support-grey-grey-700);\n    }\n    :host(.--box) & {\n      opacity: 1;\n      color: var(--spw-colors-support-grey-grey-400);\n      &:hover {\n        color: var(--spw-colors-support-grey-grey-400);\n      }\n      &:active {\n        transform: none;\n      }\n    }\n  }\n  &--active {\n    border-bottom: 0;\n    color: var(--spw-colors-support-grey-grey-900);\n    &:after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      bottom: 0;\n      left: 0;\n      height: 2px;\n      background: var(--spw-ds-primary);\n    }\n    :host(.--box) & {\n      position: relative;\n      top: 1px;\n      color: var(--spw-colors-support-grey-grey-900);\n      background: white;\n      // border-bottom-color: transparent;\n      margin-top: 0;\n      &:after {\n        display: none;\n      }\n    }\n  }\n  &--bubble {\n    &:before {\n      content: '';\n      position: absolute;\n      top: 2px;\n      right: -8px;\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--spw-ds-primary);\n      :host(.--box) & {\n        top: 4px;\n        right: 4px;\n      }\n    }\n  }\n  :host(.--ellipsis) & {\n    max-width: var(--spw-tabs-max-width-text);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex-shrink: 0;\n    spw-tooltip {\n      display: contents;\n    }\n  }\n  :host(.--small) & {\n    padding: 8px 0 12px 0;\n    font-size: 14px;\n  }\n  :host(.--small.--box) & {\n    padding: 7px 16px 6px 16px;\n    .spw-tabs-navigation-item--active {\n      padding: 8px 16px;\n    }\n  }\n  :host(.--medium) & {\n    padding: 12px 0 16px 0;\n    font-size: 16px;\n  }\n  :host(.--medium.--box) & {\n    padding: 11px 16px 10px 16px;\n    .spw-tabs-navigation-item--active {\n      padding: 12px 16px;\n    }\n  }\n  :host(.--large) & {\n    padding: 16px 0 20px 0;\n    font-size: 18px;\n  }\n  :host(.--large.--box) & {\n    padding: 15px 20px 14px 20px;\n    .spw-tabs-navigation-item--active {\n      padding: 16px 20px;\n    }\n  }\n  .spw-icon {\n    &--left {\n      margin-right: 4px;\n    }\n    &--right {\n      margin-left: 4px;\n    }\n  }\n}\n","import { Component, h, Fragment, Element, Prop, Event, State, EventEmitter, Host, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'spw-tabs-navigation-item',\n  styleUrl: 'spw-tabs-navigation-item.scss',\n  shadow: true,\n})\nexport class SpwTabsNavigationItem {\n  @Element() el: HTMLElement;\n\n  /** Définit un id pour le tab */\n  @Prop() tabId!: string;\n  /** Définit si le tab est actif ou non */\n  @Prop() active: boolean = false;\n  /** Définit si le tab est disabled ou non */\n  @Prop() disabled: boolean = false;\n  /** Prévoit la présence d'une pastille sur l'élément de navigation */\n  @Prop() bubble: boolean = false;\n  /** Définit si le texte doit être coupé pour les onglets au titre trop long */\n  @Prop() hasEllipsis?: boolean;\n  /** Si rempli, vous pouvez utiliser une référence d'icône font-awesome sur le spw-tabs-navigation-item */\n  @Prop() icon?: string;\n  /** Position de l'icône à l'intérieur du bouton sur le spw-tabs-navigation-item */\n  @Prop() iconPosition?: 'left' | 'right';\n\n  @State() slotText: string = '';\n\n  @Event() tabSelected: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.updateSlotText();\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.updateSlotText();\n  }\n\n  private updateSlotText() {\n    const slot = this.el.shadowRoot?.querySelector('slot');\n    if (slot) {\n      const assignedNodes = slot.assignedNodes({ flatten: true });\n      const text = assignedNodes\n        .filter(n => n.nodeType === Node.TEXT_NODE || n.nodeType === Node.ELEMENT_NODE)\n        .map(n => (n as HTMLElement | Text).textContent?.trim())\n        .join(' ')\n        .trim();\n\n      this.slotText = text || '';\n    }\n  }\n\n  private handleClick = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (!this.disabled) {\n      this.tabSelected.emit(this.tabId);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    const key = event.key;\n    if (key === 'Enter' || key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.tabSelected.emit(this.tabId);\n    }\n  };\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-tabs-navigation-item': true,\n      'spw-tabs-navigation-item--active': this.active,\n      'spw-tabs-navigation-item--disabled': this.disabled,\n      'spw-tabs-navigation-item--bubble': this.bubble,\n      'spw-tabs-navigation-item--ellipsis': this.hasEllipsis,\n    };\n  }\n\n  render() {\n    const iconPosition = this.icon && !this.iconPosition ? 'right' : this.iconPosition;\n    const iconClass = `spw-icon--${iconPosition}`;\n    const iconElement = this.icon ? <spw-icon class={iconClass} icon={this.icon}></spw-icon> : null;\n\n    return (\n      <Host class={this.active ? '--active' : ''}>\n        <li\n          id={`tab-${this.tabId}`}\n          role=\"tab\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-controls={`panel-${this.tabId}`}\n          aria-label={this.slotText}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={this.disabled ? -1 : 0}\n          class={this.elementClass}\n          onClick={this.handleClick}\n        >\n          {this.hasEllipsis && (\n            <spw-tooltip cursor={this.disabled ? 'disabled' : 'pointer'} class=\"spw-tooltip--has-ellipsis\" tooltipText={this.slotText}>\n              {iconPosition === 'left' && iconElement}\n              <slot></slot>\n              {iconPosition === 'right' && iconElement}\n            </spw-tooltip>\n          )}\n          {!this.hasEllipsis && (\n            <Fragment>\n              {iconPosition === 'left' && iconElement}\n              <slot></slot>\n              {iconPosition === 'right' && iconElement}\n            </Fragment>\n          )}{' '}\n          {this.bubble && <span class=\"bubble\"></span>}\n        </li>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","Fragment"],"mappings":"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"}

package/dist/cjs/spw-tabs-navigation.cjs.entry.js

@@ -1,16 +1,98 @@
 'use strict';
 
-var index = require('./index-DPoQq9TD.js');
+var index = require('./index-iVhYitTd.js');
 
-const spwTabsNavigationCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-tabs-navigation__list{border-bottom:1px solid var(--spw-colors-support-grey-grey-300);display:flex;flex-wrap:nowrap;gap:24px;overflow-x:auto;position:relative;white-space:nowrap;z-index:2}:host(.--box) .spw-tabs-navigation__list{border-bottom:0;gap:0;top:1px}::slotted(spw-tabs-navigation-item){--spw-tabs-border-radius:0;--spw-tabs-margin-left:-1px}::slotted(spw-tabs-navigation-item:first-child){--spw-tabs-border-radius:4px 0 0 0;--spw-tabs-margin-left:0}::slotted(spw-tabs-navigation-item:last-child){--spw-tabs-border-radius:0 4px 0 0;--spw-tabs-margin-left:-1px}::slotted(spw-tabs-navigation-item.--active){--spw-tabs-border-radius:4px 4px 0 0}";
+const spwTabsNavigationCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3;position:relative;top:1px}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-tabs-navigation-container{align-items:center;display:flex;overflow:hidden;position:relative;width:100%}.spw-tabs-navigation{flex:1;overflow:hidden}.spw-tabs-navigation__list{-ms-overflow-style:none;border-bottom:1px solid var(--spw-colors-support-grey-grey-300);display:flex;flex-wrap:nowrap;gap:24px;list-style:none;margin:0;overflow-x:auto;padding:0;position:relative;scroll-behavior:smooth;scrollbar-width:none;white-space:nowrap;z-index:2}.spw-tabs-navigation__list::-webkit-scrollbar{display:none}:host(.--box) .spw-tabs-navigation__list{border-bottom:0;gap:0}.spw-tabs-navigation__arrow{align-items:center;background:#fff;border:none;cursor:pointer;display:flex;height:33px;justify-content:center;position:relative;top:1px;transition:all .2s ease;width:33px;z-index:10}.spw-tabs-navigation__arrow spw-icon{color:var(--spw-colors-support-grey-grey-500);font-size:14px}.spw-tabs-navigation__arrow:hover spw-icon{color:var(--spw-colors-support-grey-grey-600)}.spw-tabs-navigation__arrow:active spw-icon{color:var(--spw-colors-support-grey-grey-900)}.spw-tabs-navigation__arrow--left{border-radius:4px 0 0 0;border-right:1px solid var(--spw-colors-support-grey-grey-300)}.spw-tabs-navigation__arrow--right{border-left:1px solid var(--spw-colors-support-grey-grey-300);border-radius:0 4px 0 0}::slotted(spw-tabs-navigation-item){--spw-tabs-border-radius:0;--spw-tabs-margin-left:-1px}::slotted(spw-tabs-navigation-item:first-child){--spw-tabs-border-radius:4px 0 0 0;--spw-tabs-margin-left:0}::slotted(spw-tabs-navigation-item:last-child){--spw-tabs-border-radius:0 4px 0 0;--spw-tabs-margin-left:-1px}::slotted(spw-tabs-navigation-item.--active){--spw-tabs-border-radius:4px 4px 0 0}";
 
 const SpwTabsNavigation = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.showLeftArrow = false;
+        this.showRightArrow = false;
+        this.scrollPercentage = 30;
+        this.resizeObserver = null;
+        this.mutationObserver = null;
+        this.setupObservers = () => {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.checkOverflow();
+            });
+            if (this.ulElement) {
+                this.resizeObserver.observe(this.ulElement);
+            }
+            this.mutationObserver = new MutationObserver(() => {
+                this.updateSlottedElementsObservation();
+                setTimeout(() => this.checkOverflow(), 10);
+            });
+            this.mutationObserver.observe(this.hostElement, {
+                childList: true,
+                subtree: true,
+            });
+            this.updateSlottedElementsObservation();
+        };
+        this.updateSlottedElementsObservation = () => {
+            if (!this.resizeObserver)
+                return;
+            const children = Array.from(this.hostElement.children);
+            children.forEach(child => {
+                this.resizeObserver.observe(child);
+            });
+        };
+        this.cleanupObservers = () => {
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+                this.resizeObserver = null;
+            }
+            if (this.mutationObserver) {
+                this.mutationObserver.disconnect();
+                this.mutationObserver = null;
+            }
+        };
+        this.checkOverflow = () => {
+            if (!this.ulElement)
+                return;
+            const containerWidth = this.ulElement.clientWidth;
+            const contentWidth = this.ulElement.scrollWidth;
+            const scrollLeft = this.ulElement.scrollLeft;
+            const hasOverflow = contentWidth > containerWidth;
+            this.showLeftArrow = hasOverflow && scrollLeft > 0;
+            this.showRightArrow = hasOverflow && scrollLeft < contentWidth - containerWidth - 1;
+        };
+        this.scrollLeft = () => {
+            if (!this.ulElement)
+                return;
+            const scrollAmount = (this.ulElement.clientWidth * this.scrollPercentage) / 100;
+            this.ulElement.scrollBy({
+                left: -scrollAmount,
+                behavior: 'smooth',
+            });
+        };
+        this.scrollRight = () => {
+            if (!this.ulElement)
+                return;
+            const scrollAmount = (this.ulElement.clientWidth * this.scrollPercentage) / 100;
+            this.ulElement.scrollBy({
+                left: scrollAmount,
+                behavior: 'smooth',
+            });
+        };
+        this.handleScroll = () => {
+            this.checkOverflow();
+        };
+    }
+    componentDidLoad() {
+        this.checkOverflow();
+        this.setupObservers();
+    }
+    disconnectedCallback() {
+        this.cleanupObservers();
+    }
+    onWindowResize() {
+        this.checkOverflow();
     }
     render() {
-        return (index.h("nav", { key: '1878948ed9fcde1587f9f81b9a67dcb84ece5f80', class: "spw-tabs-navigation" }, index.h("ul", { key: 'f50e5edb7db854f443618c88353ca419205950cf', class: "spw-tabs-navigation__list", role: "tablist" }, index.h("slot", { key: 'd76ac4cfa82e09dfddfeda783e5f755b9b68c030' }))));
+        return (index.h("div", { key: 'e30dd2eeaff721cf907cc90f274fea0e09374704', class: "spw-tabs-navigation-container" }, this.showLeftArrow && (index.h("button", { key: 'd06751d3a971c6fc8a766893a0f20287808e12b6', class: "spw-tabs-navigation__arrow spw-tabs-navigation__arrow--left", onClick: this.scrollLeft, "aria-label": "Faire d\u00E9filer vers la gauche" }, index.h("spw-icon", { key: 'af54fc328d44238155fb8137566c96e45e0a0483', icon: "fa-chevron-left" }))), index.h("nav", { key: 'ab61a57c0f21cf18a4ad25f2468ac9fe6c56bb24', class: "spw-tabs-navigation" }, index.h("ul", { key: '8e87fa8b691dc26b7196f2aca9f573cc4e15f294', class: "spw-tabs-navigation__list", role: "tablist", ref: el => (this.ulElement = el), onScroll: this.handleScroll }, index.h("slot", { key: '10933f456cb16f0a5f7f1b07fb831fd695a2cb8b' }))), this.showRightArrow && (index.h("button", { key: '365deb76145d29345b25c48235c82a8dd325a8fc', class: "spw-tabs-navigation__arrow spw-tabs-navigation__arrow--right", onClick: this.scrollRight, "aria-label": "Faire d\u00E9filer vers la droite" }, index.h("spw-icon", { key: '0595bfaf9a4dd1bb00e0f0f4a8386c33bdeb8c47', icon: "fa-chevron-right" })))));
     }
+    get hostElement() { return index.getElement(this); }
 };
 SpwTabsNavigation.style = spwTabsNavigationCss;
 

package/dist/cjs/spw-tabs-navigation.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"spw-tabs-navigation.entry.cjs.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,2tGAA2tG;;MCO3uG,iBAAiB,GAAA,MAAA;;;;IAC5B,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9BA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,SAAS,EAAA,EAClDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACV,CACD;;;;;;;","names":["h"],"sources":["src/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.scss?tag=spw-tabs-navigation&encapsulation=shadow","src/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-tabs-navigation {\n  &__list {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: 24px;\n    overflow-x: auto;\n    white-space: nowrap;\n    border-bottom: 1px solid var(--spw-colors-support-grey-grey-300);\n    :host(.--box) & {\n      gap: 0;\n      border-bottom: 0;\n      top: 1px;\n    }\n  }\n}\n\n::slotted(spw-tabs-navigation-item) {\n  --spw-tabs-border-radius: 0;\n  --spw-tabs-margin-left: -1px;\n}\n\n::slotted(spw-tabs-navigation-item:first-child) {\n  --spw-tabs-border-radius: 4px 0 0 0;\n  --spw-tabs-margin-left: 0;\n}\n\n::slotted(spw-tabs-navigation-item:last-child) {\n  --spw-tabs-border-radius: 0 4px 0 0;\n  --spw-tabs-margin-left: -1px;\n}\n\n::slotted(spw-tabs-navigation-item.--active) {\n  --spw-tabs-border-radius: 4px 4px 0 0;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-tabs-navigation',\n  styleUrl: 'spw-tabs-navigation.scss',\n  shadow: true,\n})\nexport class SpwTabsNavigation {\n  render() {\n    return (\n      <nav class=\"spw-tabs-navigation\">\n        <ul class=\"spw-tabs-navigation__list\" role=\"tablist\">\n          <slot></slot>\n        </ul>\n      </nav>\n    );\n  }\n}\n"],"version":3}
+{"file":"spw-tabs-navigation.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.scss?tag=spw-tabs-navigation&encapsulation=shadow","src/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  top: 1px;\n  // border-bottom: 1px solid var(--spw-colors-support-grey-grey-300);\n}\n\n.spw-tabs-navigation-container {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n.spw-tabs-navigation {\n  flex: 1;\n  overflow: hidden;\n\n  &__list {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: 24px;\n    overflow-x: auto;\n    white-space: nowrap;\n    border-bottom: 1px solid var(--spw-colors-support-grey-grey-300);\n    scroll-behavior: smooth;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n\n    :host(.--box) & {\n      gap: 0;\n      border-bottom: 0;\n      // top: 1px;\n    }\n  }\n}\n\n.spw-tabs-navigation__arrow {\n  position: relative;\n  top: 1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  // border: 1px solid #ddd;\n  // border-bottom: 1px solid #ccc;\n  border: none;\n  width: 33px;\n  height: 33px;\n  cursor: pointer;\n  z-index: 10;\n  transition: all 0.2s ease;\n\n  spw-icon {\n    font-size: 14px;\n    color: var(--spw-colors-support-grey-grey-500);\n  }\n\n  &:hover {\n    // background: var(--spw-colors-support-grey-grey-100);\n    spw-icon {\n      color: var(--spw-colors-support-grey-grey-600);\n    }\n  }\n\n  &:active {\n    // background: var(--spw-colors-support-grey-grey-200);\n    spw-icon {\n      color: var(--spw-colors-support-grey-grey-900);\n    }\n  }\n\n  &--left {\n    border-radius: 4px 0 0 0;\n    border-right: 1px solid var(--spw-colors-support-grey-grey-300);\n  }\n\n  &--right {\n    border-radius: 0 4px 0 0;\n    border-left: 1px solid var(--spw-colors-support-grey-grey-300);\n  }\n}\n\n::slotted(spw-tabs-navigation-item) {\n  --spw-tabs-border-radius: 0;\n  --spw-tabs-margin-left: -1px;\n}\n\n::slotted(spw-tabs-navigation-item:first-child) {\n  --spw-tabs-border-radius: 4px 0 0 0;\n  --spw-tabs-margin-left: 0;\n}\n\n::slotted(spw-tabs-navigation-item:last-child) {\n  --spw-tabs-border-radius: 0 4px 0 0;\n  --spw-tabs-margin-left: -1px;\n}\n\n::slotted(spw-tabs-navigation-item.--active) {\n  --spw-tabs-border-radius: 4px 4px 0 0;\n}\n","import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'spw-tabs-navigation',\n  styleUrl: 'spw-tabs-navigation.scss',\n  shadow: true,\n})\nexport class SpwTabsNavigation {\n  @Element() hostElement: HTMLElement;\n  @State() showLeftArrow: boolean = false;\n  @State() showRightArrow: boolean = false;\n\n  private ulElement: HTMLUListElement;\n  private scrollPercentage: number = 30;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n\n  componentDidLoad() {\n    this.checkOverflow();\n    this.setupObservers();\n  }\n\n  disconnectedCallback() {\n    this.cleanupObservers();\n  }\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.checkOverflow();\n  }\n\n  private setupObservers = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkOverflow();\n    });\n\n    if (this.ulElement) {\n      this.resizeObserver.observe(this.ulElement);\n    }\n\n    this.mutationObserver = new MutationObserver(() => {\n      this.updateSlottedElementsObservation();\n      setTimeout(() => this.checkOverflow(), 10);\n    });\n\n    this.mutationObserver.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n    });\n\n    this.updateSlottedElementsObservation();\n  };\n\n  private updateSlottedElementsObservation = () => {\n    if (!this.resizeObserver) return;\n\n    const children = Array.from(this.hostElement.children);\n    children.forEach(child => {\n      this.resizeObserver!.observe(child);\n    });\n  };\n\n  private cleanupObservers = () => {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = null;\n    }\n  };\n\n  private checkOverflow = () => {\n    if (!this.ulElement) return;\n\n    const containerWidth = this.ulElement.clientWidth;\n    const contentWidth = this.ulElement.scrollWidth;\n    const scrollLeft = this.ulElement.scrollLeft;\n\n    const hasOverflow = contentWidth > containerWidth;\n\n    this.showLeftArrow = hasOverflow && scrollLeft > 0;\n    this.showRightArrow = hasOverflow && scrollLeft < contentWidth - containerWidth - 1;\n  };\n\n  private scrollLeft = () => {\n    if (!this.ulElement) return;\n\n    const scrollAmount = (this.ulElement.clientWidth * this.scrollPercentage) / 100;\n    this.ulElement.scrollBy({\n      left: -scrollAmount,\n      behavior: 'smooth',\n    });\n  };\n\n  private scrollRight = () => {\n    if (!this.ulElement) return;\n\n    const scrollAmount = (this.ulElement.clientWidth * this.scrollPercentage) / 100;\n    this.ulElement.scrollBy({\n      left: scrollAmount,\n      behavior: 'smooth',\n    });\n  };\n\n  private handleScroll = () => {\n    this.checkOverflow();\n  };\n\n  render() {\n    return (\n      <div class=\"spw-tabs-navigation-container\">\n        {this.showLeftArrow && (\n          <button class=\"spw-tabs-navigation__arrow spw-tabs-navigation__arrow--left\" onClick={this.scrollLeft} aria-label=\"Faire défiler vers la gauche\">\n            <spw-icon icon=\"fa-chevron-left\"></spw-icon>\n          </button>\n        )}\n\n        <nav class=\"spw-tabs-navigation\">\n          <ul class=\"spw-tabs-navigation__list\" role=\"tablist\" ref={el => (this.ulElement = el as HTMLUListElement)} onScroll={this.handleScroll}>\n            <slot></slot>\n          </ul>\n        </nav>\n\n        {this.showRightArrow && (\n          <button class=\"spw-tabs-navigation__arrow spw-tabs-navigation__arrow--right\" onClick={this.scrollRight} aria-label=\"Faire défiler vers la droite\">\n            <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/spw-tabs-navigation.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-tabs-navigation.entry.cjs.js","sources":["src/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.scss?tag=spw-tabs-navigation&encapsulation=shadow","src/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-tabs-navigation {\n  &__list {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: 24px;\n    overflow-x: auto;\n    white-space: nowrap;\n    border-bottom: 1px solid var(--spw-colors-support-grey-grey-300);\n    :host(.--box) & {\n      gap: 0;\n      border-bottom: 0;\n      top: 1px;\n    }\n  }\n}\n\n::slotted(spw-tabs-navigation-item) {\n  --spw-tabs-border-radius: 0;\n  --spw-tabs-margin-left: -1px;\n}\n\n::slotted(spw-tabs-navigation-item:first-child) {\n  --spw-tabs-border-radius: 4px 0 0 0;\n  --spw-tabs-margin-left: 0;\n}\n\n::slotted(spw-tabs-navigation-item:last-child) {\n  --spw-tabs-border-radius: 0 4px 0 0;\n  --spw-tabs-margin-left: -1px;\n}\n\n::slotted(spw-tabs-navigation-item.--active) {\n  --spw-tabs-border-radius: 4px 4px 0 0;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-tabs-navigation',\n  styleUrl: 'spw-tabs-navigation.scss',\n  shadow: true,\n})\nexport class SpwTabsNavigation {\n  render() {\n    return (\n      <nav class=\"spw-tabs-navigation\">\n        <ul class=\"spw-tabs-navigation__list\" role=\"tablist\">\n          <slot></slot>\n        </ul>\n      </nav>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,2tGAA2tG;;MCO3uG,iBAAiB,GAAA,MAAA;;;;IAC5B,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9BA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,SAAS,EAAA,EAClDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACV,CACD;;;;;;;"}
+{"version":3,"file":"spw-tabs-navigation.entry.cjs.js","sources":["src/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.scss?tag=spw-tabs-navigation&encapsulation=shadow","src/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  top: 1px;\n  // border-bottom: 1px solid var(--spw-colors-support-grey-grey-300);\n}\n\n.spw-tabs-navigation-container {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n.spw-tabs-navigation {\n  flex: 1;\n  overflow: hidden;\n\n  &__list {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: 24px;\n    overflow-x: auto;\n    white-space: nowrap;\n    border-bottom: 1px solid var(--spw-colors-support-grey-grey-300);\n    scroll-behavior: smooth;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n\n    :host(.--box) & {\n      gap: 0;\n      border-bottom: 0;\n      // top: 1px;\n    }\n  }\n}\n\n.spw-tabs-navigation__arrow {\n  position: relative;\n  top: 1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  // border: 1px solid #ddd;\n  // border-bottom: 1px solid #ccc;\n  border: none;\n  width: 33px;\n  height: 33px;\n  cursor: pointer;\n  z-index: 10;\n  transition: all 0.2s ease;\n\n  spw-icon {\n    font-size: 14px;\n    color: var(--spw-colors-support-grey-grey-500);\n  }\n\n  &:hover {\n    // background: var(--spw-colors-support-grey-grey-100);\n    spw-icon {\n      color: var(--spw-colors-support-grey-grey-600);\n    }\n  }\n\n  &:active {\n    // background: var(--spw-colors-support-grey-grey-200);\n    spw-icon {\n      color: var(--spw-colors-support-grey-grey-900);\n    }\n  }\n\n  &--left {\n    border-radius: 4px 0 0 0;\n    border-right: 1px solid var(--spw-colors-support-grey-grey-300);\n  }\n\n  &--right {\n    border-radius: 0 4px 0 0;\n    border-left: 1px solid var(--spw-colors-support-grey-grey-300);\n  }\n}\n\n::slotted(spw-tabs-navigation-item) {\n  --spw-tabs-border-radius: 0;\n  --spw-tabs-margin-left: -1px;\n}\n\n::slotted(spw-tabs-navigation-item:first-child) {\n  --spw-tabs-border-radius: 4px 0 0 0;\n  --spw-tabs-margin-left: 0;\n}\n\n::slotted(spw-tabs-navigation-item:last-child) {\n  --spw-tabs-border-radius: 0 4px 0 0;\n  --spw-tabs-margin-left: -1px;\n}\n\n::slotted(spw-tabs-navigation-item.--active) {\n  --spw-tabs-border-radius: 4px 4px 0 0;\n}\n","import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'spw-tabs-navigation',\n  styleUrl: 'spw-tabs-navigation.scss',\n  shadow: true,\n})\nexport class SpwTabsNavigation {\n  @Element() hostElement: HTMLElement;\n  @State() showLeftArrow: boolean = false;\n  @State() showRightArrow: boolean = false;\n\n  private ulElement: HTMLUListElement;\n  private scrollPercentage: number = 30;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n\n  componentDidLoad() {\n    this.checkOverflow();\n    this.setupObservers();\n  }\n\n  disconnectedCallback() {\n    this.cleanupObservers();\n  }\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.checkOverflow();\n  }\n\n  private setupObservers = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkOverflow();\n    });\n\n    if (this.ulElement) {\n      this.resizeObserver.observe(this.ulElement);\n    }\n\n    this.mutationObserver = new MutationObserver(() => {\n      this.updateSlottedElementsObservation();\n      setTimeout(() => this.checkOverflow(), 10);\n    });\n\n    this.mutationObserver.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n    });\n\n    this.updateSlottedElementsObservation();\n  };\n\n  private updateSlottedElementsObservation = () => {\n    if (!this.resizeObserver) return;\n\n    const children = Array.from(this.hostElement.children);\n    children.forEach(child => {\n      this.resizeObserver!.observe(child);\n    });\n  };\n\n  private cleanupObservers = () => {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = null;\n    }\n  };\n\n  private checkOverflow = () => {\n    if (!this.ulElement) return;\n\n    const containerWidth = this.ulElement.clientWidth;\n    const contentWidth = this.ulElement.scrollWidth;\n    const scrollLeft = this.ulElement.scrollLeft;\n\n    const hasOverflow = contentWidth > containerWidth;\n\n    this.showLeftArrow = hasOverflow && scrollLeft > 0;\n    this.showRightArrow = hasOverflow && scrollLeft < contentWidth - containerWidth - 1;\n  };\n\n  private scrollLeft = () => {\n    if (!this.ulElement) return;\n\n    const scrollAmount = (this.ulElement.clientWidth * this.scrollPercentage) / 100;\n    this.ulElement.scrollBy({\n      left: -scrollAmount,\n      behavior: 'smooth',\n    });\n  };\n\n  private scrollRight = () => {\n    if (!this.ulElement) return;\n\n    const scrollAmount = (this.ulElement.clientWidth * this.scrollPercentage) / 100;\n    this.ulElement.scrollBy({\n      left: scrollAmount,\n      behavior: 'smooth',\n    });\n  };\n\n  private handleScroll = () => {\n    this.checkOverflow();\n  };\n\n  render() {\n    return (\n      <div class=\"spw-tabs-navigation-container\">\n        {this.showLeftArrow && (\n          <button class=\"spw-tabs-navigation__arrow spw-tabs-navigation__arrow--left\" onClick={this.scrollLeft} aria-label=\"Faire défiler vers la gauche\">\n            <spw-icon icon=\"fa-chevron-left\"></spw-icon>\n          </button>\n        )}\n\n        <nav class=\"spw-tabs-navigation\">\n          <ul class=\"spw-tabs-navigation__list\" role=\"tablist\" ref={el => (this.ulElement = el as HTMLUListElement)} onScroll={this.handleScroll}>\n            <slot></slot>\n          </ul>\n        </nav>\n\n        {this.showRightArrow && (\n          <button class=\"spw-tabs-navigation__arrow spw-tabs-navigation__arrow--right\" onClick={this.scrollRight} aria-label=\"Faire défiler vers la droite\">\n            <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":"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"}

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

@@ -1,18 +1,21 @@
 'use strict';
 
-var index = require('./index-DPoQq9TD.js');
+var index = require('./index-iVhYitTd.js');
 
 const spwTabsCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}";
 
 const SpwTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.tabChanged = index.createEvent(this, "tabChanged");
         /** Onglet actif par défaut */
         this.defaultActiveTab = '1';
         /** Variante des onglets */
         this.variant = 'default';
-        /** Texte coupé si trop long */
+        /** Texte coupé si trop long, affiche un tooltip si le contenu excède la max-width définie */
         this.hasEllipsis = false;
+        /** Permet de spécifier la taille de l'onglet */
+        this.size = 'small';
         this.activeTab = '1'; // Initialiser avec une valeur par défaut
     }
     componentWillLoad() {
@@ -21,9 +24,19 @@ const SpwTabs = class {
     componentDidLoad() {
         this.applyVariantToChildren();
         this.updateActiveStates();
+        setTimeout(() => {
+            this.applyMaxWidthToChildren();
+        }, 100);
     }
     activeTabChanged() {
         this.updateActiveStates();
+        this.tabChanged.emit(this.activeTab);
+    }
+    maxWidthChanged() {
+        this.applyMaxWidthToChildren();
+    }
+    hasEllipsisChanged() {
+        this.applyVariantToChildren();
     }
     /**
      * Récupère l'onglet actuellement sélectionné
@@ -50,6 +63,7 @@ const SpwTabs = class {
     slotChanged() {
         this.applyVariantToChildren();
         this.updateActiveStates();
+        this.applyMaxWidthToChildren();
     }
     updateActiveStates() {
         const isInThisComponent = (el) => el.closest('spw-tabs') === this.el;
@@ -62,11 +76,57 @@ const SpwTabs = class {
             content.active = content.tabId === this.activeTab;
         });
     }
+    applyMaxWidthToChildren() {
+        if (!this.maxWidth) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            const isInThisComponent = (el) => el.closest('spw-tabs') === this.el;
+            const navItems = Array.from(this.el.querySelectorAll('spw-tabs-navigation-item')).filter(isInThisComponent);
+            const ellipsisClass = `--ellipsis`;
+            navItems.forEach(item => {
+                var _a;
+                const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+                if (!textContent) {
+                    return;
+                }
+                const measureEl = document.createElement('div');
+                measureEl.style.cssText = `
+          position: absolute;
+          visibility: hidden;
+          white-space: nowrap;
+          top: -9999px;
+          left: -9999px;
+        `;
+                measureEl.textContent = textContent;
+                const computedStyle = window.getComputedStyle(item);
+                measureEl.style.fontSize = computedStyle.fontSize;
+                measureEl.style.fontFamily = computedStyle.fontFamily;
+                measureEl.style.fontWeight = computedStyle.fontWeight;
+                measureEl.style.fontStyle = computedStyle.fontStyle;
+                measureEl.style.letterSpacing = computedStyle.letterSpacing;
+                measureEl.style.textTransform = computedStyle.textTransform;
+                document.body.appendChild(measureEl);
+                const contentWidth = measureEl.getBoundingClientRect().width;
+                document.body.removeChild(measureEl);
+                if (contentWidth > this.maxWidth) {
+                    item.style.setProperty('--spw-tabs-max-width-text', `${this.maxWidth}px`);
+                    item.setAttribute('has-ellipsis', 'true');
+                    item.classList.add(ellipsisClass);
+                }
+                else {
+                    item.style.removeProperty('--spw-tabs-max-width-text');
+                    item.setAttribute('has-ellipsis', 'false');
+                    item.classList.remove(ellipsisClass);
+                }
+            });
+        });
+    }
     applyVariantToChildren() {
         requestAnimationFrame(() => {
             var _a, _b;
             const variantClass = `--${this.variant}`;
-            const ellipsisClass = `--ellipsis`;
+            const sizeClass = `--${this.size}`;
             const isInThisComponent = (el) => el.closest('spw-tabs') === this.el;
             const navigationSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="navigation"]');
             const contentSlot = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="content"]');
@@ -78,19 +138,13 @@ const SpwTabs = class {
                     el.querySelectorAll('spw-tabs-navigation-item').forEach(item => {
                         if (isInThisComponent(item)) {
                             item.classList.add(variantClass);
-                            if (this.hasEllipsis) {
-                                item.classList.add(ellipsisClass);
-                            }
-                            item.setAttribute('has-ellipsis', this.hasEllipsis ? 'true' : 'false');
+                            item.classList.add(sizeClass);
                         }
                     });
                 }
                 else if (el.tagName === 'SPW-TABS-NAVIGATION-ITEM') {
                     el.classList.add(variantClass);
-                    if (this.hasEllipsis) {
-                        el.classList.add(ellipsisClass);
-                    }
-                    el.setAttribute('has-ellipsis', this.hasEllipsis ? 'true' : 'false');
+                    el.classList.add(sizeClass);
                 }
             });
             contentElements.forEach(el => {
@@ -105,6 +159,7 @@ const SpwTabs = class {
                     });
                 }
             });
+            this.applyMaxWidthToChildren();
         });
     }
     get elementClass() {
@@ -114,11 +169,13 @@ const SpwTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: '0392ca75dfade56a1efa361c4dd095ff4eabdca8', class: this.elementClass }, index.h("slot", { key: 'e4dd5ae8018b8761faa787d2e6bfb2e7fcf2920d', name: "navigation" }), index.h("slot", { key: 'fe20c00bcaee65f76bded2e1f19864bb9d2a1912', name: "content" })));
+        return (index.h("div", { key: '524414454013d4f3d7fbf2c170fc58751fe46503', class: this.elementClass }, index.h("slot", { key: 'ebc36ddb238084cdfdc39c44021c3413949a0cbc', name: "navigation" }), index.h("slot", { key: '6bf3dd7c53dc133956b20169c9077c93d828ee8c', name: "content" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "activeTab": ["activeTabChanged"]
+        "activeTab": ["activeTabChanged"],
+        "maxWidth": ["maxWidthChanged"],
+        "hasEllipsis": ["hasEllipsisChanged"]
     }; }
 };
 SpwTabs.style = spwTabsCss;