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

package/dist/collection/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-tabs-navigation.js","sourceRoot":"","sources":["../../../../src/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,iBAAiB;IAC5B,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,qBAAqB;YAC9B,2DAAI,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,SAAS;gBAClD,8DAAa,CACV,CACD,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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.js","sourceRoot":"","sources":["../../../../src/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.css

@@ -1,2 +1,2 @@
 
- /*! 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}
+ /*! 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}

package/dist/collection/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Fragment, Host } from "@stencil/core";
 export class SpwTabsNavigationItem {
     constructor() {
         /** Définit si le tab est actif ou non */
@@ -55,7 +55,10 @@ export class SpwTabsNavigationItem {
         };
     }
     render() {
-        return (h(Host, { key: 'b5f5ba80518a0280d25f2e5ce2d2eea33b7f0547', class: this.active ? '--active' : '' }, 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 }, h("slot", { key: '62bdf41c1e4b6c96f3146be38ba909c9ea0f4a81' }), this.bubble && h("span", { key: '9bc854ccfce8464ee8e5878a29f10f92ff417e4d', class: "bubble" }))));
+        const iconPosition = this.icon && !this.iconPosition ? 'right' : this.iconPosition;
+        const iconClass = `spw-icon--${iconPosition}`;
+        const iconElement = this.icon ? h("spw-icon", { class: iconClass, icon: this.icon }) : null;
+        return (h(Host, { key: '7767cc19322c27ad08ede1b55d98383f4bc222ee', class: this.active ? '--active' : '' }, h("li", { key: '01eaba525b77ea54546abe4d94ec293b9d051e7b', 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 && (h("spw-tooltip", { key: '3e86ee89a9fb569fcde9381de04da3cbb5262cd4', cursor: this.disabled ? 'disabled' : 'pointer', class: "spw-tooltip--has-ellipsis", tooltipText: this.slotText }, iconPosition === 'left' && iconElement, h("slot", { key: 'cebb84696af8a53a896f9c2e5d0e6a2f89ef6dc5' }), iconPosition === 'right' && iconElement)), !this.hasEllipsis && (h(Fragment, { key: 'f9dcc34b6bb024c1e513a66016470770c2a8d316' }, iconPosition === 'left' && iconElement, h("slot", { key: 'e1f833c4200c12c39eb35891c4b68df5f0ca1730' }), iconPosition === 'right' && iconElement)), ' ', this.bubble && h("span", { key: 'adccb683e37b1a8f3fe1ea2a8aca47f4f38064f7', class: "bubble" }))));
     }
     static get is() { return "spw-tabs-navigation-item"; }
     static get encapsulation() { return "shadow"; }
@@ -168,6 +171,44 @@ export class SpwTabsNavigationItem {
                 "setter": false,
                 "attribute": "has-ellipsis",
                 "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Si rempli, vous pouvez utiliser une r\u00E9f\u00E9rence d'ic\u00F4ne font-awesome sur le spw-tabs-navigation-item"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Position de l'ic\u00F4ne \u00E0 l'int\u00E9rieur du bouton sur le spw-tabs-navigation-item"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-position",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-tabs-navigation-item.js","sourceRoot":"","sources":["../../../../src/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.tsx"],"names":[],"mappings":"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","sourcesContent":["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.js","sourceRoot":"","sources":["../../../../src/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/spw-tabs/spw-tabs.js

@@ -5,8 +5,10 @@ export class SpwTabs {
         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() {
@@ -15,9 +17,19 @@ export class SpwTabs {
     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é
@@ -44,6 +56,7 @@ export class SpwTabs {
     slotChanged() {
         this.applyVariantToChildren();
         this.updateActiveStates();
+        this.applyMaxWidthToChildren();
     }
     updateActiveStates() {
         const isInThisComponent = (el) => el.closest('spw-tabs') === this.el;
@@ -56,11 +69,57 @@ export class SpwTabs {
             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"]');
@@ -72,19 +131,13 @@ export class SpwTabs {
                     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 => {
@@ -99,6 +152,7 @@ export class SpwTabs {
                     });
                 }
             });
+            this.applyMaxWidthToChildren();
         });
     }
     get elementClass() {
@@ -108,7 +162,7 @@ export class SpwTabs {
         };
     }
     render() {
-        return (h("div", { key: '0392ca75dfade56a1efa361c4dd095ff4eabdca8', class: this.elementClass }, h("slot", { key: 'e4dd5ae8018b8761faa787d2e6bfb2e7fcf2920d', name: "navigation" }), h("slot", { key: 'fe20c00bcaee65f76bded2e1f19864bb9d2a1912', name: "content" })));
+        return (h("div", { key: '964bfcf5f1472447f2585628db2ea8d345cbd09a', class: this.elementClass }, h("slot", { key: '83a1aa3bbc5aa9e16b50ec6a771ebebb4af24439', name: "navigation" }), h("slot", { key: '50b993041fae48b02ff8e403831b0716f93c792a', name: "content" })));
     }
     static get is() { return "spw-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -176,13 +230,52 @@ export class SpwTabs {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Texte coup\u00E9 si trop long"
+                    "text": "Texte coup\u00E9 si trop long, affiche un tooltip si le contenu exc\u00E8de la max-width d\u00E9finie"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "has-ellipsis",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "maxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "D\u00E9finit la largeur maximale de l'onglet (en pixels)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-width",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'medium' | 'small'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Permet de sp\u00E9cifier la taille de l'onglet"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'small'"
             }
         };
     }
@@ -191,6 +284,24 @@ export class SpwTabs {
             "activeTab": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "tabChanged",
+                "name": "tabChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement \u00E9mis lorsque l'onglet actif change"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
     static get methods() {
         return {
             "getSelectedTab": {
@@ -247,6 +358,12 @@ export class SpwTabs {
         return [{
                 "propName": "activeTab",
                 "methodName": "activeTabChanged"
+            }, {
+                "propName": "maxWidth",
+                "methodName": "maxWidthChanged"
+            }, {
+                "propName": "hasEllipsis",
+                "methodName": "hasEllipsisChanged"
             }];
     }
     static get listeners() {

package/dist/collection/components/spw-tabs/spw-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-tabs.js","sourceRoot":"","sources":["../../../src/components/spw-tabs/spw-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Prop, Method, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'spw-tabs',\n  styleUrl: 'spw-tabs.scss',\n  shadow: true,\n})\nexport class SpwTabs {\n  @Element() el: HTMLElement;\n\n  /** Onglet actif par défaut */\n  @Prop() defaultActiveTab: string = '1';\n  /** Variante des onglets */\n  @Prop() variant: 'default' | 'box' = 'default';\n  /** Texte coupé si trop long */\n  @Prop() hasEllipsis?: boolean = false;\n\n  @State() activeTab: string = '1'; // Initialiser avec une valeur par défaut\n\n  componentWillLoad() {\n    this.activeTab = this.defaultActiveTab;\n  }\n\n  componentDidLoad() {\n    this.applyVariantToChildren();\n    this.updateActiveStates();\n  }\n\n  @Watch('activeTab')\n  activeTabChanged() {\n    this.updateActiveStates();\n  }\n\n  /**\n   * Récupère l'onglet actuellement sélectionné\n   * @returns {Promise<string>} L'ID de l'onglet actif\n   */\n  @Method()\n  async getSelectedTab(): Promise<string> {\n    return this.activeTab;\n  }\n\n  /**\n   * Définit l'onglet sélectionné\n   * @param tabId L'ID de l'onglet à sélectionner\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async setSelectedTab(tabId: string): Promise<void> {\n    this.activeTab = tabId;\n  }\n\n  @Listen('tabSelected', { capture: true })\n  handleTabSelected(event: CustomEvent<string>) {\n    if (event.target && (event.target as HTMLElement).closest('spw-tabs') !== this.el) {\n      return;\n    }\n\n    this.activeTab = event.detail;\n    event.stopPropagation();\n  }\n\n  @Listen('slotchange')\n  slotChanged() {\n    this.applyVariantToChildren();\n    this.updateActiveStates();\n  }\n\n  private updateActiveStates() {\n    const isInThisComponent = (el: Element) => el.closest('spw-tabs') === this.el;\n\n    const navItems = Array.from(this.el.querySelectorAll('spw-tabs-navigation-item')).filter(isInThisComponent) as HTMLSpwTabsNavigationItemElement[];\n\n    const contents = Array.from(this.el.querySelectorAll('spw-tabs-content')).filter(isInThisComponent) as HTMLSpwTabsContentElement[];\n\n    navItems.forEach(item => {\n      item.active = item.tabId === this.activeTab;\n    });\n\n    contents.forEach(content => {\n      content.active = content.tabId === this.activeTab;\n    });\n  }\n\n  private applyVariantToChildren() {\n    requestAnimationFrame(() => {\n      const variantClass = `--${this.variant}`;\n      const ellipsisClass = `--ellipsis`;\n\n      const isInThisComponent = (el: Element) => el.closest('spw-tabs') === this.el;\n\n      const navigationSlot = this.el.shadowRoot?.querySelector('slot[name=\"navigation\"]') as HTMLSlotElement;\n      const contentSlot = this.el.shadowRoot?.querySelector('slot[name=\"content\"]') as HTMLSlotElement;\n\n      const navigationElements = (navigationSlot?.assignedElements({ flatten: true }) || []).filter(isInThisComponent);\n      const contentElements = (contentSlot?.assignedElements({ flatten: true }) || []).filter(isInThisComponent);\n\n      navigationElements.forEach(el => {\n        if (el.tagName === 'SPW-TABS-NAVIGATION') {\n          el.classList.add(variantClass);\n\n          el.querySelectorAll('spw-tabs-navigation-item').forEach(item => {\n            if (isInThisComponent(item)) {\n              item.classList.add(variantClass);\n              if (this.hasEllipsis) {\n                item.classList.add(ellipsisClass);\n              }\n              item.setAttribute('has-ellipsis', this.hasEllipsis ? 'true' : 'false');\n            }\n          });\n        } else if (el.tagName === 'SPW-TABS-NAVIGATION-ITEM') {\n          el.classList.add(variantClass);\n          if (this.hasEllipsis) {\n            el.classList.add(ellipsisClass);\n          }\n          el.setAttribute('has-ellipsis', this.hasEllipsis ? 'true' : 'false');\n        }\n      });\n\n      contentElements.forEach(el => {\n        if (el.tagName === 'SPW-TABS-CONTENT') {\n          el.classList.add(variantClass);\n        } else {\n          el.querySelectorAll('spw-tabs-content').forEach(content => {\n            if (isInThisComponent(content)) {\n              content.classList.add(variantClass);\n            }\n          });\n        }\n      });\n    });\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-tabs': true,\n      [`spw-tabs--${this.variant}`]: true,\n    };\n  }\n\n  render() {\n    return (\n      <div class={this.elementClass}>\n        <slot name=\"navigation\"></slot>\n        <slot name=\"content\"></slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"spw-tabs.js","sourceRoot":"","sources":["../../../src/components/spw-tabs/spw-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Event, EventEmitter, Prop, Method, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'spw-tabs',\n  styleUrl: 'spw-tabs.scss',\n  shadow: true,\n})\nexport class SpwTabs {\n  @Element() el: HTMLElement;\n\n  /** Onglet actif par défaut */\n  @Prop() defaultActiveTab: string = '1';\n  /** Variante des onglets */\n  @Prop() variant: 'default' | 'box' = 'default';\n  /** Texte coupé si trop long, affiche un tooltip si le contenu excède la max-width définie */\n  @Prop() hasEllipsis?: boolean = false;\n  /** Définit la largeur maximale de l'onglet (en pixels) */\n  @Prop() maxWidth?: number;\n  /** Permet de spécifier la taille de l'onglet */\n  @Prop() size?: 'large' | 'medium' | 'small' = 'small';\n\n  @State() activeTab: string = '1'; // Initialiser avec une valeur par défaut\n\n  /** Événement émis lorsque l'onglet actif change */\n  @Event() tabChanged: EventEmitter<string>;\n\n  componentWillLoad() {\n    this.activeTab = this.defaultActiveTab;\n  }\n\n  componentDidLoad() {\n    this.applyVariantToChildren();\n    this.updateActiveStates();\n\n    setTimeout(() => {\n      this.applyMaxWidthToChildren();\n    }, 100);\n  }\n\n  @Watch('activeTab')\n  activeTabChanged() {\n    this.updateActiveStates();\n    this.tabChanged.emit(this.activeTab);\n  }\n\n  @Watch('maxWidth')\n  maxWidthChanged() {\n    this.applyMaxWidthToChildren();\n  }\n\n  @Watch('hasEllipsis')\n  hasEllipsisChanged() {\n    this.applyVariantToChildren();\n  }\n\n  /**\n   * Récupère l'onglet actuellement sélectionné\n   * @returns {Promise<string>} L'ID de l'onglet actif\n   */\n  @Method()\n  async getSelectedTab(): Promise<string> {\n    return this.activeTab;\n  }\n\n  /**\n   * Définit l'onglet sélectionné\n   * @param tabId L'ID de l'onglet à sélectionner\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async setSelectedTab(tabId: string): Promise<void> {\n    this.activeTab = tabId;\n  }\n\n  @Listen('tabSelected', { capture: true })\n  handleTabSelected(event: CustomEvent<string>) {\n    if (event.target && (event.target as HTMLElement).closest('spw-tabs') !== this.el) {\n      return;\n    }\n\n    this.activeTab = event.detail;\n    event.stopPropagation();\n  }\n\n  @Listen('slotchange')\n  slotChanged() {\n    this.applyVariantToChildren();\n    this.updateActiveStates();\n    this.applyMaxWidthToChildren();\n  }\n\n  private updateActiveStates() {\n    const isInThisComponent = (el: Element) => el.closest('spw-tabs') === this.el;\n\n    const navItems = Array.from(this.el.querySelectorAll('spw-tabs-navigation-item')).filter(isInThisComponent) as HTMLSpwTabsNavigationItemElement[];\n\n    const contents = Array.from(this.el.querySelectorAll('spw-tabs-content')).filter(isInThisComponent) as HTMLSpwTabsContentElement[];\n\n    navItems.forEach(item => {\n      item.active = item.tabId === this.activeTab;\n    });\n\n    contents.forEach(content => {\n      content.active = content.tabId === this.activeTab;\n    });\n  }\n\n  private applyMaxWidthToChildren() {\n    if (!this.maxWidth) {\n      return;\n    }\n\n    requestAnimationFrame(() => {\n      const isInThisComponent = (el: Element) => el.closest('spw-tabs') === this.el;\n      const navItems = Array.from(this.el.querySelectorAll('spw-tabs-navigation-item')).filter(isInThisComponent) as HTMLSpwTabsNavigationItemElement[];\n      const ellipsisClass = `--ellipsis`;\n\n      navItems.forEach(item => {\n        const textContent = item.textContent?.trim() || '';\n\n        if (!textContent) {\n          return;\n        }\n\n        const measureEl = document.createElement('div');\n        measureEl.style.cssText = `\n          position: absolute;\n          visibility: hidden;\n          white-space: nowrap;\n          top: -9999px;\n          left: -9999px;\n        `;\n        measureEl.textContent = textContent;\n\n        const computedStyle = window.getComputedStyle(item);\n        measureEl.style.fontSize = computedStyle.fontSize;\n        measureEl.style.fontFamily = computedStyle.fontFamily;\n        measureEl.style.fontWeight = computedStyle.fontWeight;\n        measureEl.style.fontStyle = computedStyle.fontStyle;\n        measureEl.style.letterSpacing = computedStyle.letterSpacing;\n        measureEl.style.textTransform = computedStyle.textTransform;\n\n        document.body.appendChild(measureEl);\n        const contentWidth = measureEl.getBoundingClientRect().width;\n        document.body.removeChild(measureEl);\n\n        if (contentWidth > this.maxWidth) {\n          item.style.setProperty('--spw-tabs-max-width-text', `${this.maxWidth}px`);\n\n          item.setAttribute('has-ellipsis', 'true');\n\n          item.classList.add(ellipsisClass);\n        } else {\n          item.style.removeProperty('--spw-tabs-max-width-text');\n          item.setAttribute('has-ellipsis', 'false');\n          item.classList.remove(ellipsisClass);\n        }\n      });\n    });\n  }\n\n  private applyVariantToChildren() {\n    requestAnimationFrame(() => {\n      const variantClass = `--${this.variant}`;\n      const sizeClass = `--${this.size}`;\n\n      const isInThisComponent = (el: Element) => el.closest('spw-tabs') === this.el;\n\n      const navigationSlot = this.el.shadowRoot?.querySelector('slot[name=\"navigation\"]') as HTMLSlotElement;\n      const contentSlot = this.el.shadowRoot?.querySelector('slot[name=\"content\"]') as HTMLSlotElement;\n\n      const navigationElements = (navigationSlot?.assignedElements({ flatten: true }) || []).filter(isInThisComponent);\n      const contentElements = (contentSlot?.assignedElements({ flatten: true }) || []).filter(isInThisComponent);\n\n      navigationElements.forEach(el => {\n        if (el.tagName === 'SPW-TABS-NAVIGATION') {\n          el.classList.add(variantClass);\n\n          el.querySelectorAll('spw-tabs-navigation-item').forEach(item => {\n            if (isInThisComponent(item)) {\n              item.classList.add(variantClass);\n              item.classList.add(sizeClass);\n            }\n          });\n        } else if (el.tagName === 'SPW-TABS-NAVIGATION-ITEM') {\n          el.classList.add(variantClass);\n          el.classList.add(sizeClass);\n        }\n      });\n\n      contentElements.forEach(el => {\n        if (el.tagName === 'SPW-TABS-CONTENT') {\n          el.classList.add(variantClass);\n        } else {\n          el.querySelectorAll('spw-tabs-content').forEach(content => {\n            if (isInThisComponent(content)) {\n              content.classList.add(variantClass);\n            }\n          });\n        }\n      });\n\n      this.applyMaxWidthToChildren();\n    });\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-tabs': true,\n      [`spw-tabs--${this.variant}`]: true,\n    };\n  }\n\n  render() {\n    return (\n      <div class={this.elementClass}>\n        <slot name=\"navigation\"></slot>\n        <slot name=\"content\"></slot>\n      </div>\n    );\n  }\n}"]}

package/dist/collection/components/spw-tag/spw-tag.js

@@ -43,7 +43,7 @@ export class SpwTag {
                 href,
                 target,
             };
-        return (h(Host, { key: 'ab649f9851f69d2d4276cf0489bdf57f0d94bdd6' }, h(TagType, Object.assign({ key: '34d05a9275ef567f607446cd1822218575fe0788' }, attrs, { class: this.elementClass }), this.hasIcon && h("spw-icon", { key: 'b03781f4f2b740cbff91743bdace8b8cb2a49a57', icon: this.getIcon(this.variant) }), h("slot", { key: 'b2a1e7b049518c9123e962aa641ce332873beb7f' }))));
+        return (h(Host, { key: '9ec9574f02aeba913bdf40729fd96c24d1844fe4' }, h(TagType, Object.assign({ key: '3c812a9f5885d71089202f5c74cd9611789a41cc' }, attrs, { class: this.elementClass }), this.hasIcon && h("spw-icon", { key: '87bd304e0fa35f8c92a48cc7069706c7a8563a66', icon: this.getIcon(this.variant) }), h("slot", { key: 'e72629f59002e3684293a0a69e342a43d2739cba' }))));
     }
     static get is() { return "spw-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-text-field/spw-text-field.js

@@ -178,7 +178,7 @@ export class SpwTextField {
         };
     }
     render() {
-        return (h("div", { key: 'a8e4a26a0e9cd3e6639916f839a704e592fcd222', class: this.elementClass }, this.label && h("spw-field-label", { key: 'a2dcddcbbb64d2e29bea9e4f4ee67910493fb2b8', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: '882d401c3d92a7c6ee940fdd4efc11f159ab6af5', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '2ece46a096e3c4e877a92984e46343049c5b76aa', class: "spw-text-field__container" }, h("div", { key: '9031b1d7f2d59b295ec423a4761f460e7f68726b', class: "spw-text-field__input-container" }, h("input", { key: '2b271442e8cb8fa5b8c15831e94248c332ba6e4b', class: "spw-text-field__input", ref: el => (this.inputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, name: this.name, id: this.name, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleInput(event) }), (this.isSearch || this.isClearIconVisible) && (h("div", { key: 'e01496b14f5222db0728c3641c6c3ecd5431a4f4', class: "spw-text-field__icons" }, this.isClearIconVisible && (h("span", { key: '2aaeb6467430861a8b63525b5f9c8dbb53982f54', class: "spw-text-field__clear", onClick: () => this.handleClear() }, h("spw-icon", { key: 'b026c07e9816e3869c36532427fab22ec2958e99', class: "spw-text-field__icon spw-text-field__icon--clear", icon: "fa-xmark" }))), this.isSearch && h("spw-icon", { key: 'f748bc8d867225d876df4bb8d3ce16aba1579538', class: "spw-text-field__icon spw-text-field__icon--search", icon: "fa-magnifying-glass" })))), this.indicator && h("div", { key: '1b2e6883921ebc5953255ab46930a63b2c97a659', class: "spw-text-field__indicator" }, this.indicator)), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+        return (h("div", { key: '897135e1ef70bba1a7482101bb5afc21042d6d6d', class: this.elementClass }, this.label && h("spw-field-label", { key: 'f4cf7dca86160431b5822b80065badbeea5d2a28', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: 'ac0efb4f0562a637518bead295e4a3ed0db39023', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '06e311660a0c8885b9f18a315fe13cbdd34e478a', class: "spw-text-field__container" }, h("div", { key: '0c34ad36cc057da29d632d682501b9fc9108a896', class: "spw-text-field__input-container" }, h("input", { key: '461cf26acf38bf7426b2c5c480eae05520f16b7d', class: "spw-text-field__input", ref: el => (this.inputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, name: this.name, id: this.name, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleInput(event) }), (this.isSearch || this.isClearIconVisible) && (h("div", { key: '7d7573e48e33612951160a4e1bac559c847c562f', class: "spw-text-field__icons" }, this.isClearIconVisible && (h("span", { key: '55926ef9c1229d4dd2555bf8b8fdbd656b368672', class: "spw-text-field__clear", onClick: () => this.handleClear() }, h("spw-icon", { key: '9fe19323666473fb21f34cadee50574d5abbf8b9', class: "spw-text-field__icon spw-text-field__icon--clear", icon: "fa-xmark" }))), this.isSearch && h("spw-icon", { key: 'eac7e636dc86c1e51b87f5333b25d3eeffe241ed', class: "spw-text-field__icon spw-text-field__icon--search", icon: "fa-magnifying-glass" })))), this.indicator && h("div", { key: 'cc6dddfdfab80c00c63c9742f90359bdae001f73', class: "spw-text-field__indicator" }, this.indicator)), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get is() { return "spw-text-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-textarea/spw-textarea.js

@@ -87,7 +87,7 @@ export class SpwTextarea {
         };
     }
     render() {
-        return (h("div", { key: '41bda187f57240937dcdd7f654b8ea0c2b7f57fd', class: this.elementClass }, this.label && h("spw-field-label", { key: '7f6e0ea03fce3716f5fa184ec5fb9e805fb8a70c', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: 'd70e5e708cd01c8b3812dc5079804eedebc3b75e', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '3b1ed247ab3cedb6a8b66c48b7e507224219d874', class: "spw-textarea__container" }, h("textarea", { key: '7df8f7ab43379a873f9423dd1ec922e804f40aa5', class: "spw-textarea__input", value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, name: this.name, id: this.name, rows: this.rows, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleChange(event) })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+        return (h("div", { key: 'ad0252f8485e8101e6b2af0bb47c2985b1023b5c', class: this.elementClass }, this.label && h("spw-field-label", { key: '8b4f2c373a7a2dac405a765cefbd0c2435804683', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: 'fca83015e42172dffa5f7bbee76b18515897f734', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '68fa356bc0aa6ea3f7365989d5f268a498435f62', class: "spw-textarea__container" }, h("textarea", { key: 'b0843158e1ee2bc53583e789ecb1df50a8f244a1', class: "spw-textarea__input", value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, name: this.name, id: this.name, rows: this.rows, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleChange(event) })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get is() { return "spw-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-theme-provider/spw-theme-provider.js

@@ -24,7 +24,7 @@ export class SpwThemeProvider {
         document.documentElement.setAttribute('data-theme', theme);
     }
     render() {
-        return (h("main", { key: '92e750eeb7d9cfb5c45c287e79339e7a36a7aaa3', class: `spw-theme-${this.theme}` }, h("slot", { key: '3d17a62b77a464cbee50f4d91a3c7e3fa6417f6f' })));
+        return (h("main", { key: 'fe8735bc96ea2e67e909da9e814f5b6199bf8c51', class: `spw-theme-${this.theme}` }, h("slot", { key: 'd546265c68d770478715ded4aa9aead66ea921ec' })));
     }
     static get is() { return "spw-theme-provider"; }
     static get properties() {

package/dist/collection/components/spw-tile/spw-tile-description/spw-tile-description.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SpwTileDescription {
     render() {
-        return (h("div", { key: 'd37dd71f558988cf061279d1c67a1fd05f950376', class: "spw-tile-description" }, h("slot", { key: 'f290ad1a6bfd1af15745164694e84e8d5ddc6215' })));
+        return (h("div", { key: '2c00fd0223b187c1d8fb920acac3f79ad6ab42a5', class: "spw-tile-description" }, h("slot", { key: '4010e7830f45e775557b29df4608c5360102afb1' })));
     }
     static get is() { return "spw-tile-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-tile/spw-tile-title/spw-tile-title.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SpwTileTitle {
     render() {
-        return (h("h3", { key: 'e1a925149a384b3edfb0f0ee7d91e7ffaca4e0ad', class: "spw-tile-title" }, h("slot", { key: '3ddfa9f9a5d1f1f512f7d438850950573f01722d' })));
+        return (h("h3", { key: 'c5ad6b148fa95e436381934b773218920b947777', class: "spw-tile-title" }, h("slot", { key: '2b0f8840619eddb00e021234f0d7ec03a470f453' })));
     }
     static get is() { return "spw-tile-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-tile/spw-tile.js

@@ -51,7 +51,7 @@ export class SpwTile {
                 href,
                 target,
             };
-        return (h(Host, { key: 'f78c7078531dbed2268e746bf105a21bd5fcf5f1' }, h(TagType, Object.assign({ key: '94941f19d35f9e97634973507e9854eaf4dfa665' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: '6d49504c4d358e28e452b24323978df6e2212178' }, h("div", { key: 'b753643526594df6b5c01520b3ee3de2693c63a9', class: "spw-tile__overlay" }), h("img", { key: '4ab4e359cf80da1849d610621e3e22d2df9ce289', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: 'e7cb3747ac97550f174bcd59196dfa98a9bcd683', class: "spw-tile__content" }, h("slot", { key: '8fdb450b32c3afee46b6c8a16f8f48d8dc5418fa' }), this.href && this.variant === 'big' && (h("span", { key: 'da608c7616bcd675bee95ab63330b187c70712b3', class: "spw-tile__button" }, h("spw-icon", { key: '10ca3d8ae075bcc0a775d3a828724cec34d537d8', icon: "fa-chevron-right" })))))));
+        return (h(Host, { key: '0be156aef8b807e50c9b0fb594f90cd3e3538923' }, h(TagType, Object.assign({ key: 'fec1b1cd50fd04e8b91482e1c3ca22a44723d3cf' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: 'f13b311da075ce6da307a811c81888e04c96b8f7' }, h("div", { key: 'e51fd8ce88c5898c61908784cb14ef99c1823edb', class: "spw-tile__overlay" }), h("img", { key: 'ed0f642f7e25200574f1e737bc958c2aaeb83ea7', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: '680bff5334f27dbc502f2826a72b5a7e246cc23e', class: "spw-tile__content" }, h("slot", { key: 'c95afead8b77622ef375b031ea58c28d72691cd2' }), this.href && this.variant === 'big' && (h("span", { key: '005ba95651126eb6d2da291f53ed7030b3c21273', class: "spw-tile__button" }, h("spw-icon", { key: '2b08cab402f4a8dfa5eb4c6a608c551e38c5bf1f', icon: "fa-chevron-right" })))))));
     }
     static get is() { return "spw-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-tooltip/spw-tooltip.css

@@ -1,2 +1,2 @@
 
- /*! 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:inline-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-tooltip__target--pointer{cursor:pointer}.spw-tooltip__target--default{cursor:default}.spw-tooltip__target--help{cursor:help}.spw-tooltip__target--disabled{cursor:not-allowed}
+ /*! 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:inline-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-tooltip__target--pointer{cursor:pointer}.spw-tooltip__target--default{cursor:default}.spw-tooltip__target--help{cursor:help}.spw-tooltip__target--disabled{cursor:not-allowed}:host(.spw-tooltip--has-ellipsis) .spw-tooltip__target{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/dist/collection/components/spw-tooltip/spw-tooltip.js

@@ -127,7 +127,7 @@ export class SpwTooltip {
         };
     }
     render() {
-        return (h("div", { key: '03e63c35f429ebef8749224d437353fe50be1eff', class: this.classes, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: '104a0b40808acfd3e9639c9ef5c67c3d4721f855' })));
+        return (h("div", { key: '3b88c523d089d2cb72700b3d7dbe90278d30bf72', class: this.classes, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: 'a0c926bfca01a111ef3d01090583e010c719b809' })));
     }
     static get is() { return "spw-tooltip"; }
     static get encapsulation() { return "shadow"; }