npm - @spw-ds/spw-stencil-library - Versions diffs - 1.2.3 → 1.2.5 - Mend

@spw-ds/spw-stencil-library 1.2.3 → 1.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (724) hide show

package/dist/components/spw-sidebar-navigation-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"spw-sidebar-navigation-item.js","mappings":"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","names":["SpwSidebarNavigationItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-sidebar/spw-sidebar-navigation-item/spw-sidebar-navigation-item.scss?tag=spw-sidebar-navigation-item","src/components/spw-sidebar/spw-sidebar-navigation-item/spw-sidebar-navigation-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-sidebar-navigation-item {\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: start;\n color: inherit;\n text-decoration: none;\n padding-right: 16px;\n font-size: 16px;\n width: var(--spw-ds-bo-sidebar-expanded-width);\n color: var(--spw-colors-support-grey-grey-900);\n transition: all 0.2s ease;\n margin: 8px 0;\n .spw-sidebar-navigation-dropdown & {\n width: auto;\n margin: 0;\n }\n &:hover {\n color: var(--spw-colors-support-grey-grey-900);\n }\n &--active,\n &--active:hover {\n .spw-sidebar-navigation-item__icon {\n color: var(--spw-ds-primary);\n }\n }\n &--disabled {\n cursor: not-allowed;\n opacity: 0.3;\n }\n spw-sidebar-navigation-dropdown & {\n padding-right: 0;\n }\n spw-tooltip {\n line-height: 1;\n }\n &__bubble {\n position: absolute;\n top: 0;\n left: 32px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n z-index: 12;\n width: 20px;\n height: 20px;\n font-size: 10px;\n line-height: 1;\n border: 3px solid white;\n border-radius: 50%;\n background-color: var(--spw-ds-primary);\n color: white;\n }\n &__icon {\n position: relative;\n min-width: var(--spw-ds-bo-sidebar-width);\n width: var(--spw-ds-bo-sidebar-width);\n padding: 12px 0;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n font-size: 18px;\n .--expanded & {\n position: static;\n }\n &:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: all 0.2s ease;\n .spw-sidebar-navigation-item:not(.spw-sidebar-navigation-item--disabled):hover & {\n width: 40px;\n height: 40px;\n background-color: var(--spw-colors-support-grey-grey-200);\n .--expanded & {\n width: calc(100% - 16px);\n height: 100%;\n }\n }\n .spw-sidebar-navigation-item--dropdown-opened &,\n .spw-sidebar-navigation-item--dropdown-opened:hover & {\n width: 0;\n height: 0;\n background-color: var(--spw-colors-support-grey-grey-100) !important;\n .--expanded & {\n width: calc(100% - 16px);\n height: 100%;\n }\n }\n .--expanded & {\n transition: background-color 0.2s ease;\n border-radius: 4px;\n }\n }\n spw-icon {\n position: relative;\n z-index: 2;\n }\n }\n &__content {\n padding: 12px 0;\n flex: 1;\n z-index: 2;\n max-width: calc(var(--spw-ds-bo-sidebar-expanded-width) - var(--spw-ds-bo-sidebar-width) - 12px);\n .spw-sidebar-navigation-dropdown & {\n max-width: 100%;\n padding: 8px;\n }\n &-label {\n white-space: nowrap;\n overflow: hidden;\n display: block;\n text-overflow: ellipsis;\n .--expanded & {\n white-space: normal;\n overflow: visible;\n text-overflow: none;\n }\n .spw-sidebar-navigation-dropdown & {\n font-size: 14px;\n }\n }\n }\n &__dropdown-toggle {\n position: absolute;\n right: 16px;\n top: 10px;\n width: 24px;\n height: 24px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n z-index: 10;\n transition: background-color 0.2s ease;\n\n .spw-sidebar-navigation-dropdown & {\n right: 8px;\n top: 5px;\n }\n\n &:hover {\n background-color: var(--spw-colors-support-grey-grey-300);\n .spw-sidebar-navigation-dropdown & {\n background-color: var(--spw-colors-support-grey-grey-400);\n }\n }\n\n spw-icon {\n font-size: 14px;\n position: relative;\n color: var(--spw-colors-support-grey-grey-900);\n transition: transform 0.2s ease;\n }\n\n &--open {\n spw-icon {\n transform: rotate(180deg);\n }\n }\n }\n spw-sidebar-navigation-dropdown {\n .--collapsed & {\n display: none;\n }\n }\n}\n\n.spw-sidebar-navigation-item--dropdown-opened > .spw-sidebar-navigation-item__content > .spw-sidebar-navigation-item__content-label {\n font-weight: bold;\n}\n\n.spw-sidebar-navigation-item--has-dropdown > .spw-sidebar-navigation-item__content > .spw-sidebar-navigation-item__content-label {\n padding-right: 32px;\n}\n\n.spw-sidebar-navigation-item .spw-sidebar-navigation-item--dropdown-opened > .spw-sidebar-navigation-item__content {\n background: white;\n border-radius: 4px;\n}\n\n.spw-sidebar-navigation-dropdown .spw-sidebar-navigation-item {\n border-radius: 4px;\n &:hover {\n background-color: var(--spw-colors-support-grey-grey-300);\n }\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-sidebar-navigation-item',\n styleUrl: 'spw-sidebar-navigation-item.scss',\n shadow: false,\n})\nexport class SpwSidebarNavigationItem {\n @Element() el: HTMLElement;\n\n /** A appliquer sur spw-sidebar-navigation-item, permet de définir un href sur l'élément /\n @Prop() href?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir une référence font-awesome sur l'élément /\n @Prop() icon?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de mettre en évidence un état actif /\n @Prop() active: boolean = false;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir si l'élément est disabled ou non /\n @Prop() disabled: boolean = false;\n /* A appliquer sur spw-sidebar-navigation-item, permet d'afficher une bulle de notification avec un nombre /\n @Prop() bubble?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir un tooltip au hover /\n @Prop() tooltipTitle?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de choisir la variante d'icônes font-awesome */\n @Prop() iconVariant: 'fa-solid' \| 'fa-brands' \| 'fa-regular' = 'fa-regular';\n\n @State() hasDropdown: boolean = false;\n @State() dropdownOpen: boolean = false;\n @State() navExpanded: boolean = false;\n\n private mutationObserver?: MutationObserver;\n private bodyClassObserver?: MutationObserver;\n\n componentDidLoad() {\n this.checkForDropdown();\n this.setupMutationObserver();\n this.checkNavExpanded();\n this.setupBodyClassObserver();\n }\n\n componentDidUpdate() {\n this.checkForDropdown();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n if (this.bodyClassObserver) {\n this.bodyClassObserver.disconnect();\n }\n }\n\n private setupMutationObserver() {\n this.mutationObserver = new MutationObserver(() => {\n this.checkForDropdown();\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['open'],\n });\n }\n\n private checkForDropdown() {\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n this.hasDropdown = dropdown !== null;\n\n if (dropdown) {\n this.dropdownOpen = !!dropdown.open \|\| dropdown.hasAttribute?.('open');\n } else {\n this.dropdownOpen = false;\n }\n }\n\n private checkNavExpanded = () => {\n this.navExpanded = document.body.classList.contains('spw-sidebar-expanded');\n };\n\n private setupBodyClassObserver() {\n this.bodyClassObserver = new MutationObserver(() => {\n this.checkNavExpanded();\n });\n this.bodyClassObserver.observe(document.body, {\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private get classes() {\n return {\n 'spw-sidebar-navigation-item': true,\n 'spw-sidebar-navigation-item--active': this.active,\n 'spw-sidebar-navigation-item--disabled': this.disabled,\n 'spw-sidebar-navigation-item--has-dropdown': this.hasDropdown,\n 'spw-sidebar-navigation-item--dropdown-opened': this.dropdownOpen,\n } as Record<string, boolean>;\n }\n\n private handleDropdownToggle = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.disabled) return;\n\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n\n if (dropdown) {\n dropdown.open = !dropdown.open;\n if (dropdown.open) {\n dropdown.setAttribute?.('open', '');\n } else {\n dropdown.removeAttribute?.('open');\n }\n this.dropdownOpen = dropdown.open;\n }\n };\n\n render() {\n const Tag = this.href && !this.disabled ? 'a' : 'div';\n\n const iconContent = <spw-icon variant={this.iconVariant} icon={this.icon}></spw-icon>;\n\n const iconDiv = (\n <div class=\"spw-sidebar-navigation-item__icon\">\n {this.bubble && <span class=\"spw-sidebar-navigation-item__bubble\">{this.bubble}</span>}\n {iconContent}\n </div>\n );\n\n const iconWithBubble = this.tooltipTitle ? (\n <spw-tooltip cursor={this.disabled ? 'disabled' : 'pointer'} tooltip-title={this.tooltipTitle} direction=\"right\" visible={!this.navExpanded}>\n {iconDiv}\n </spw-tooltip>\n ) : (\n iconDiv\n );\n\n const toggleClasses = {\n 'spw-sidebar-navigation-item__dropdown-toggle': true,\n 'spw-sidebar-navigation-item__dropdown-toggle--open': this.dropdownOpen,\n } as Record<string, boolean>;\n\n return (\n <Tag class={this.classes} href={this.href} aria-disabled={this.disabled ? 'true' : undefined} tabIndex={this.disabled ? -1 : 0}>\n {this.icon && iconWithBubble}\n\n <div class=\"spw-sidebar-navigation-item__content\">\n <div class=\"spw-sidebar-navigation-item__content-label\">\n <slot></slot>\n </div>\n\n {this.hasDropdown && (\n <div class={toggleClasses} onClick={this.handleDropdownToggle} tabIndex={this.disabled ? -1 : 0}>\n <spw-icon icon=\"fa-chevron-down\"></spw-icon>\n </div>\n )}\n\n <slot name=\"dropdown\"></slot>\n </div>\n </Tag>\n );\n }\n}\n"],"version":3}
1	+ {"file":"spw-sidebar-navigation-item.js","mappings":";;;;AAAA,MAAM,2BAA2B,GAAG,08OAA08O;;MCOj+OA,0BAAwB,iBAAAC,kBAAA,CAAA,MAAA,wBAAA,SAAAC,CAAA,CAAA;AALrC,IAAA,WAAA,GAAA;;;;AAaU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAEvB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAMzB,QAAA,IAAW,CAAA,WAAA,GAA4C,YAAY;;AAEnE,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAE3B,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAC7B,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAkDhC,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC;AAC7E,SAAC;AA0DO,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAAiB,KAAI;;YACnD,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;YAEvB,IAAI,IAAI,CAAC,QAAQ;gBAAE;YAEnB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iCAAiC,CAAQ;YAEhF,IAAI,QAAQ,EAAE;AACZ,gBAAA,QAAQ,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI;AAC9B,gBAAA,IAAI,QAAQ,CAAC,IAAI,EAAE;AACjB,oBAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,QAAA,EAAG,MAAM,EAAE,EAAE,CAAC;;qBAC9B;AACL,oBAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,eAAe,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,QAAA,EAAA,MAAM,CAAC;;AAEpC,gBAAA,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI;;AAErC,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAiB,KAAI;YAC9C,IAAI,IAAI,CAAC,QAAQ;gBAAE;YAEnB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE;AACxC,gBAAA,MAAM,cAAc,GAAG,KAAK,CAAC,MAAqB;AAClD,gBAAA,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,CAAC,6BAA6B,CAAC,KAAK,IAAI,CAAC,EAAE;gBAE/F,IAAI,qBAAqB,EAAE;oBACzB;;gBAGF,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;AAEvB,gBAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;oBACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC;oBACnD,UAAU,CAAC,MAAK;wBACd,IAAI,CAAC,YAAY,EAAE;qBACpB,EAAE,GAAG,CAAC;;qBACF;oBACL,IAAI,CAAC,cAAc,EAAE;;;AAG3B,SAAC;AAEO,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;;YAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iCAAiC,CAAQ;YAChF,IAAI,QAAQ,EAAE;AACZ,gBAAA,QAAQ,CAAC,IAAI,GAAG,IAAI;AACpB,gBAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,QAAA,EAAG,MAAM,EAAE,EAAE,CAAC;AACnC,gBAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;AAE5B,SAAC;AAEO,QAAA,IAAc,CAAA,cAAA,GAAG,MAAK;;YAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iCAAiC,CAAQ;YAChF,IAAI,QAAQ,EAAE;AACZ,gBAAA,QAAQ,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI;AAC9B,gBAAA,IAAI,QAAQ,CAAC,IAAI,EAAE;AACjB,oBAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,QAAA,EAAG,MAAM,EAAE,EAAE,CAAC;;qBAC9B;AACL,oBAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,eAAe,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,QAAA,EAAA,MAAM,CAAC;;AAEpC,gBAAA,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI;;AAErC,SAAC;AAqDF;IA9NC,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,sBAAsB,EAAE;QAC7B,IAAI,CAAC,6BAA6B,EAAE;;IAGtC,kBAAkB,GAAA;QAChB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;;AAEpC,QAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE;AAC1B,YAAA,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE;;;IAI/B,qBAAqB,GAAA;AAC3B,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAK;YAChD,IAAI,CAAC,gBAAgB,EAAE;AACzB,SAAC,CAAC;QAEF,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;AACrC,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,MAAM,CAAC;AAC1B,SAAA,CAAC;;IAGI,gBAAgB,GAAA;;QACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iCAAiC,CAAQ;AAChF,QAAA,IAAI,CAAC,WAAW,GAAG,QAAQ,KAAK,IAAI;QAEpC,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,QAAQ,CAAC,IAAI,KAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,YAAY,yDAAG,MAAM,CAAC,CAAA;;aACjE;AACL,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;;IAQrB,sBAAsB,GAAA;AAC5B,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACjD,IAAI,CAAC,gBAAgB,EAAE;AACzB,SAAC,CAAC;QACF,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC5C,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO,CAAC;AAC3B,SAAA,CAAC;;IAGI,6BAA6B,GAAA;AACnC,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,mBAAmB,EAAE;;QAG5B,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,6BAA6B,CAAC;AAC1E,QAAA,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,KAAU,KAAK,KAAK,CAAC,MAAM,KAAK,IAAI,IAAI,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,MAAM,CAAC;QAEzI,IAAI,mBAAmB,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;YAC1B,IAAI,CAAC,YAAY,EAAE;;;IAIf,mBAAmB,GAAA;AACzB,QAAA,IAAI,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;QAElC,OAAO,MAAM,EAAE;YACb,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,6BAA6B,CAAC;YAEhE,IAAI,UAAU,IAAI,UAAU,KAAK,IAAI,CAAC,EAAE,EAAE;AACvC,gBAAA,UAAkB,CAAC,cAAc,GAAG,IAAI;gBAEzC,MAAM,QAAQ,GAAG,UAAU,CAAC,aAAa,CAAC,0CAA0C,CAAQ;gBAC5F,IAAI,QAAQ,EAAE;AACZ,oBAAA,QAAQ,CAAC,IAAI,GAAG,IAAI;AACpB,oBAAA,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC;;AAGnC,gBAAA,MAAM,GAAG,UAAU,CAAC,aAAa;;iBAC5B;gBACL;;;;AAKN,IAAA,IAAY,OAAO,GAAA;QACjB,OAAO;AACL,YAAA,6BAA6B,EAAE,IAAI;AACnC,YAAA,qCAAqC,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc;YACzE,uCAAuC,EAAE,IAAI,CAAC,QAAQ;YACtD,2CAA2C,EAAE,IAAI,CAAC,WAAW;YAC7D,8CAA8C,EAAE,IAAI,CAAC,YAAY;SACvC;;IAqE9B,MAAM,GAAA;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,KAAK;QAE1E,MAAM,WAAW,GAAG,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa;AAErF,QAAA,MAAM,OAAO,IACX,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mCAAmC,EAAA,EAC3C,IAAI,CAAC,MAAM,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAE,EAAA,IAAI,CAAC,MAAM,CAAQ,EACrF,WAAW,CACR,CACP;QAED,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,IACtC,CAAa,CAAA,aAAA,EAAA,EAAA,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,SAAS,EAAA,eAAA,EAAiB,IAAI,CAAC,YAAY,EAAE,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,CAAC,WAAW,EACxI,EAAA,OAAO,CACI,KAEd,OAAO,CACR;AAED,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,8CAA8C,EAAE,IAAI;YACpD,oDAAoD,EAAE,IAAI,CAAC,YAAY;SAC7C;QAE5B,QACE,CAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAAA,eAAA,EAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,GAAG,SAAS,EAAA,EAE3D,IAAI,CAAC,IAAI,IAAI,cAAc,EAE5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sCAAsC,EAAA,EAC/C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4CAA4C,EAAA,EACrD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EAEL,IAAI,CAAC,WAAW,KACf,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,EAC7F,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,EAAA,CAAY,CACxC,CACP,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwSidebarNavigationItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-sidebar/spw-sidebar-navigation-item/spw-sidebar-navigation-item.scss?tag=spw-sidebar-navigation-item","src/components/spw-sidebar/spw-sidebar-navigation-item/spw-sidebar-navigation-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-sidebar-navigation-item {\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: start;\n color: inherit;\n text-decoration: none;\n padding-right: 16px;\n font-size: 16px;\n width: var(--spw-ds-bo-sidebar-expanded-width);\n color: var(--spw-colors-support-grey-grey-900);\n transition: all 0.2s ease;\n margin: 8px 0;\n .spw-sidebar-navigation-dropdown & {\n width: auto;\n margin: 0;\n }\n &:hover {\n color: var(--spw-colors-support-grey-grey-900);\n }\n &--active,\n &--active:hover {\n .spw-sidebar-navigation-item__icon {\n color: var(--spw-ds-primary);\n }\n }\n &--disabled {\n cursor: not-allowed;\n opacity: 0.3;\n }\n spw-sidebar-navigation-dropdown & {\n padding-right: 0;\n }\n spw-tooltip {\n line-height: 1;\n }\n &__bubble {\n position: absolute;\n top: 0;\n left: 32px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n z-index: 12;\n width: 20px;\n height: 20px;\n font-size: 10px;\n line-height: 1;\n border: 3px solid white;\n border-radius: 50%;\n background-color: var(--spw-ds-primary);\n color: white;\n }\n &__icon {\n position: relative;\n min-width: var(--spw-ds-bo-sidebar-width);\n width: var(--spw-ds-bo-sidebar-width);\n padding: 12px 0;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n font-size: 18px;\n .--expanded & {\n position: static;\n }\n &:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: all 0.2s ease;\n .spw-sidebar-navigation-item:not(.spw-sidebar-navigation-item--disabled):hover & {\n width: 40px;\n height: 40px;\n background-color: var(--spw-colors-support-grey-grey-200);\n .--expanded & {\n width: calc(100% - 16px);\n height: 100%;\n }\n }\n .spw-sidebar-navigation-item--dropdown-opened &,\n .spw-sidebar-navigation-item--dropdown-opened:hover & {\n width: 0;\n height: 0;\n background-color: var(--spw-colors-support-grey-grey-100) !important;\n .--expanded & {\n width: calc(100% - 16px);\n height: 100%;\n }\n }\n .--expanded & {\n transition: background-color 0.2s ease;\n border-radius: 4px;\n }\n }\n spw-icon {\n position: relative;\n z-index: 2;\n }\n }\n &__content {\n padding: 12px 0;\n flex: 1;\n z-index: 2;\n max-width: calc(var(--spw-ds-bo-sidebar-expanded-width) - var(--spw-ds-bo-sidebar-width) - 12px);\n .spw-sidebar-navigation-dropdown & {\n max-width: 100%;\n padding: 8px;\n }\n &-label {\n white-space: nowrap;\n overflow: hidden;\n display: block;\n text-overflow: ellipsis;\n .--expanded & {\n white-space: normal;\n overflow: visible;\n text-overflow: none;\n }\n .spw-sidebar-navigation-dropdown & {\n font-size: 14px;\n }\n }\n }\n &__dropdown-toggle {\n position: absolute;\n right: 16px;\n top: 10px;\n width: 24px;\n height: 24px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n z-index: 10;\n transition: background-color 0.2s ease;\n\n .spw-sidebar-navigation-dropdown & {\n right: 8px;\n top: 5px;\n }\n\n &:hover {\n background-color: var(--spw-colors-support-grey-grey-300);\n .spw-sidebar-navigation-dropdown & {\n background-color: var(--spw-colors-support-grey-grey-400);\n }\n }\n\n spw-icon {\n font-size: 14px;\n position: relative;\n color: var(--spw-colors-support-grey-grey-900);\n transition: transform 0.2s ease;\n }\n\n &--open {\n spw-icon {\n transform: rotate(180deg);\n }\n }\n }\n spw-sidebar-navigation-dropdown {\n .--collapsed & {\n display: none;\n }\n }\n}\n\n.spw-sidebar-navigation-item--dropdown-opened > .spw-sidebar-navigation-item__content > .spw-sidebar-navigation-item__content-label {\n font-weight: bold;\n}\n\n.spw-sidebar-navigation-item--has-dropdown > .spw-sidebar-navigation-item__content > .spw-sidebar-navigation-item__content-label {\n padding-right: 32px;\n}\n\n.spw-sidebar-navigation-item .spw-sidebar-navigation-item--dropdown-opened > .spw-sidebar-navigation-item__content {\n background: white;\n border-radius: 4px;\n}\n\n.spw-sidebar-navigation-dropdown .spw-sidebar-navigation-item {\n border-radius: 4px;\n &:hover {\n background-color: var(--spw-colors-support-grey-grey-300);\n }\n &.spw-sidebar-navigation-item--active {\n > .spw-sidebar-navigation-item__content > .spw-sidebar-navigation-item__content-label {\n color: var(--spw-ds-primary);\n font-weight: bold;\n }\n }\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-sidebar-navigation-item',\n styleUrl: 'spw-sidebar-navigation-item.scss',\n shadow: false,\n})\nexport class SpwSidebarNavigationItem {\n @Element() el: HTMLElement;\n\n /** A appliquer sur spw-sidebar-navigation-item, permet de définir un href sur l'élément /\n @Prop() href?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir une référence font-awesome sur l'élément /\n @Prop() icon?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de mettre en évidence un état actif /\n @Prop() active: boolean = false;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir si l'élément est disabled ou non /\n @Prop() disabled: boolean = false;\n /* A appliquer sur spw-sidebar-navigation-item, permet d'afficher une bulle de notification avec un nombre /\n @Prop() bubble?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir un tooltip au hover /\n @Prop() tooltipTitle?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de choisir la variante d'icônes font-awesome /\n @Prop() iconVariant: 'fa-solid' \| 'fa-brands' \| 'fa-regular' = 'fa-regular';\n /* A appliquer sur spw-sidebar-navigation-item, si true, le clic sur l'item entier ouvre le dropdown (utile quand il n'y a pas de page physique) */\n @Prop() openOnClick: boolean = false;\n\n @State() hasDropdown: boolean = false;\n @State() dropdownOpen: boolean = false;\n @State() navExpanded: boolean = false;\n @State() hasActiveChild: boolean = false;\n\n private mutationObserver?: MutationObserver;\n private bodyClassObserver?: MutationObserver;\n\n componentDidLoad() {\n this.checkForDropdown();\n this.setupMutationObserver();\n this.checkNavExpanded();\n this.setupBodyClassObserver();\n this.propagateActiveStateToParents();\n }\n\n componentDidUpdate() {\n this.checkForDropdown();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n if (this.bodyClassObserver) {\n this.bodyClassObserver.disconnect();\n }\n }\n\n private setupMutationObserver() {\n this.mutationObserver = new MutationObserver(() => {\n this.checkForDropdown();\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['open'],\n });\n }\n\n private checkForDropdown() {\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n this.hasDropdown = dropdown !== null;\n\n if (dropdown) {\n this.dropdownOpen = !!dropdown.open \|\| dropdown.hasAttribute?.('open');\n } else {\n this.dropdownOpen = false;\n }\n }\n\n private checkNavExpanded = () => {\n this.navExpanded = document.body.classList.contains('spw-sidebar-expanded');\n };\n\n private setupBodyClassObserver() {\n this.bodyClassObserver = new MutationObserver(() => {\n this.checkNavExpanded();\n });\n this.bodyClassObserver.observe(document.body, {\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private propagateActiveStateToParents() {\n if (this.active) {\n this.activateParentItems();\n }\n\n const childItems = this.el.querySelectorAll('spw-sidebar-navigation-item');\n const hasActiveDescendant = Array.from(childItems).some((child: any) => child.active === true \|\| child.getAttribute('active') === 'true');\n\n if (hasActiveDescendant) {\n this.hasActiveChild = true;\n this.openDropdown();\n }\n }\n\n private activateParentItems() {\n let parent = this.el.parentElement;\n\n while (parent) {\n const parentItem = parent.closest('spw-sidebar-navigation-item');\n\n if (parentItem && parentItem !== this.el) {\n (parentItem as any).hasActiveChild = true;\n\n const dropdown = parentItem.querySelector(':scope > spw-sidebar-navigation-dropdown') as any;\n if (dropdown) {\n dropdown.open = true;\n dropdown.setAttribute('open', '');\n }\n\n parent = parentItem.parentElement;\n } else {\n break;\n }\n }\n }\n\n private get classes() {\n return {\n 'spw-sidebar-navigation-item': true,\n 'spw-sidebar-navigation-item--active': this.active \|\| this.hasActiveChild,\n 'spw-sidebar-navigation-item--disabled': this.disabled,\n 'spw-sidebar-navigation-item--has-dropdown': this.hasDropdown,\n 'spw-sidebar-navigation-item--dropdown-opened': this.dropdownOpen,\n } as Record<string, boolean>;\n }\n\n private handleDropdownToggle = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.disabled) return;\n\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n\n if (dropdown) {\n dropdown.open = !dropdown.open;\n if (dropdown.open) {\n dropdown.setAttribute?.('open', '');\n } else {\n dropdown.removeAttribute?.('open');\n }\n this.dropdownOpen = dropdown.open;\n }\n };\n\n private handleItemClick = (event: MouseEvent) => {\n if (this.disabled) return;\n\n if (this.openOnClick && this.hasDropdown) {\n const clickedElement = event.target as HTMLElement;\n const isChildNavigationItem = clickedElement.closest('spw-sidebar-navigation-item') !== this.el;\n\n if (isChildNavigationItem) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.navExpanded) {\n document.body.classList.add('spw-sidebar-expanded');\n setTimeout(() => {\n this.openDropdown();\n }, 300);\n } else {\n this.toggleDropdown();\n }\n }\n };\n\n private openDropdown = () => {\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n if (dropdown) {\n dropdown.open = true;\n dropdown.setAttribute?.('open', '');\n this.dropdownOpen = true;\n }\n };\n\n private toggleDropdown = () => {\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n if (dropdown) {\n dropdown.open = !dropdown.open;\n if (dropdown.open) {\n dropdown.setAttribute?.('open', '');\n } else {\n dropdown.removeAttribute?.('open');\n }\n this.dropdownOpen = dropdown.open;\n }\n };\n\n render() {\n const Tag = this.href && !this.disabled && !this.openOnClick ? 'a' : 'div';\n\n const iconContent = <spw-icon variant={this.iconVariant} icon={this.icon}></spw-icon>;\n\n const iconDiv = (\n <div class=\"spw-sidebar-navigation-item__icon\">\n {this.bubble && <span class=\"spw-sidebar-navigation-item__bubble\">{this.bubble}</span>}\n {iconContent}\n </div>\n );\n\n const iconWithBubble = this.tooltipTitle ? (\n <spw-tooltip cursor={this.disabled ? 'disabled' : 'pointer'} tooltip-title={this.tooltipTitle} direction=\"right\" visible={!this.navExpanded}>\n {iconDiv}\n </spw-tooltip>\n ) : (\n iconDiv\n );\n\n const toggleClasses = {\n 'spw-sidebar-navigation-item__dropdown-toggle': true,\n 'spw-sidebar-navigation-item__dropdown-toggle--open': this.dropdownOpen,\n } as Record<string, boolean>;\n\n return (\n <Tag\n class={this.classes}\n href={this.openOnClick ? undefined : this.href}\n aria-disabled={this.disabled ? 'true' : undefined}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.openOnClick ? this.handleItemClick : undefined}\n >\n {this.icon && iconWithBubble}\n\n <div class=\"spw-sidebar-navigation-item__content\">\n <div class=\"spw-sidebar-navigation-item__content-label\">\n <slot></slot>\n </div>\n\n {this.hasDropdown && (\n <div class={toggleClasses} onClick={this.handleDropdownToggle} tabIndex={this.disabled ? -1 : 0}>\n <spw-icon icon=\"fa-chevron-down\"></spw-icon>\n </div>\n )}\n\n <slot name=\"dropdown\"></slot>\n </div>\n </Tag>\n );\n }\n}\n"],"version":3}

package/dist/components/spw-sidebar-navigation-separator.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-DIhULKFM.js';
+import { d as defineCustomElement$2 } from './p-Bvpi6byK.js';
 const spwSidebarNavigationSeparatorCss = "/*! 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-sidebar-navigation-separator{margin:12px auto;width:calc(100% - 16px)}";
@@ -10,7 +10,7 @@ const SpwSidebarNavigationSeparator$1 = /*@__PURE__*/ proxyCustomElement(class S
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '5931190d536fcfad890d75a47587ed301507542a' }, h("spw-separator", { key: '8b1e73c9f463260683c3c3e5dd60640f0165406f', class: "spw-sidebar-navigation-separator" })));
+        return (h(Host, { key: '93da5418115a91bd8a45a0b8de207d4d91a9c706' }, h("spw-separator", { key: '7c5cc350ddaf479ed0af22be5f2014b4183c98f2', class: "spw-sidebar-navigation-separator" })));
     }
     static get style() { return spwSidebarNavigationSeparatorCss; }
 }, [1, "spw-sidebar-navigation-separator"]);

package/dist/components/spw-sidebar.js CHANGED Viewed

@@ -19,6 +19,13 @@ const SpwSidebar$1 = /*@__PURE__*/ proxyCustomElement(class SpwSidebar extends H
         this.checkTopbarClass = () => {
             this.hasTopbar = document.body.classList.contains('has-topbar');
         };
+        this.checkExpandedState = () => {
+            // Synchronise l'état interne avec la classe body
+            const bodyHasExpandedClass = document.body.classList.contains(this.BODY_CLASS);
+            if (this.expanded !== bodyHasExpandedClass) {
+                this.expanded = bodyHasExpandedClass;
+            }
+        };
     }
     componentWillLoad() {
         this.expanded = this.defaultExpanded;
@@ -36,6 +43,7 @@ const SpwSidebar$1 = /*@__PURE__*/ proxyCustomElement(class SpwSidebar extends H
     observeBodyClassChanges() {
         this.observer = new MutationObserver(() => {
             this.checkTopbarClass();
+            this.checkExpandedState();
         });
         this.observer.observe(document.body, {
             attributes: true,
@@ -57,7 +65,7 @@ const SpwSidebar$1 = /*@__PURE__*/ proxyCustomElement(class SpwSidebar extends H
         };
     }
     render() {
-        return (h(Host, { key: 'e8b5fe55c0a0bd0bf866cc5cad1da1a8b33ba792', class: this.hostClass }, h("div", { key: 'd9495832225a3008a17de912a79e53602110b5c0', class: this.elementClass }, h("span", { key: 'd5d37ddf70fceee382a5157ac4f468e4923d6a90', class: "spw-sidebar__toggle", onClick: this.toggleSidebar, "aria-expanded": this.expanded.toString() }, h("spw-icon", { key: '5bdd17e49970af56834efd8871c6b5d844189e1e', icon: "fa-chevron-right" })), h("div", { key: 'e372d08ee8ba3d55580bca0a63b554ec01a3719d', class: "spw-sidebar__content" }, h("slot", { key: 'a4d65d4fc323a58c5fa8346d79d8a54e304509fa', name: "navigation-top" }), h("slot", { key: '6484ae2e83756f473c7deab3574e3f747eed744f', name: "navigation-bottom" })), h("div", { key: '495e33ae7faf1aa1116412d876d1352a754c6e9b', class: "spw-sidebar__resize-border", onClick: this.toggleSidebar }))));
+        return (h(Host, { key: 'ddffbd455cbc2710867a69ee8b7591b2f73b6599', class: this.hostClass }, h("div", { key: 'ee150c9244aa861c978c5008efd28c04b8e8c868', class: this.elementClass }, h("span", { key: '873736c218af40bb9a3c2aadb5891420d8b8f674', class: "spw-sidebar__toggle", onClick: this.toggleSidebar, "aria-expanded": this.expanded.toString() }, h("spw-icon", { key: '6c47d4c931c5e1932b06824e2809e77147229eb0', icon: "fa-chevron-right" })), h("div", { key: 'c2894503c4ab71bc570209c9fac1963e13b3ca06', class: "spw-sidebar__content" }, h("slot", { key: 'fb3d4146487654157da34e715c382194dcb4dc5c', name: "navigation-top" }), h("slot", { key: 'bcd036895810de895cfe78e654a3bb584f9d0480', name: "navigation-bottom" })), h("div", { key: 'b0ffe9b397e6a9535acbabd319fc8a37eabeef54', class: "spw-sidebar__resize-border", onClick: this.toggleSidebar }))));
     }
     get el() { return this; }
     static get style() { return spwSidebarCss; }

package/dist/components/spw-sidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"spw-sidebar.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,4zIAA4zI;;MCOr0IA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;AASU,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAG/B,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAElB,QAAA,IAAU,CAAA,UAAA,GAAG,sBAAsB;AAkB5C,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;AAC3B,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;AAC9B,YAAA,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC;AAChE,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC;AACjE,SAAC;~~AA6CF~~;~~IAnEC~~,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe;AACpC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;;QAG9C,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,uBAAuB,EAAE;;IAGhC,oBAAoB,GAAA;;QAClB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;QAC/C,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;;~~IAYrB~~,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACxC,IAAI,CAAC,gBAAgB,EAAE;~~AACzB~~,SAAC,CAAC;QAEF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AACnC,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO,CAAC;AAC3B,SAAA,CAAC;;AAGJ,IAAA,IAAY,SAAS,GAAA;QACnB,OAAO;YACL,YAAY,EAAE,IAAI,CAAC,QAAQ;AAC3B,YAAA,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9B;;AAGH,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,aAAa,EAAE,IAAI;YACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;AACtC,YAAA,wBAAwB,EAAE,CAAC,IAAI,CAAC,QAAQ;YACxC,0BAA0B,EAAE,IAAI,CAAC,SAAS;SAC3C;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,mBAAiB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAA,EACpG,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,kBAAkB,EAAA,CAAY,CACxC,EACP,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAQ,CAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,mBAAmB,EAAA,CAAQ,CAClC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAA,CAAQ,CACvE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwSidebar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-sidebar/spw-sidebar.scss?tag=spw-sidebar&encapsulation=shadow","src/components/spw-sidebar/spw-sidebar.tsx"],"sourcesContent":[":host {\n display: block;\n height: 100%;\n}\n\n.spw-sidebar {\n height: 100%;\n width: var(--spw-ds-bo-sidebar-width);\n transition: width 0.2s ease;\n display: flex;\n flex-direction: column;\n background: white;\n border-right: 1px solid var(--spw-colors-support-grey-grey-300);\n position: fixed;\n top: 0;\n left: 0;\n\n &--with-topbar {\n top: var(--spw-ds-bo-topbar-height);\n height: calc(100% - var(--spw-ds-bo-topbar-height));\n }\n\n &__toggle {\n position: absolute;\n right: 0;\n top: 67px;\n flex-basis: auto;\n width: 20px;\n padding: 6px 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n box-shadow: var(--spw-effect-elevation-6);\n border: 1px solid var(--spw-colors-support-grey-grey-300);\n cursor: pointer;\n font-size: 13px;\n z-index: 20;\n transform: translateX(50%);\n background: white;\n line-height: 1;\n spw-icon {\n position: relative;\n transition: transform 0.15s 0.2s ease;\n .spw-sidebar--expanded & {\n transform: rotate(180deg);\n }\n }\n }\n\n &__content {\n overflow: hidden;\n flex: 1 1 auto;\n overflow-y: auto;\n padding: 16px 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n @include scrollbars(var(--spw-color-themes-grey-grey-400), var(--spw-ds-white));\n }\n\n &--expanded {\n width: var(--spw-ds-bo-sidebar-expanded-width);\n }\n\n &--collapsed {\n width: var(--spw-ds-bo-sidebar-width);\n }\n\n &__resize-border {\n display: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 10px;\n height: 100%;\n transform: translateX(50%);\n cursor: col-resize;\n align-items: center;\n justify-content: center;\n background: transparent;\n z-index: 10;\n }\n}\n","import { Component, h, Host, Element, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-sidebar',\n styleUrl: 'spw-sidebar.scss',\n shadow: true,\n})\nexport class SpwSidebar {\n @Element() el!: HTMLElement;\n\n /** Si true, la sidebar est dépliée par défaut */\n @Prop() defaultExpanded: boolean = false;\n\n @State() expanded: boolean;\n @State() hasTopbar: boolean = false;\n\n private readonly BODY_CLASS = 'spw-sidebar-expanded';\n private observer: MutationObserver;\n\n componentWillLoad() {\n this.expanded = this.defaultExpanded;\n if (this.expanded) {\n document.body.classList.add(this.BODY_CLASS);\n }\n\n this.checkTopbarClass();\n this.observeBodyClassChanges();\n }\n\n disconnectedCallback() {\n document.body.classList.remove(this.BODY_CLASS);\n this.observer?.disconnect();\n }\n\n private toggleSidebar = () => {\n this.expanded = !this.expanded;\n document.body.classList.toggle(this.BODY_CLASS, this.expanded);\n };\n\n private checkTopbarClass = () => {\n this.hasTopbar = document.body.classList.contains('has-topbar');\n };\n\n private observeBodyClassChanges() {\n this.observer = new MutationObserver(() => {\n this.checkTopbarClass();\n });\n\n this.observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private get hostClass() {\n return {\n '--expanded': this.expanded,\n '--collapsed': !this.expanded,\n };\n }\n\n private get elementClass() {\n return {\n 'spw-sidebar': true,\n 'spw-sidebar--expanded': this.expanded,\n 'spw-sidebar--collapsed': !this.expanded,\n 'spw-sidebar--with-topbar': this.hasTopbar,\n };\n }\n\n render() {\n return (\n <Host class={this.hostClass}>\n <div class={this.elementClass}>\n <span class=\"spw-sidebar__toggle\" onClick={this.toggleSidebar} aria-expanded={this.expanded.toString()}>\n <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n </span>\n <div class=\"spw-sidebar__content\">\n <slot name=\"navigation-top\"></slot>\n <slot name=\"navigation-bottom\"></slot>\n </div>\n <div class=\"spw-sidebar__resize-border\" onClick={this.toggleSidebar}></div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"spw-sidebar.js","mappings":"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","names":["SpwSidebar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-sidebar/spw-sidebar.scss?tag=spw-sidebar&encapsulation=shadow","src/components/spw-sidebar/spw-sidebar.tsx"],"sourcesContent":[":host {\n display: block;\n height: 100%;\n}\n\n.spw-sidebar {\n height: 100%;\n width: var(--spw-ds-bo-sidebar-width);\n transition: width 0.2s ease;\n display: flex;\n flex-direction: column;\n background: white;\n border-right: 1px solid var(--spw-colors-support-grey-grey-300);\n position: fixed;\n top: 0;\n left: 0;\n\n &--with-topbar {\n top: var(--spw-ds-bo-topbar-height);\n height: calc(100% - var(--spw-ds-bo-topbar-height));\n }\n\n &__toggle {\n position: absolute;\n right: 0;\n top: 67px;\n flex-basis: auto;\n width: 20px;\n padding: 6px 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n box-shadow: var(--spw-effect-elevation-6);\n border: 1px solid var(--spw-colors-support-grey-grey-300);\n cursor: pointer;\n font-size: 13px;\n z-index: 20;\n transform: translateX(50%);\n background: white;\n line-height: 1;\n spw-icon {\n position: relative;\n transition: transform 0.15s 0.2s ease;\n .spw-sidebar--expanded & {\n transform: rotate(180deg);\n }\n }\n }\n\n &__content {\n overflow: hidden;\n flex: 1 1 auto;\n overflow-y: auto;\n padding: 16px 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n @include scrollbars(var(--spw-color-themes-grey-grey-400), var(--spw-ds-white));\n }\n\n &--expanded {\n width: var(--spw-ds-bo-sidebar-expanded-width);\n }\n\n &--collapsed {\n width: var(--spw-ds-bo-sidebar-width);\n }\n\n &__resize-border {\n display: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 10px;\n height: 100%;\n transform: translateX(50%);\n cursor: col-resize;\n align-items: center;\n justify-content: center;\n background: transparent;\n z-index: 10;\n }\n}\n","import { Component, h, Host, Element, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-sidebar',\n styleUrl: 'spw-sidebar.scss',\n shadow: true,\n})\nexport class SpwSidebar {\n @Element() el!: HTMLElement;\n\n /** Si true, la sidebar est dépliée par défaut */\n @Prop() defaultExpanded: boolean = false;\n\n @State() expanded: boolean;\n @State() hasTopbar: boolean = false;\n\n private readonly BODY_CLASS = 'spw-sidebar-expanded';\n private observer: MutationObserver;\n\n componentWillLoad() {\n this.expanded = this.defaultExpanded;\n if (this.expanded) {\n document.body.classList.add(this.BODY_CLASS);\n }\n\n this.checkTopbarClass();\n this.observeBodyClassChanges();\n }\n\n disconnectedCallback() {\n document.body.classList.remove(this.BODY_CLASS);\n this.observer?.disconnect();\n }\n\n private toggleSidebar = () => {\n this.expanded = !this.expanded;\n document.body.classList.toggle(this.BODY_CLASS, this.expanded);\n };\n\n private checkTopbarClass = () => {\n this.hasTopbar = document.body.classList.contains('has-topbar');\n };\n\n private checkExpandedState = () => {\n // Synchronise l'état interne avec la classe body\n const bodyHasExpandedClass = document.body.classList.contains(this.BODY_CLASS);\n if (this.expanded !== bodyHasExpandedClass) {\n this.expanded = bodyHasExpandedClass;\n }\n };\n\n private observeBodyClassChanges() {\n this.observer = new MutationObserver(() => {\n this.checkTopbarClass();\n this.checkExpandedState();\n });\n\n this.observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private get hostClass() {\n return {\n '--expanded': this.expanded,\n '--collapsed': !this.expanded,\n };\n }\n\n private get elementClass() {\n return {\n 'spw-sidebar': true,\n 'spw-sidebar--expanded': this.expanded,\n 'spw-sidebar--collapsed': !this.expanded,\n 'spw-sidebar--with-topbar': this.hasTopbar,\n };\n }\n\n render() {\n return (\n <Host class={this.hostClass}>\n <div class={this.elementClass}>\n <span class=\"spw-sidebar__toggle\" onClick={this.toggleSidebar} aria-expanded={this.expanded.toString()}>\n <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n </span>\n <div class=\"spw-sidebar__content\">\n <slot name=\"navigation-top\"></slot>\n <slot name=\"navigation-bottom\"></slot>\n </div>\n <div class=\"spw-sidebar__resize-border\" onClick={this.toggleSidebar}></div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/spw-skeleton.js CHANGED Viewed

@@ -17,9 +17,11 @@ const SpwSkeleton$1 = /*@__PURE__*/ proxyCustomElement(class SpwSkeleton extends
             const isLast = index === this.blocks - 1;
             const isEven = index % 2 === 1;
             const isOdd = index % 2 === 0;
+            const isOnly = this.blocks === 1;
             return (h("div", { class: {
                     'spw-skeleton__line': true,
-                    'spw-skeleton__line--last': isLast,
+                    'spw-skeleton__line--only': isOnly,
+                    'spw-skeleton__line--last': !isOnly && isLast,
                     'spw-skeleton__line--even': !isLast && isEven,
                     'spw-skeleton__line--odd': !isLast && isOdd,
                 } }));
@@ -48,7 +50,7 @@ const SpwSkeleton$1 = /*@__PURE__*/ proxyCustomElement(class SpwSkeleton extends
         }
     }
     render() {
-        return (h(Host, { key: 'd09d57159d888a28edca9d579ee00fef11871279' }, h("div", { key: '6220d349418650cfb4dd368e692f85aa1b304b36', class: "spw-skeleton" }, this.renderVariant(), h("slot", { key: 'd830f7f5c7ed120e0aab5f81919947a26357fd5e' }))));
+        return (h(Host, { key: 'e7062026d9545a347b6fbcf89d1d34f703e0c283' }, h("div", { key: '1d663e0cd802f50a72186239fcade5e6a808ac76', class: "spw-skeleton" }, this.renderVariant(), h("slot", { key: '8cbd37e477730c2dd41acba2ac56ec66522379eb' }))));
     }
     static get style() { return spwSkeletonCss; }
 }, [1, "spw-skeleton", {

package/dist/components/spw-skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"spw-skeleton.js","mappings":";;AAAA,MAAM,cAAc,GAAG,g6GAAg6G;;MCO16GA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAW,CAAC;;AAGlB,QAAA,IAAO,CAAA,OAAA,GAA4C,OAAO;~~AA4EnE~~;~~IA1ES~~,WAAW,GAAA;AACjB,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;YACtD,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC;AACxC,YAAA,MAAM,MAAM,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC;AAC9B,YAAA,MAAM,KAAK,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC;~~AAE7B~~,YAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,oBAAA,oBAAoB,EAAE,IAAI;AAC1B,oBAAA,0BAA0B,EAAE,MAAM;AAClC,oBAAA,0BAA0B,EAAE,CAAC,MAAM,IAAI,MAAM;AAC7C,oBAAA,yBAAyB,EAAE,CAAC,MAAM,IAAI,KAAK;iBAC5C,EAAA,CACI;AAEX,SAAC,CAAC;;IAGI,UAAU,GAAA;QAChB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,cAAA,EAAA,EAAc,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAiB,CAAA,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAO,CAAA,EAC5C,CAAc,CAAA,cAAA,EAAA,EAAA,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAA,CAAiB,CACpD;;IAIF,aAAa,GAAA;AACnB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAO,CAAA,EAC/C,CAAc,CAAA,cAAA,EAAA,EAAA,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAA,CAAiB,CACpD;;IAIF,iBAAiB,GAAA;AACvB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAA,EACrC,CAAA,CAAA,cAAA,EAAA,EAAc,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAiB,CAAA,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,EAAO,CAAA,EACxC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,GAAO,CACpC,CACF;;IAIF,aAAa,GAAA;AACnB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;AAC1B,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,IAAI,CAAC,aAAa,EAAE;AAC7B,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE;AACjC,YAAA,KAAK,OAAO;AACZ,YAAA;AACE,gBAAA,OAAO,IAAI,CAAC,WAAW,EAAE;;;IAI/B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,aAAa,EAAE,EACrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwSkeleton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-skeleton/spw-skeleton.scss?tag=spw-skeleton&encapsulation=shadow","src/components/spw-skeleton/spw-skeleton.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n%animation {\n background: linear-gradient(90deg, white 0%, var(--spw-color-themes-grey-grey-300) 50%, white 100%);\n background-size: 200% 100%;\n animation: shimmer 5s infinite linear;\n}\n\n.spw-skeleton {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &__line {\n height: 1rem;\n width: 100%;\n border-radius: 4px;\n @extend %animation;\n }\n\n &__line--even {\n width: 85%;\n }\n\n &__line--last {\n width: 50% !important;\n }\n\n &__buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 24px;\n gap: 24px;\n }\n\n &__button {\n width: 200px;\n height: 40px;\n border-radius: 40px;\n @extend %animation;\n }\n\n &__article {\n &-image {\n margin-bottom: 24px;\n border-radius: 8px;\n height: 170px;\n @extend %animation;\n }\n }\n\n &__text {\n &-block {\n margin: 24px 0;\n border-radius: 4px;\n height: 60px;\n @extend %animation;\n }\n }\n}\n\n@keyframes shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-skeleton',\n styleUrl: 'spw-skeleton.scss',\n shadow: true,\n})\nexport class SpwSkeleton {\n /** Nombre de répétitions du skeleton (uniquement valable pour la variante lines) /\n @Prop() blocks: number = 1;\n\n /* Type de skeleton à afficher */\n @Prop() variant: 'lines' \| 'text' \| 'article' \| 'layout' = 'lines';\n\n private renderLines() {\n return Array.from({ length: this.blocks }, (_, index) => {\n const isLast = index === this.blocks - 1;\n const isEven = index % 2 === 1;\n const isOdd = index % 2 === 0;\n\n return (\n <div\n class={{\n 'spw-skeleton__line': true,\n 'spw-skeleton__line--last': isLast,\n 'spw-skeleton__line--even': !isLast && isEven,\n 'spw-skeleton__line--odd': !isLast && isOdd,\n }}\n ></div>\n );\n });\n }\n\n private renderText() {\n return (\n <div class=\"spw-skeleton__text\">\n <spw-skeleton variant=\"lines\" blocks={5}></spw-skeleton>\n <div class=\"spw-skeleton__text-block\"></div>\n <spw-skeleton variant=\"lines\" blocks={2}></spw-skeleton>\n </div>\n );\n }\n\n private renderArticle() {\n return (\n <div class=\"spw-skeleton__article\">\n <div class=\"spw-skeleton__article-image\"></div>\n <spw-skeleton variant=\"lines\" blocks={7}></spw-skeleton>\n </div>\n );\n }\n\n private renderTextButtons() {\n return (\n <div class=\"spw-skeleton__text-buttons\">\n <spw-skeleton variant=\"lines\" blocks={3}></spw-skeleton>\n <div class=\"spw-skeleton__buttons\">\n <div class=\"spw-skeleton__button\"></div>\n <div class=\"spw-skeleton__button\"></div>\n </div>\n </div>\n );\n }\n\n private renderVariant() {\n switch (this.variant) {\n case 'text':\n return this.renderText();\n case 'article':\n return this.renderArticle();\n case 'layout':\n return this.renderTextButtons();\n case 'lines':\n default:\n return this.renderLines();\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"spw-skeleton\">\n {this.renderVariant()}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"spw-skeleton.js","mappings":"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","names":["SpwSkeleton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-skeleton/spw-skeleton.scss?tag=spw-skeleton&encapsulation=shadow","src/components/spw-skeleton/spw-skeleton.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n%animation {\n background: linear-gradient(90deg, white 0%, var(--spw-color-themes-grey-grey-300) 50%, white 100%);\n background-size: 200% 100%;\n animation: shimmer 5s infinite linear;\n}\n\n.spw-skeleton {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &__line {\n height: 1rem;\n width: 100%;\n border-radius: 4px;\n @extend %animation;\n }\n\n &__line--even {\n width: 85%;\n }\n\n &__line--last {\n width: 50% !important;\n }\n\n &__buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 24px;\n gap: 24px;\n }\n\n &__button {\n width: 200px;\n height: 40px;\n border-radius: 40px;\n @extend %animation;\n }\n\n &__article {\n &-image {\n margin-bottom: 24px;\n border-radius: 8px;\n height: 170px;\n @extend %animation;\n }\n }\n\n &__text {\n &-block {\n margin: 24px 0;\n border-radius: 4px;\n height: 60px;\n @extend %animation;\n }\n }\n}\n\n@keyframes shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-skeleton',\n styleUrl: 'spw-skeleton.scss',\n shadow: true,\n})\nexport class SpwSkeleton {\n /** Nombre de répétitions du skeleton (uniquement valable pour la variante lines) /\n @Prop() blocks: number = 1;\n\n /* Type de skeleton à afficher */\n @Prop() variant: 'lines' \| 'text' \| 'article' \| 'layout' = 'lines';\n\n private renderLines() {\n return Array.from({ length: this.blocks }, (_, index) => {\n const isLast = index === this.blocks - 1;\n const isEven = index % 2 === 1;\n const isOdd = index % 2 === 0;\n const isOnly = this.blocks === 1;\n\n return (\n <div\n class={{\n 'spw-skeleton__line': true,\n 'spw-skeleton__line--only': isOnly,\n 'spw-skeleton__line--last': !isOnly && isLast,\n 'spw-skeleton__line--even': !isLast && isEven,\n 'spw-skeleton__line--odd': !isLast && isOdd,\n }}\n ></div>\n );\n });\n }\n\n private renderText() {\n return (\n <div class=\"spw-skeleton__text\">\n <spw-skeleton variant=\"lines\" blocks={5}></spw-skeleton>\n <div class=\"spw-skeleton__text-block\"></div>\n <spw-skeleton variant=\"lines\" blocks={2}></spw-skeleton>\n </div>\n );\n }\n\n private renderArticle() {\n return (\n <div class=\"spw-skeleton__article\">\n <div class=\"spw-skeleton__article-image\"></div>\n <spw-skeleton variant=\"lines\" blocks={7}></spw-skeleton>\n </div>\n );\n }\n\n private renderTextButtons() {\n return (\n <div class=\"spw-skeleton__text-buttons\">\n <spw-skeleton variant=\"lines\" blocks={3}></spw-skeleton>\n <div class=\"spw-skeleton__buttons\">\n <div class=\"spw-skeleton__button\"></div>\n <div class=\"spw-skeleton__button\"></div>\n </div>\n </div>\n );\n }\n\n private renderVariant() {\n switch (this.variant) {\n case 'text':\n return this.renderText();\n case 'article':\n return this.renderArticle();\n case 'layout':\n return this.renderTextButtons();\n case 'lines':\n default:\n return this.renderLines();\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"spw-skeleton\">\n {this.renderVariant()}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/spw-socials.js CHANGED Viewed

@@ -11,7 +11,7 @@ const SpwSocials$1 = /*@__PURE__*/ proxyCustomElement(class SpwSocials extends H
         this.mainTitle = 'Restez connecté';
     }
     render() {
-        return (h(Host, { key: 'd2c120f651461ddbe1115d8e848b610132d3a287' }, h("div", { key: '200fabf8d9086a1686c5d296f7d456f46622cb27', class: "spw-socials" }, h("div", { key: '5e038715b91cdf5813b3c72d5d1f987ed06a6609', class: "spw-ds-container" }, h("h2", { key: '4d3fc6a5266625ad177c863b49318f89a3d3147f', class: "spw-socials__title" }, this.mainTitle), h("div", { key: '2d86cbd2650709d0d56df013fda5b02fa7e929ef', class: "spw-socials__content" }, h("slot", { key: '1d911bbdf0cd21be24ed7189e7bd0a544032148d' }))))));
+        return (h(Host, { key: 'cc2f013bf881c62e70cf8cb91510a5365a633c5c' }, h("div", { key: 'c5f6d4e900ffb335ed9f42ae079faae0a32d19d3', class: "spw-socials" }, h("div", { key: '736f58dbacfceb1e9496649419387f30b004e0ec', class: "spw-ds-container" }, h("h2", { key: 'b0f6cef192dc8bcd3341ec77e175b8c65af212a9', class: "spw-socials__title" }, this.mainTitle), h("div", { key: '50f458edcbd2b916b2af17f44183da7f51b85814', class: "spw-socials__content" }, h("slot", { key: 'bb7295144384b95b711ac790b2d6d4acd6bac1cb' }))))));
     }
     static get style() { return spwSocialsCss; }
 }, [1, "spw-socials", {

package/dist/components/spw-table-body.js CHANGED Viewed

@@ -29,7 +29,7 @@ const SpwTableBody$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableBody exten
         });
     }
     render() {
-        return (h("tbody", { key: '754040d04173dc5c19de98b2cb403de47eef74d5', part: "tbody" }, h("slot", { key: '03a71f3b518d53314d9e3315b3104be49be0ae01' })));
+        return (h("tbody", { key: '330fbfaa3436450e51a3840a1085414c81bba9bc', part: "tbody" }, h("slot", { key: 'd999d2e59c274e494d7d2aaa4ba83bfabda82395' })));
     }
     get el() { return this; }
     static get style() { return spwTableBodyCss; }

package/dist/components/spw-table-cell.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './index.js';
-const spwTableCellCss = "/*! 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: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-table-cell{border:1px solid var(--spw-color-themes-grey-grey-300);border-top:0;color:var(--spw-color-themes-grey-grey-800);font-size:14px;text-align:left}.spw-table-cell--is-highlighted{background:var(--spw-color-themes-grey-grey-100);font-weight:700}.spw-table-cell--text-align-left{text-align:left}.spw-table-cell--text-align-center{text-align:center}.spw-table-cell--text-align-right{text-align:right}.spw-table-cell--vertical-align-top{vertical-align:top}.spw-table-cell--vertical-align-bottom{vertical-align:bottom}.spw-table-cell--vertical-align-middle{vertical-align:middle}.spw-table-cell--padding-small{padding:8px}.spw-table-cell--padding-medium{padding:16px}.spw-table-cell ::slotted(spw-checkbox){--spw-ds-checkbox-checked-color:#000}";
+const spwTableCellCss = "/*! 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: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)}}:host(.--selected) .spw-table-cell{background-color:var(--spw-color-themes-blue-blue-50)}:host(.--selected) .spw-table-cell.spw-table-cell--first-in-row{box-shadow:inset 3px 0 0 var(--spw-color-themes-blue-blue-500)}:host(.--disabled) .spw-table-cell,:host(.--disabled) .spw-table-cell--sticky{position:relative}:host(.--disabled) .spw-table-cell--sticky:before,:host(.--disabled) .spw-table-cell:before{background:var(--spw-ds-white);bottom:1px;content:\"\";cursor:not-allowed;left:0;opacity:.7;position:absolute;right:0;top:0;z-index:8}.spw-table-cell{border:1px solid var(--spw-color-themes-grey-grey-300);border-top:0;color:var(--spw-color-themes-grey-grey-800);font-size:14px;text-align:left}.spw-table-cell--is-highlighted{background:var(--spw-color-themes-grey-grey-100);font-weight:700}.spw-table-cell--text-align-left{text-align:left}.spw-table-cell--text-align-center{text-align:center}.spw-table-cell--text-align-right{text-align:right}.spw-table-cell--vertical-align-top{vertical-align:top}.spw-table-cell--vertical-align-bottom{vertical-align:bottom}.spw-table-cell--vertical-align-middle{vertical-align:middle}.spw-table-cell--padding-small{padding:8px}.spw-table-cell--padding-medium{padding:16px}.spw-table-cell--disabled{cursor:not-allowed;opacity:.3;pointer-events:none}.spw-table-cell--selected{background-color:var(--spw-color-themes-blue-blue-50)}.spw-table-cell--selected.spw-table-cell--first-in-row{box-shadow:inset 3px 0 0 var(--spw-color-themes-blue-blue-500)}.spw-table-cell ::slotted(spw-checkbox){--spw-ds-checkbox-checked-color:#000}.spw-table-cell--sticky{background-color:var(--spw-color-themes-grey-grey-50);position:sticky}.spw-table-cell--sticky:after{bottom:-1px;content:\"\";pointer-events:none;position:absolute;top:0;transition:opacity .2s;width:8px}.spw-table-cell--sticky-start:after{box-shadow:inset 8px 0 8px -8px rgba(0,0,0,.15);right:-8px}.spw-table-cell--sticky-end:after{box-shadow:inset -8px 0 8px -8px rgba(0,0,0,.15);left:-8px}.spw-table-cell--sticky.spw-table-cell--selected{background-color:var(--spw-color-themes-blue-blue-50)}.spw-table-cell--sticky.spw-table-cell--is-highlighted{background-color:var(--spw-color-themes-grey-grey-100)}:host(.--selected) .spw-table-cell--sticky{background-color:var(--spw-color-themes-blue-blue-50)}";
 const SpwTableCell$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableCell extends H {
     constructor() {
@@ -17,6 +17,39 @@ const SpwTableCell$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableCell exten
         this.width = 'auto';
         /** Définit le padding pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */
         this.padding = 'medium';
+        /** Permet de changer le state du spw-table-cell  */
+        this.state = 'default';
+        /** Rend la cellule sticky lors du défilement (à appliquer sur spw-table-header ou spw-table-cell) */
+        this.sticky = false;
+        /** Position du sticky : 'start' (left: 0) ou 'end' (right: 0) (à appliquer sur spw-table-header ou spw-table-cell) */
+        this.stickyPosition = 'start';
+        /** Décalage en pixels pour le sticky (utile pour empiler plusieurs colonnes sticky) (à appliquer sur spw-table-header ou spw-table-cell) */
+        this.stickyOffset = 0;
+        this.isFirst = false;
+    }
+    componentDidLoad() {
+        this.checkIfFirst();
+        this.observeRowSlot();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.slotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    checkIfFirst() {
+        const parentRow = this.el.closest('spw-table-row');
+        if (!parentRow) {
+            this.isFirst = false;
+            return;
+        }
+        const cells = Array.from(parentRow.children).filter((el) => el.tagName === 'SPW-TABLE-CELL' || el.tagName === 'SPW-TABLE-HEADER' || el.tagName === 'TD' || el.tagName === 'TH');
+        this.isFirst = cells[0] === this.el;
+    }
+    observeRowSlot() {
+        const parentRow = this.el.closest('spw-table-row');
+        if (!parentRow)
+            return;
+        this.slotObserver = new MutationObserver(() => this.checkIfFirst());
+        this.slotObserver.observe(parentRow, { childList: true, subtree: false });
     }
     get elementClass() {
         return {
@@ -25,6 +58,10 @@ const SpwTableCell$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableCell exten
             [`spw-table-cell--text-align-${this.textAlign}`]: true,
             [`spw-table-cell--padding-${this.padding}`]: true,
             [`spw-table-cell--vertical-align-${this.verticalAlign}`]: true,
+            [`spw-table-cell--${this.state}`]: true,
+            'spw-table-cell--first-in-row': this.isFirst,
+            'spw-table-cell--sticky': this.sticky,
+            [`spw-table-cell--sticky-${this.stickyPosition}`]: this.sticky,
         };
     }
     render() {
@@ -39,8 +76,22 @@ const SpwTableCell$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableCell exten
             attrs.rowSpan = this.rowspan;
         if (this.headers !== undefined)
             attrs.headers = this.headers;
-        return (h("td", Object.assign({ key: '90b5ba037780b40461e2fbfff278fa3e46d4fa79' }, attrs), h("slot", { key: '6e8d211652ff81ec279445597e0d20e9bd783857' })));
+        if (this.sticky) {
+            const stickyStyles = {
+                position: 'sticky',
+                zIndex: '10',
+            };
+            if (this.stickyPosition === 'start') {
+                stickyStyles.left = `${this.stickyOffset}px`;
+            }
+            else {
+                stickyStyles.right = `${this.stickyOffset}px`;
+            }
+            attrs.style = stickyStyles;
+        }
+        return (h("td", Object.assign({ key: '27bf04742118714d6b54e104929909a392d1995c' }, attrs), h("slot", { key: '8c3ba8fd30c331af629cd030c93047f9931829e3' })));
     }
+    get el() { return this; }
     static get style() { return spwTableCellCss; }
 }, [1, "spw-table-cell", {
         "colspan": [2],
@@ -50,7 +101,12 @@ const SpwTableCell$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableCell exten
         "textAlign": [1, "text-align"],
         "verticalAlign": [1, "vertical-align"],
         "width": [1],
-        "padding": [1]
+        "padding": [1],
+        "state": [1],
+        "sticky": [4],
+        "stickyPosition": [1, "sticky-position"],
+        "stickyOffset": [2, "sticky-offset"],
+        "isFirst": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/spw-table-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"spw-table-cell.js","mappings":";;AAAA,MAAM,eAAe,GAAG,8zGAA8zG;;MCOz0GA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;;AAaU,QAAA,IAAa,CAAA,aAAA,GAAa,KAAK;;AAE/B,QAAA,IAAS,CAAA,SAAA,GAAiC,MAAM;;AAEhD,QAAA,IAAa,CAAA,aAAA,GAAiC,QAAQ;;AAEtD,QAAA,IAAK,CAAA,KAAA,GAAY,MAAM;;AAEvB,QAAA,IAAO,CAAA,OAAA,GAAwB,QAAQ;AA6BhD;AA3BC,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,gBAAgB,EAAE,IAAI;YACtB,gCAAgC,EAAE,IAAI,CAAC,aAAa;AACpD,YAAA,CAAC,8BAA8B,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;AACtD,YAAA,CAAC,2BAA2B,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjD,YAAA,CAAC,kCAAkC,IAAI,CAAC,aAAa,CAAE,CAAA,GAAG,IAAI;SAC/D;;IAGH,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAA2B;YACpC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,YAAY;AACxB,YAAA,IAAI,EAAE,MAAM;SACb;AAED,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;AAAE,YAAA,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;AAC5D,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;AAAE,YAAA,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;AAC5D,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;AAAE,YAAA,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;AAE5D,QAAA,QACE,2EAAQ,KAAK,CAAA,EACX,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwTableCell","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-table/spw-table-cell/spw-table-cell.scss?tag=spw-table-cell&encapsulation=shadow","src/components/spw-table/spw-table-cell/spw-table-cell.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.spw-table-cell {\n border: 1px solid var(--spw-color-themes-grey-grey-300);\n color: var(--spw-color-themes-grey-grey-800);\n font-size: 14px;\n text-align: left;\n border-top: 0;\n &--is-highlighted {\n font-weight: 700;\n background: var(--spw-color-themes-grey-grey-100);\n }\n &--text-align-left {\n text-align: left;\n }\n &--text-align-center {\n text-align: center;\n }\n &--text-align-right {\n text-align: right;\n }\n &--vertical-align-top {\n vertical-align: top;\n }\n &--vertical-align-bottom {\n vertical-align: bottom;\n }\n &--vertical-align-middle {\n vertical-align: middle;\n }\n &--padding-small {\n padding: 8px;\n }\n &--padding-medium {\n padding: 16px;\n }\n ::slotted(spw-checkbox) {\n --spw-ds-checkbox-checked-color: #000;\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-table-cell',\n styleUrl: 'spw-table-cell.scss',\n shadow: true,\n})\nexport class SpwTableCell {\n /** Définit un colspan pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() colspan?: HTMLTableCellElement['colSpan'];\n /* Définit un header relationnel pour la cellule, à des fins d'accessibilité (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() headers?: HTMLTableCellElement['headers'];\n /* Définit un rowspan pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() rowspan?: HTMLTableCellElement['rowSpan'];\n /* Définit un style visuel qui met en avant la cellule (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() isHighlighted?: boolean = false;\n /* Définit un alignement de texte pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() textAlign?: 'center' \| 'left' \| 'right' = 'left';\n /* Définit un alignement vertical pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() verticalAlign?: 'top' \| 'bottom' \| 'middle' = 'middle';\n /* Définit une largeur si nécessaire (à appliquer sur spw-table-cell) /\n @Prop() width?: string = 'auto';\n /* Définit le padding pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */\n @Prop() padding?: 'small' \| 'medium' = 'medium';\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-table-cell': true,\n 'spw-table-cell--is-highlighted': this.isHighlighted,\n [`spw-table-cell--text-align-${this.textAlign}`]: true,\n [`spw-table-cell--padding-${this.padding}`]: true,\n [`spw-table-cell--vertical-align-${this.verticalAlign}`]: true,\n };\n }\n\n render() {\n const attrs: { [key: string]: any } = {\n width: this.width,\n class: this.elementClass,\n part: 'cell',\n };\n\n if (this.colspan !== undefined) attrs.colSpan = this.colspan;\n if (this.rowspan !== undefined) attrs.rowSpan = this.rowspan;\n if (this.headers !== undefined) attrs.headers = this.headers;\n\n return (\n <td {...attrs}>\n <slot />\n </td>\n );\n }\n}\n"],"version":3}
1	+ {"file":"spw-table-cell.js","mappings":"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","names":["SpwTableCell","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-table/spw-table-cell/spw-table-cell.scss?tag=spw-table-cell&encapsulation=shadow","src/components/spw-table/spw-table-cell/spw-table-cell.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n:host(.--selected) {\n .spw-table-cell {\n background-color: var(--spw-color-themes-blue-blue-50);\n &.spw-table-cell--first-in-row {\n box-shadow: inset 3px 0 0 var(--spw-color-themes-blue-blue-500);\n }\n }\n}\n\n%disabled {\n position: relative;\n &:before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 1px;\n left: 0;\n right: 0;\n background: var(--spw-ds-white);\n opacity: 0.7;\n cursor: not-allowed;\n z-index: 8;\n }\n}\n\n:host(.--disabled) {\n .spw-table-cell {\n @extend %disabled;\n }\n}\n\n.spw-table-cell {\n border: 1px solid var(--spw-color-themes-grey-grey-300);\n color: var(--spw-color-themes-grey-grey-800);\n font-size: 14px;\n text-align: left;\n border-top: 0;\n &--is-highlighted {\n font-weight: 700;\n background: var(--spw-color-themes-grey-grey-100);\n }\n &--text-align-left {\n text-align: left;\n }\n &--text-align-center {\n text-align: center;\n }\n &--text-align-right {\n text-align: right;\n }\n &--vertical-align-top {\n vertical-align: top;\n }\n &--vertical-align-bottom {\n vertical-align: bottom;\n }\n &--vertical-align-middle {\n vertical-align: middle;\n }\n &--padding-small {\n padding: 8px;\n }\n &--padding-medium {\n padding: 16px;\n }\n &--disabled {\n opacity: 0.3;\n pointer-events: none;\n cursor: not-allowed;\n }\n &--selected {\n background-color: var(--spw-color-themes-blue-blue-50);\n &.spw-table-cell--first-in-row {\n box-shadow: inset 3px 0 0 var(--spw-color-themes-blue-blue-500);\n }\n }\n ::slotted(spw-checkbox) {\n --spw-ds-checkbox-checked-color: #000;\n }\n\n &--sticky {\n position: sticky;\n background-color: var(--spw-color-themes-grey-grey-50);\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: -1px;\n width: 8px;\n pointer-events: none;\n transition: opacity 0.2s;\n }\n\n &-start::after {\n right: -8px;\n box-shadow: inset 8px 0 8px -8px rgba(0, 0, 0, 0.15);\n }\n\n &-end::after {\n left: -8px;\n box-shadow: inset -8px 0 8px -8px rgba(0, 0, 0, 0.15);\n }\n\n &.spw-table-cell--selected {\n background-color: var(--spw-color-themes-blue-blue-50);\n }\n\n &.spw-table-cell--is-highlighted {\n background-color: var(--spw-color-themes-grey-grey-100);\n }\n\n :host(.--selected) & {\n background-color: var(--spw-color-themes-blue-blue-50);\n }\n\n :host(.--disabled) & {\n @extend %disabled;\n }\n }\n}\n","import { Component, Element, State, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-table-cell',\n styleUrl: 'spw-table-cell.scss',\n shadow: true,\n})\nexport class SpwTableCell {\n @Element() el: HTMLElement;\n /** Définit un colspan pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() colspan?: HTMLTableCellElement['colSpan'];\n /* Définit un header relationnel pour la cellule, à des fins d'accessibilité (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() headers?: HTMLTableCellElement['headers'];\n /* Définit un rowspan pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() rowspan?: HTMLTableCellElement['rowSpan'];\n /* Définit un style visuel qui met en avant la cellule (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() isHighlighted?: boolean = false;\n /* Définit un alignement de texte pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() textAlign?: 'center' \| 'left' \| 'right' = 'left';\n /* Définit un alignement vertical pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() verticalAlign?: 'top' \| 'bottom' \| 'middle' = 'middle';\n /* Définit une largeur si nécessaire (à appliquer sur spw-table-cell) /\n @Prop() width?: string = 'auto';\n /* Définit le padding pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) /\n @Prop() padding?: 'small' \| 'medium' = 'medium';\n /* Permet de changer le state du spw-table-cell /\n @Prop() state?: 'default' \| 'selected' \| 'disabled' = 'default';\n /* Rend la cellule sticky lors du défilement (à appliquer sur spw-table-header ou spw-table-cell) /\n @Prop() sticky?: boolean = false;\n /* Position du sticky : 'start' (left: 0) ou 'end' (right: 0) (à appliquer sur spw-table-header ou spw-table-cell) /\n @Prop() stickyPosition?: 'start' \| 'end' = 'start';\n /* Décalage en pixels pour le sticky (utile pour empiler plusieurs colonnes sticky) (à appliquer sur spw-table-header ou spw-table-cell) */\n @Prop() stickyOffset?: number = 0;\n\n @State() isFirst: boolean = false;\n\n private slotObserver?: MutationObserver;\n\n componentDidLoad() {\n this.checkIfFirst();\n this.observeRowSlot();\n }\n\n disconnectedCallback() {\n this.slotObserver?.disconnect();\n }\n\n private checkIfFirst() {\n const parentRow = this.el.closest('spw-table-row');\n if (!parentRow) {\n this.isFirst = false;\n return;\n }\n const cells = Array.from(parentRow.children).filter(\n (el: Element) => el.tagName === 'SPW-TABLE-CELL' \|\| el.tagName === 'SPW-TABLE-HEADER' \|\| el.tagName === 'TD' \|\| el.tagName === 'TH',\n );\n this.isFirst = cells[0] === this.el;\n }\n\n private observeRowSlot() {\n const parentRow = this.el.closest('spw-table-row');\n if (!parentRow) return;\n this.slotObserver = new MutationObserver(() => this.checkIfFirst());\n this.slotObserver.observe(parentRow, { childList: true, subtree: false });\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-table-cell': true,\n 'spw-table-cell--is-highlighted': this.isHighlighted,\n [`spw-table-cell--text-align-${this.textAlign}`]: true,\n [`spw-table-cell--padding-${this.padding}`]: true,\n [`spw-table-cell--vertical-align-${this.verticalAlign}`]: true,\n [`spw-table-cell--${this.state}`]: true,\n 'spw-table-cell--first-in-row': this.isFirst,\n 'spw-table-cell--sticky': this.sticky,\n [`spw-table-cell--sticky-${this.stickyPosition}`]: this.sticky,\n };\n }\n\n render() {\n const attrs: { [key: string]: any } = {\n width: this.width,\n class: this.elementClass,\n part: 'cell',\n };\n\n if (this.colspan !== undefined) attrs.colSpan = this.colspan;\n if (this.rowspan !== undefined) attrs.rowSpan = this.rowspan;\n if (this.headers !== undefined) attrs.headers = this.headers;\n\n if (this.sticky) {\n const stickyStyles: { [key: string]: string } = {\n position: 'sticky',\n zIndex: '10',\n };\n\n if (this.stickyPosition === 'start') {\n stickyStyles.left = `${this.stickyOffset}px`;\n } else {\n stickyStyles.right = `${this.stickyOffset}px`;\n }\n\n attrs.style = stickyStyles;\n }\n\n return (\n <td {...attrs}>\n <slot />\n </td>\n );\n }\n}\n"],"version":3}

package/dist/components/spw-table-footer.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './index.js';
-const spwTableFooterCss = "/*! 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: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-table-footer{align-items:center;caption-side:bottom;color:var(--spw-color-themes-grey-grey-900);display:flex;font-size:14px;gap:16px;justify-content:space-between;padding:16px 24px}.spw-table-footer ::slotted([slot=right]){align-items:center;display:inline-flex;gap:8px}";
+const spwTableFooterCss = "/*! 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: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)}}:host(.--is-sticky) caption{bottom:0;position:sticky;z-index:20}caption{background:var(--spw-ds-white);border:1px solid var(--spw-color-themes-grey-grey-300)}.spw-table-footer{align-items:center;caption-side:bottom;color:var(--spw-color-themes-grey-grey-900);display:flex;font-size:14px;gap:16px;justify-content:space-between;padding:16px 24px}.spw-table-footer ::slotted([slot=right]){align-items:center;display:inline-flex;gap:8px}";
 const SpwTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableFooter extends H {
     constructor() {
@@ -9,7 +9,7 @@ const SpwTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableFooter e
         this.__attachShadow();
     }
     render() {
-        return (h("caption", { key: '371360f1cabe50b249ae97f7ef41c0e986911210', part: "tfoot", style: { captionSide: 'bottom' } }, h("div", { key: 'ff27c3dc299a24afe1e151d3de68ef8b0d71f1b3', class: "spw-table-footer" }, h("slot", { key: '857eaeb3f06c1423e6054a1106b62802668d63f9', name: "left" }), h("slot", { key: '903b67687303e5e10afeab79a08f685d70c9730e', name: "center" }), h("slot", { key: 'db93cf7d801589a9c4bf471257d5f12334c73332', name: "right" }))));
+        return (h("caption", { key: 'b3a44bdef9702153da340157aa91c915a2a500c3', part: "tfoot", style: { captionSide: 'bottom' } }, h("div", { key: 'a4243321891d910e9facca40ff68828a140af354', class: "spw-table-footer" }, h("slot", { key: '1f5ff5b35f7032674c1e5b1486e4457415ea60b3', name: "left" }), h("slot", { key: '1299dec5aacd636c36325085a7753b87ef4f0a4b', name: "center" }), h("slot", { key: 'edfe9a8832c3d869ab0c1ce6c3636069579a8487', name: "right" }))));
     }
     static get style() { return spwTableFooterCss; }
 }, [1, "spw-table-footer"]);

package/dist/components/spw-table-footer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"spw-table-footer.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,~~k2FAAk2F~~;;~~MCO/2FA~~,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;IACzB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAA,EACpD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,EACpB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACE;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwTableFooter","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-table/spw-table-footer/spw-table-footer.scss?tag=spw-table-footer&encapsulation=shadow","src/components/spw-table/spw-table-footer/spw-table-footer.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.spw-table-footer {\n padding: 16px 24px;\n caption-side: bottom;\n font-size: 14px;\n color: var(--spw-color-themes-grey-grey-900);\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n ::slotted([slot='right']) {\n display: inline-flex;\n gap: 8px;\n align-items: center;\n }\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-table-footer',\n styleUrl: 'spw-table-footer.scss',\n shadow: true,\n})\nexport class SpwTableFooter {\n render() {\n return (\n <caption part=\"tfoot\" style={{ captionSide: 'bottom' }}>\n <div class=\"spw-table-footer\">\n <slot name=\"left\" />\n <slot name=\"center\" />\n <slot name=\"right\" />\n </div>\n </caption>\n );\n }\n}\n"],"version":3}
1	+ {"file":"spw-table-footer.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,ggGAAggG;;MCO7gGA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;IACzB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAA,EACpD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,EACpB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACE;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwTableFooter","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-table/spw-table-footer/spw-table-footer.scss?tag=spw-table-footer&encapsulation=shadow","src/components/spw-table/spw-table-footer/spw-table-footer.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n:host(.--is-sticky) {\n caption {\n position: sticky;\n bottom: 0;\n z-index: 20;\n }\n}\n\ncaption {\n background: var(--spw-ds-white);\n border: 1px solid var(--spw-color-themes-grey-grey-300);\n}\n\n.spw-table-footer {\n padding: 16px 24px;\n caption-side: bottom;\n font-size: 14px;\n color: var(--spw-color-themes-grey-grey-900);\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n ::slotted([slot='right']) {\n display: inline-flex;\n gap: 8px;\n align-items: center;\n }\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-table-footer',\n styleUrl: 'spw-table-footer.scss',\n shadow: true,\n})\nexport class SpwTableFooter {\n render() {\n return (\n <caption part=\"tfoot\" style={{ captionSide: 'bottom' }}>\n <div class=\"spw-table-footer\">\n <slot name=\"left\" />\n <slot name=\"center\" />\n <slot name=\"right\" />\n </div>\n </caption>\n );\n }\n}\n"],"version":3}

package/dist/components/spw-table-head.js CHANGED Viewed

@@ -9,7 +9,7 @@ const SpwTableHead$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableHead exten
         this.__attachShadow();
     }
     render() {
-        return (h("thead", { key: '7fd39cbc3b58714346445724888d74a323439236', part: "thead" }, h("slot", { key: '6757983499e293fc47b1a6b216ecac27181b74ab' })));
+        return (h("thead", { key: 'ef413eb59ea3530b9d4476723b6179d04bdf8c7f', part: "thead" }, h("slot", { key: '4822f9a5d94d983d5497d34da66211b4b9e1fc35' })));
     }
     static get style() { return spwTableHeadCss; }
 }, [1, "spw-table-head"]);

package/dist/components/spw-table-header.js CHANGED Viewed

@@ -1,15 +1,15 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { d as defineCustomElement$3 } from './p-_q4w18VU.js';
-import { d as defineCustomElement$2 } from './p-BDRCqK1w.js';
+import { d as defineCustomElement$2 } from './p-J5AA2xQI.js';
-const spwTableHeaderCss = "/*! 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: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-table-header{background:var(--spw-color-themes-grey-grey-200);background-clip:padding-box;border:1px solid var(--spw-color-themes-grey-grey-300);border-bottom:none!important;border-top:none!important;box-shadow:inset 0 1px 0 var(--spw-color-themes-grey-grey-300),inset 0 -1px 0 var(--spw-color-themes-grey-grey-300);color:var(--spw-color-themes-grey-grey-800);font-size:14px;font-weight:700;text-align:left;transition:all .2s linear;white-space:nowrap}:host-context(.spw-table--is-sticky) .spw-table-header{position:sticky;top:0;z-index:20}.spw-table-header--text-align-left{text-align:left}.spw-table-header--text-align-center{text-align:center}.spw-table-header--text-align-right{text-align:right}.spw-table-header--vertical-align-top{vertical-align:top}.spw-table-header--vertical-align-bottom{vertical-align:bottom}.spw-table-header--vertical-align-middle{vertical-align:middle}.spw-table-header--has-tooltip .spw-table-header__content{align-items:center;display:flex;gap:16px;justify-content:space-between}.spw-table-header--has-tooltip .spw-table-header__content spw-icon{color:var(--spw-color-themes-grey-grey-500)}.spw-table-header--has-tooltip .spw-table-header__content spw-icon:hover{color:var(--spw-color-themes-grey-grey-900)}.spw-table-header--sortable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.spw-table-header--sortable:hover{background:var(--spw-color-themes-grey-grey-300)}.spw-table-header--sortable .spw-table-header__content{align-items:center;display:flex;gap:16px;justify-content:space-between}.spw-table-header--sortable .spw-table-header__content spw-icon{color:var(--spw-color-themes-grey-grey-500)}.spw-table-header--sortable .spw-table-header__content spw-icon:hover,.spw-table-header--sortable .spw-table-header__content--is-sorted .spw-table-header__sort-icon{color:var(--spw-color-themes-grey-grey-900)}.spw-table-header__sort-icons{display:flex;gap:0}.spw-table-header--padding-small{padding:8px}.spw-table-header--padding-medium{padding:16px}.spw-table-header__icons{align-items:center;color:var(--spw-color-themes-grey-grey-500);display:flex;gap:8px}.spw-table-header ::slotted(spw-checkbox){--spw-ds-checkbox-checked-color:#000}";
+const spwTableHeaderCss = "/*! 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: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)}}:host(.--is-sticky) .spw-table-header{position:sticky;top:0;z-index:50}.spw-table-header{background:var(--spw-color-themes-grey-grey-200);background-clip:padding-box;border:1px solid var(--spw-color-themes-grey-grey-300);border-bottom:none!important;border-top:none!important;box-shadow:inset 0 1px 0 var(--spw-color-themes-grey-grey-300),inset 0 -1px 0 var(--spw-color-themes-grey-grey-300);color:var(--spw-color-themes-grey-grey-800);font-size:14px;font-weight:700;text-align:left;transition:all .2s linear;white-space:nowrap}.spw-table-header--text-align-left{text-align:left}.spw-table-header--text-align-center{text-align:center}.spw-table-header--text-align-right{text-align:right}.spw-table-header--vertical-align-top{vertical-align:top}.spw-table-header--vertical-align-bottom{vertical-align:bottom}.spw-table-header--vertical-align-middle{vertical-align:middle}.spw-table-header--has-tooltip .spw-table-header__content{align-items:center;display:flex;gap:16px;justify-content:space-between}.spw-table-header--has-tooltip .spw-table-header__content spw-icon{color:var(--spw-color-themes-grey-grey-500)}.spw-table-header--has-tooltip .spw-table-header__content spw-icon:hover{color:var(--spw-color-themes-grey-grey-900)}.spw-table-header--sortable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.spw-table-header--sortable:hover{background:var(--spw-color-themes-grey-grey-300)}.spw-table-header--sortable .spw-table-header__content{align-items:center;display:flex;gap:16px;justify-content:space-between}.spw-table-header--sortable .spw-table-header__content spw-icon{color:var(--spw-color-themes-grey-grey-500)}.spw-table-header--sortable .spw-table-header__content spw-icon:hover,.spw-table-header--sortable .spw-table-header__content--is-sorted .spw-table-header__sort-icon{color:var(--spw-color-themes-grey-grey-900)}.spw-table-header__sort-icons{display:flex;gap:0}.spw-table-header--padding-small{padding:8px}.spw-table-header--padding-medium{padding:16px}.spw-table-header__icons{align-items:center;color:var(--spw-color-themes-grey-grey-500);display:flex;gap:8px}.spw-table-header ::slotted(spw-checkbox){--spw-ds-checkbox-checked-color:#000}.spw-table-header--sticky{background-color:var(--spw-color-themes-grey-grey-200);position:sticky}.spw-table-header--sticky:after{bottom:-1px;content:\"\";pointer-events:none;position:absolute;top:0;transition:opacity .2s;width:8px}.spw-table-header--sticky-start:after{box-shadow:inset 8px 0 8px -8px rgba(0,0,0,.15);right:-8px}.spw-table-header--sticky-end:after{box-shadow:inset -8px 0 8px -8px rgba(0,0,0,.15);left:-8px}";
 const SpwTableHeader$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableHeader extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.spwHeaderClick = createEvent(this, "spwHeaderClick");
+        this.spwHeaderClick = createEvent(this, "spwHeaderClick", 7);
         /** Définit un style visuel qui met en avant la cellule (à appliquer sur spw-table-cell ou spw-table-header) */
         this.isHighlighted = false;
         /** Définit un alignement de texte pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */
@@ -22,6 +22,12 @@ const SpwTableHeader$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableHeader e
         this.sortable = false;
         /** Définit si la colonne est triée ou non (à appliquer sur spw-table-header) */
         this.isSorted = false;
+        /** Rend la cellule sticky lors du défilement horizontal  (à appliquer sur spw-table-header ou spw-table-cell) */
+        this.sticky = false;
+        /** Position du sticky : 'start' (left: 0) ou 'end' (right: 0)  (à appliquer sur spw-table-header ou spw-table-cell) */
+        this.stickyPosition = 'start';
+        /** Décalage en pixels pour le sticky (utile pour empiler plusieurs colonnes sticky)  (à appliquer sur spw-table-header ou spw-table-cell) */
+        this.stickyOffset = 0;
         this.handleClick = (event) => {
             if (event.target.closest('[slot="filters"]')) {
                 event.stopPropagation();
@@ -41,13 +47,37 @@ const SpwTableHeader$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableHeader e
             [`spw-table-header--padding-${this.padding}`]: true,
             [`spw-table-header--text-align-${this.textAlign}`]: true,
             [`spw-table-header--vertical-align-${this.verticalAlign}`]: true,
+            'spw-table-header--sticky': this.sticky,
+            [`spw-table-header--sticky-${this.stickyPosition}`]: this.sticky,
         };
     }
     render() {
-        return (h("th", { key: '1dbe8334cf875abe22dfd92d43a5e0e0f2b7d474', "aria-sort": this.isSorted ? this.sortDirection : 'none', onClick: this.handleClick, class: this.elementClass, colSpan: this.colspan, headers: this.headers, part: "cell", rowSpan: this.rowspan }, h("div", { key: 'afd24d691ef3cfdcd12c39d272ac55dc52cdb798', class: {
+        const attrs = {
+            'aria-sort': this.isSorted ? this.sortDirection : 'none',
+            'onClick': this.handleClick,
+            'class': this.elementClass,
+            'colSpan': this.colspan,
+            'headers': this.headers,
+            'part': 'cell',
+            'rowSpan': this.rowspan,
+        };
+        if (this.sticky) {
+            const stickyStyles = {
+                position: 'sticky',
+                zIndex: '60',
+            };
+            if (this.stickyPosition === 'start') {
+                stickyStyles.left = `${this.stickyOffset}px`;
+            }
+            else {
+                stickyStyles.right = `${this.stickyOffset}px`;
+            }
+            attrs.style = stickyStyles;
+        }
+        return (h("th", Object.assign({ key: '72a54f9eb43f87e80da3bfe45a6eb848cf11e09f' }, attrs), h("div", { key: '06111c36e9fa869e263dfb1bc64fa023acf42538', class: {
                 'spw-table-header__content': true,
                 'spw-table-header__content--is-sorted': this.isSorted,
-            } }, h("slot", { key: '4092fc819995890db5c8eaecab65113126d03e13' }), h("div", { key: '9794980e48fb08fd415cdac3a8ebbb6734495a31', class: "spw-table-header__icons" }, h("slot", { key: '85407114daf3b3d09711f2c24a9506f5586d7b2a', name: "filters" }), (this.tooltipTitle || this.tooltipText) && (h("spw-tooltip", { key: 'de9654bf47a72d82a3ed3d54b016802f663e6918', "tooltip-title": this.tooltipTitle, "tooltip-text": this.tooltipText }, h("spw-icon", { key: 'eaa5ddbb83edb6efbaaecdfb2844a5f9d4cd7368', variant: "fa-regular", icon: "fa-circle-question" }))), this.sortable && (h("spw-icon", { key: '8518bc0342af2e0d8845dc54c2de49f8b6ca5b38', class: "spw-table-header__sort-icon", icon: this.isSorted ? (this.sortDirection === 'asc' ? 'fa-arrow-up-short-wide' : 'fa-arrow-down-wide-short') : 'fa-arrow-up-arrow-down' }))))));
+            } }, h("slot", { key: '16439694bfaf17d5f1371ffd817f16ba7bc4ecdc' }), h("div", { key: '4b8cf5f4de063c8aa9c2ea8b653d9a35b1ae64b0', class: "spw-table-header__icons" }, h("slot", { key: 'd9816f83f71672ebda6b27b705142666e376ec7a', name: "filters" }), (this.tooltipTitle || this.tooltipText) && (h("spw-tooltip", { key: 'a8c4e3d4a555806faef984533696c393173b7ad7', "tooltip-title": this.tooltipTitle, "tooltip-text": this.tooltipText }, h("spw-icon", { key: '92a361a5400a2cb09c3ccf68a713897076e019b6', variant: "fa-regular", icon: "fa-circle-question" }))), this.sortable && (h("spw-icon", { key: 'db44bf3aa7be154edecf0281f3335edf0896eb01', class: "spw-table-header__sort-icon", icon: this.isSorted ? (this.sortDirection === 'asc' ? 'fa-arrow-up-short-wide' : 'fa-arrow-down-wide-short') : 'fa-arrow-up-arrow-down' }))))));
     }
     static get style() { return spwTableHeaderCss; }
 }, [1, "spw-table-header", {
@@ -63,7 +93,10 @@ const SpwTableHeader$1 = /*@__PURE__*/ proxyCustomElement(class SpwTableHeader e
         "sortDirection": [1, "sort-direction"],
         "isSorted": [4, "is-sorted"],
         "tooltipTitle": [1, "tooltip-title"],
-        "tooltipText": [1, "tooltip-text"]
+        "tooltipText": [1, "tooltip-text"],
+        "sticky": [4],
+        "stickyPosition": [1, "sticky-position"],
+        "stickyOffset": [2, "sticky-offset"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {