@spw-ds/spw-stencil-library 1.2.4 → 1.2.6

package/dist/esm/spw-pagination.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-CvfVJV8a.js';
 
-const spwPaginationCss = "/*! 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-pagination__item button,.spw-pagination__item--dots{border-radius:32px;font-size:14px;font-weight:700;height:32px;line-height:32px;min-width:32px;text-align:center}.spw-pagination__item button:focus-visible,.spw-pagination__item--dots:focus-visible{box-shadow:0 0 0 5px #000;outline:3px solid #fff;outline-offset:-1px}.spw-pagination{align-items:center;display:flex;flex-direction:column}@media (min-width:768px){.spw-pagination{align-items:flex-start}}.spw-pagination ul{align-items:center;display:flex;padding:0}.spw-pagination__item{margin-right:12px}.spw-pagination__item spw-icon{font-size:18px}.spw-pagination__item button{background:none;border:none;color:var(--spw-color-themes-grey-grey-900);cursor:pointer;margin:0;padding:0 6px}.spw-pagination__item:not(.spw-pagination__item--active,.spw-pagination__item--dots,.spw-pagination__item--disabled):hover button{background:var(--spw-color-themes-grey-grey-200)}.spw-pagination__item:not(.spw-pagination__item--active,.spw-pagination__item--dots,.spw-pagination__item--disabled):active button{background:var(--spw-color-themes-grey-grey-300)}.spw-pagination__item--arrow button{align-items:center;display:flex;gap:8px;padding:0 12px;text-decoration:underline}.spw-pagination__item--arrow button:hover{text-decoration:none}.spw-pagination__item--dots{align-items:center;background:none;color:var(--spw-color-themes-grey-grey-400);cursor:default;display:inline-flex;justify-content:center;position:relative;top:3px}.spw-pagination__item--dots spw-icon{font-size:16px}.spw-pagination__item--desktop{display:none}@media (min-width:768px){.spw-pagination__item--desktop{display:inline-block}}.spw-pagination__item--active button{background:var(--spw-ds-primary);color:#fff}.spw-pagination__input spw-text-field{--spw-input-height:32px;--spw-input-padding:0 4px;--spw-input-text-align:center;--spw-input-font-size:14px;width:3ch}.spw-pagination__mobile-arrows{margin-top:12px}@media (min-width:768px){.spw-pagination__mobile-arrows{display:none!important}}.spw-pagination__total-pages{font-size:14px;margin:0 12px 0 6px}.spw-tw-mb-10{margin-bottom:2.5rem}.spw-tw-mb-6{margin-bottom:1.5rem}.spw-tw-ml-2{margin-left:.5rem}.spw-tw-mr-4{margin-right:1rem}.spw-tw-mt-12{margin-top:3rem}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}";
+const spwPaginationCss = "/*! 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-pagination__item button,.spw-pagination__item--dots{border-radius:32px;font-size:14px;font-weight:700;height:32px;line-height:32px;min-width:32px;text-align:center}.spw-pagination__item button:focus-visible,.spw-pagination__item--dots:focus-visible{box-shadow:0 0 0 5px #000;outline:3px solid #fff;outline-offset:-1px}.spw-pagination{align-items:center;display:flex;flex-direction:column}@media (min-width:768px){.spw-pagination{align-items:flex-start}}.spw-pagination ul{align-items:center;display:flex;padding:0}.spw-pagination__item{margin-right:12px}.spw-pagination__item spw-icon{font-size:18px}.spw-pagination__item button{background:none;border:none;color:var(--spw-color-themes-grey-grey-900);cursor:pointer;margin:0;padding:0 6px}.spw-pagination__item:not(.spw-pagination__item--active,.spw-pagination__item--dots,.spw-pagination__item--disabled):hover button{background:var(--spw-color-themes-grey-grey-200)}.spw-pagination__item:not(.spw-pagination__item--active,.spw-pagination__item--dots,.spw-pagination__item--disabled):active button{background:var(--spw-color-themes-grey-grey-300)}.spw-pagination__item--arrow button{align-items:center;display:flex;gap:8px;padding:0 12px;text-decoration:underline}.spw-pagination__item--arrow button:hover{text-decoration:none}.spw-pagination__item--dots{align-items:center;background:none;color:var(--spw-color-themes-grey-grey-400);cursor:default;display:inline-flex;justify-content:center;position:relative;top:3px}.spw-pagination__item--dots spw-icon{font-size:16px}.spw-pagination__item--desktop{display:none}@media (min-width:768px){.spw-pagination__item--desktop{display:inline-block}}.spw-pagination__item--active button{background:var(--spw-ds-primary);color:#fff}.spw-pagination__input spw-text-field{--spw-input-height:32px;--spw-input-padding:0 4px;--spw-input-text-align:center;--spw-input-font-size:14px;width:36px}.spw-pagination__mobile-arrows{margin-top:12px}@media (min-width:768px){.spw-pagination__mobile-arrows{display:none!important}}.spw-pagination__total-pages{font-size:14px;margin:0 12px 0 6px}.spw-tw-mb-10{margin-bottom:2.5rem}.spw-tw-mb-6{margin-bottom:1.5rem}.spw-tw-ml-2{margin-left:.5rem}.spw-tw-mr-4{margin-right:1rem}.spw-tw-mt-12{margin-top:3rem}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}";
 
 const SpwPagination = class {
     constructor(hostRef) {
@@ -29,6 +29,23 @@ const SpwPagination = class {
     calculateTotalPages() {
         this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
     }
+    onItemsPerPageChange() {
+        this.currentPage = 1;
+        this.inputPageValue = '1';
+        this.pageChanged.emit(this.currentPage);
+    }
+    onTotalItemsChange() {
+        const newTotalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+        if (this.currentPage > newTotalPages || this.currentPage === 0) {
+            this.currentPage = 1;
+            this.inputPageValue = '1';
+            this.pageChanged.emit(this.currentPage);
+        }
+    }
+    /** Méthode publique pour définir la page courante */
+    async setPage(page) {
+        this.goToPage(page);
+    }
     goToPage(page) {
         if (page !== this.currentPage && !this.isDisabled && page >= 1 && page <= this.totalPages) {
             this.currentPage = page;
@@ -73,13 +90,6 @@ const SpwPagination = class {
             }
         }
     }
-    calculateWidth() {
-        const length = this.inputPageValue.length;
-        if (length <= 1) {
-            return '3ch';
-        }
-        return `${length + 1}ch`;
-    }
     calculatePageRange() {
         const pages = [];
         const { currentPage, totalPages, isMobile } = this;
@@ -151,12 +161,12 @@ const SpwPagination = class {
         const pages = this.calculatePageRange();
         const showPrevArrow = this.currentPage > 1;
         const showNextArrow = this.currentPage < this.totalPages;
-        const prevArrow = showPrevArrow && (h("li", { key: '310d6881f5ca26e72e291ff46f3702430f04c156', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: '7bf0984d6ca0e452a1af393378029132360d0f88', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '22a2118f590923421f7939c43d2a5219d8f7b83b', icon: "fa-chevron-left" }), " ", h("span", { key: '759c5b353af09965af21490c10ad5769aedd5b8c', class: "spw-pagination__item-arrow-text" }, "Pr\u00E9c\u00E9dent"))));
-        const nextArrow = showNextArrow && (h("li", { key: 'f53c2e57b5c522b1cbfddd2065051cc6f12a8989', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: '3956b0e4c17fcb36d186d0da90f9a12876f32880', onClick: () => this.goToPage(this.currentPage + 1) }, h("span", { key: '415a566238d6628eef7f7076931b1dd6117c59cc', class: "spw-pagination__item-arrow-text" }, "Suivant"), " ", h("spw-icon", { key: 'c692184f2e32af5cecda53da9693097cfe714237', icon: "fa-chevron-right" }))));
-        const prevArrowMobile = this.currentPage > 1 && (h("li", { key: '73f7a0999c00ea9a7bc4824b5a5ecb0c7e39a361', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: '3032dadbad8440c930f08187b3f13a5f3792fa22', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: 'a8c783e83bb884f27765b8353f4a248e51a30436', icon: "fa-chevron-left" }), " ", h("span", { key: 'a16dec2d98c14d3f46e043d6085f8da949e36ec0' }, "Pr\u00E9c\u00E9dent"))));
-        const nextArrowMobile = this.currentPage < this.totalPages && (h("li", { key: 'c8bc3cb1a2579704de138011dac511eb6d9cb4d8', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: 'b1bed9428d39534a9b4132b99abc6abcb503a523', onClick: () => this.goToPage(this.currentPage + 1), disabled: this.currentPage >= this.totalPages }, h("span", { key: '295d1d532e9bf87abe1aecfbbe2348f0aceb5aa8' }, "Suivant"), " ", h("spw-icon", { key: 'a57dfaf1c64201cf2ba9a8c8348159f24cb5162a', icon: "fa-chevron-right" }))));
-        const mobileArrows = (h("ul", { key: '13e17fdac8c7924ddfd7e9a0efead49d1219d00c', class: "spw-pagination__mobile-arrows" }, prevArrowMobile, nextArrowMobile));
-        return (h(Host, { key: '327f0c39d4ff811b3b336a3b7ddebfd980631197' }, h("div", { key: '91582fe920ccc6122016e349e08f5e0ee8e134b4', class: this.getPaginationClass() }, this.variant === 'input' && (h(Fragment, { key: 'fc891f9ab8a03f988e1f71a3c7e8a82de146c1cf' }, h("ul", { key: 'ce69c066495c083e6231ea94596498f28df2d946' }, prevArrow, h("li", { key: '6aa4b5c1eb79fe1c364cfa474d3909c5dfc9a6e7', class: "spw-pagination__input" }, h("spw-text-field", { key: 'b63bc14dff14f025c6503a2ec1a6250573e51f79', value: this.inputPageValue, type: "text", onInput: event => this.handleInputChange(event), onKeyDown: event => this.handleKeyDown(event), disabled: this.isDisabled, style: { width: this.calculateWidth() } })), h("li", { key: 'fc3afd361ff6457b0cefc381ed210d1ca8b9cae5', class: "spw-pagination__total-pages" }, "sur ", this.totalPages, " pages"), nextArrow), mobileArrows)), this.variant === 'numbers' && (h(Fragment, { key: 'db332f9578f6a3dc6e7776b2acd98a09c60a5800' }, h("ul", { key: '3f4c352d2ed4673cfe15497d83088a3fc9b7caba' }, prevArrow, pages.map(({ page, class: pageClass }) => {
+        const prevArrow = showPrevArrow && (h("li", { key: 'c96747975f1283f426b16fc5d6b9169641bf937a', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: '2cb14838bb36158b08708be2a6c851eab28d8a9e', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '4a97d865f50b82f807b699d2c9962cadb2fa3c49', icon: "fa-chevron-left" }), " ", h("span", { key: '85d4eba965c575bf620ac2775fc8b8ab91582c53', class: "spw-pagination__item-arrow-text" }, "Pr\u00E9c\u00E9dent"))));
+        const nextArrow = showNextArrow && (h("li", { key: 'db5e31a07af299158c0730b2c8ffdc647eb9c798', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: 'a2c031078bce4993152b5441e149c00d4633cefe', onClick: () => this.goToPage(this.currentPage + 1) }, h("span", { key: '28cdbfbcca8698294fae48d72a3d0a8932f0a94f', class: "spw-pagination__item-arrow-text" }, "Suivant"), " ", h("spw-icon", { key: '8af477a9a0eb495234278335eca66b7ca0b06fbe', icon: "fa-chevron-right" }))));
+        const prevArrowMobile = this.currentPage > 1 && (h("li", { key: '7509af0d29a02f64d67717753d71f2aa05349177', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: 'c3707cdd586dd519eaa00621eed632f73c5b00b6', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: 'f1fcf011715c381330865d20f1628ef24edb1778', icon: "fa-chevron-left" }), " ", h("span", { key: 'b9753065430534df7f5b499d97bf4bbad12c32d5' }, "Pr\u00E9c\u00E9dent"))));
+        const nextArrowMobile = this.currentPage < this.totalPages && (h("li", { key: '0c3fcbc4f482b151ef5355c2cd24378a7a2c7af3', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: 'f363b0de0131d011336fccdbf17dc9bc2b5eca15', onClick: () => this.goToPage(this.currentPage + 1), disabled: this.currentPage >= this.totalPages }, h("span", { key: '74df65c99c48fc1aec8084359866227ecdd26dbc' }, "Suivant"), " ", h("spw-icon", { key: '98e057e8cb6318ea06c2543fb4eae8500fcef87c', icon: "fa-chevron-right" }))));
+        const mobileArrows = (h("ul", { key: 'a4bff20ae94b1b94d70a8781cf311997c54c87e7', class: "spw-pagination__mobile-arrows" }, prevArrowMobile, nextArrowMobile));
+        return (h(Host, { key: 'fc202908905cb6da3eea73312068961b60cc776b' }, h("div", { key: '351bc8518011e937ee51c4831ac13797be51a6cb', class: this.getPaginationClass() }, this.variant === 'input' && (h(Fragment, { key: '684feca5a1724c030f21733850370eaf87153c13' }, h("ul", { key: '14de6cc555d4cab07ef9cb8dbdc0d3e83a25f67b' }, prevArrow, h("li", { key: '825297b0b82ef635497f3470ffcc5478646a558d', class: "spw-pagination__input" }, h("spw-text-field", { key: '3010c66645025021ca8b678b1dedcc65810e3742', value: this.inputPageValue, type: "text", onInput: event => this.handleInputChange(event), onKeyDown: event => this.handleKeyDown(event), disabled: this.isDisabled })), h("li", { key: '4273e7a738ef59ff77229580d89effeaeda18091', class: "spw-pagination__total-pages" }, "sur ", this.totalPages, " pages"), nextArrow), mobileArrows)), this.variant === 'numbers' && (h(Fragment, { key: '159503f57df6936053bbffeb4ed28bd01dff38ff' }, h("ul", { key: '87e707dd1060d3c3ccb6367f99e1c6cefabf99b8' }, prevArrow, pages.map(({ page, class: pageClass }) => {
             if (page === '...') {
                 return (h("li", { class: `spw-pagination__item spw-pagination__item--dots ${pageClass}` }, h("spw-icon", { icon: "fa-ellipsis" })));
             }
@@ -168,8 +178,8 @@ const SpwPagination = class {
         }), nextArrow), mobileArrows)))));
     }
     static get watchers() { return {
-        "totalItems": ["calculateTotalPages"],
-        "itemsPerPage": ["calculateTotalPages"],
+        "totalItems": ["calculateTotalPages", "onTotalItemsChange"],
+        "itemsPerPage": ["calculateTotalPages", "onItemsPerPageChange"],
         "currentPage": ["calculateTotalPages"]
     }; }
 };

package/dist/esm/spw-pagination.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-pagination.entry.js","sources":["src/components/spw-pagination/spw-pagination.scss?tag=spw-pagination&encapsulation=shadow","src/components/spw-pagination/spw-pagination.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n%button {\n  text-align: center;\n  line-height: 32px;\n  font-weight: 700;\n  border-radius: 32px;\n  font-size: 14px;\n  min-width: 32px;\n  height: 32px;\n  &:focus-visible {\n    outline: 3px solid white;\n    outline-offset: -1px;\n    box-shadow: 0 0 0 5px black;\n  }\n}\n\n.spw-pagination {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  @include breakpoint(md) {\n    align-items: flex-start;\n  }\n\n  ul {\n    display: flex;\n    align-items: center;\n    padding: 0;\n  }\n\n  &__item {\n    margin-right: 12px;\n    spw-icon {\n      font-size: 18px;\n    }\n    button {\n      padding: 0 6px;\n      margin: 0;\n      border: none;\n      cursor: pointer;\n      color: var(--spw-color-themes-grey-grey-900);\n      background: none;\n      @extend %button;\n    }\n\n    &:not(.spw-pagination__item--active, .spw-pagination__item--dots, .spw-pagination__item--disabled):hover {\n      button {\n        background: var(--spw-color-themes-grey-grey-200);\n      }\n    }\n\n    &:not(.spw-pagination__item--active, .spw-pagination__item--dots, .spw-pagination__item--disabled):active {\n      button {\n        background: var(--spw-color-themes-grey-grey-300);\n      }\n    }\n\n    &--arrow {\n      button {\n        padding: 0 12px;\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        text-decoration: underline;\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n\n    &--dots {\n      position: relative;\n      top: 3px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      cursor: default;\n      background: none;\n      color: var(--spw-color-themes-grey-grey-400);\n      @extend %button;\n      spw-icon {\n        font-size: 16px;\n      }\n    }\n\n    &--desktop {\n      display: none;\n      @include breakpoint(md) {\n        display: inline-block;\n      }\n    }\n\n    &--active {\n      button {\n        color: white;\n        background: var(--spw-ds-primary);\n      }\n    }\n  }\n\n  &__input {\n    spw-text-field {\n      width: 3ch;\n      --spw-input-height: 32px;\n      --spw-input-padding: 0 4px;\n      --spw-input-text-align: center;\n      --spw-input-font-size: 14px;\n    }\n  }\n\n  &__mobile-arrows {\n    margin-top: 12px;\n    @include breakpoint(md) {\n      display: none !important;\n    }\n  }\n\n  &__total-pages {\n    font-size: 14px;\n    margin: 0 12px 0 6px;\n  }\n}\n","import { Component, Fragment, Prop, Host, h, Event, EventEmitter, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'spw-pagination',\n  styleUrl: 'spw-pagination.scss',\n  shadow: true,\n})\nexport class SpwPagination {\n  /** Nombre total d'éléments à paginer */\n  @Prop() totalItems: number;\n  /** Nombre d'éléments à afficher par page */\n  @Prop() itemsPerPage: number;\n  /** Indique si la pagination est désactivée */\n  @Prop() isDisabled: boolean = false;\n  /** Type de variante de la pagination : 'numbers' ou 'input' */\n  @Prop() variant: 'numbers' | 'input' = 'numbers';\n  /** Page actuellement sélectionnée, mutable */\n  @Prop({ mutable: true }) currentPage: number = 1;\n\n  /** Événement émis lorsque la page est changée, renvoie le numéro de la nouvelle page */\n  @Event() pageChanged: EventEmitter<number>;\n\n  private totalPages: number;\n  @State() inputPageValue: string = '';\n  @State() isMobile: boolean = window.innerWidth < 800;\n  private debounceTimer: any;\n\n  componentWillLoad() {\n    this.calculateTotalPages();\n    this.inputPageValue = this.currentPage.toString();\n    window.addEventListener('resize', this.updateIsMobile);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.updateIsMobile);\n  }\n\n  private updateIsMobile = () => {\n    this.isMobile = window.innerWidth < 800;\n  };\n\n  @Watch('totalItems')\n  @Watch('itemsPerPage')\n  @Watch('currentPage')\n  calculateTotalPages() {\n    this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);\n  }\n\n  private goToPage(page: number) {\n    if (page !== this.currentPage && !this.isDisabled && page >= 1 && page <= this.totalPages) {\n      this.currentPage = page;\n      this.inputPageValue = this.currentPage.toString();\n      this.pageChanged.emit(this.currentPage);\n    }\n  }\n\n  private handleInputChange(event: Event) {\n    const inputValue = (event.target as HTMLInputElement).value;\n    this.inputPageValue = inputValue;\n    const page = parseInt(inputValue, 10);\n\n    if (!isNaN(page) && page >= 1 && page <= this.totalPages) {\n      clearTimeout(this.debounceTimer);\n      this.debounceTimer = setTimeout(() => {\n        this.goToPage(page);\n      }, 500);\n    }\n  }\n\n  private getPaginationClass() {\n    const pages = this.calculatePageRange();\n    const ellipsisCount = pages.filter(({ page }) => page === '...').length;\n    const hasEllipsisStart = ellipsisCount > 0 && pages[1]?.page === '...';\n    const hasEllipsisEnd = ellipsisCount > 0 && pages[pages.length - 2]?.page === '...';\n\n    let paginationClass = `spw-pagination spw-pagination--${this.currentPage} spw-pagination--total-${this.totalPages}`;\n\n    if (ellipsisCount === 2) {\n      paginationClass += ' spw-pagination--double-ellipsis';\n    } else if (hasEllipsisStart) {\n      paginationClass += ' spw-pagination--ellipsis-start';\n    } else if (hasEllipsisEnd) {\n      paginationClass += ' spw-pagination--ellipsis-end';\n    }\n\n    return paginationClass;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      const page = parseInt(this.inputPageValue, 10);\n      if (!isNaN(page)) {\n        this.goToPage(page);\n      }\n    }\n  }\n\n  private calculateWidth(): string {\n    const length = this.inputPageValue.length;\n    if (length <= 1) {\n      return '3ch';\n    }\n    return `${length + 1}ch`;\n  }\n\n  private calculatePageRange() {\n    const pages = [];\n    const { currentPage, totalPages, isMobile } = this;\n\n    if (isMobile) {\n      // Mode mobile\n      if (totalPages <= 5) {\n        for (let i = 1; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--small-range' });\n        }\n      } else if (currentPage <= 3) {\n        for (let i = 1; i <= 3; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--start-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      } else if (currentPage >= totalPages - 2) {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = totalPages - 2; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--end-range' });\n        }\n      } else {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = currentPage - 1; i <= currentPage + 1; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--middle-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      }\n    } else {\n      // Mode desktop\n      if (totalPages <= 7) {\n        for (let i = 1; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--small-range' });\n        }\n      } else if (currentPage <= 4) {\n        for (let i = 1; i <= 4; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--start-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      } else if (currentPage >= totalPages - 3) {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = totalPages - 3; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--end-range' });\n        }\n      } else {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = currentPage - 2; i <= currentPage + 2; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--middle-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      }\n    }\n\n    return pages;\n  }\n\n  render() {\n    const pages = this.calculatePageRange();\n    const showPrevArrow = this.currentPage > 1;\n    const showNextArrow = this.currentPage < this.totalPages;\n\n    const prevArrow = showPrevArrow && (\n      <li class=\"spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage - 1)}>\n          <spw-icon icon=\"fa-chevron-left\"></spw-icon> <span class=\"spw-pagination__item-arrow-text\">Précédent</span>\n        </button>\n      </li>\n    );\n\n    const nextArrow = showNextArrow && (\n      <li class=\"spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage + 1)}>\n          <span class=\"spw-pagination__item-arrow-text\">Suivant</span> <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n        </button>\n      </li>\n    );\n\n    const prevArrowMobile = this.currentPage > 1 && (\n      <li class=\"spw-pagination__item spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage - 1)}>\n          <spw-icon icon=\"fa-chevron-left\"></spw-icon> <span>Précédent</span>\n        </button>\n      </li>\n    );\n\n    const nextArrowMobile = this.currentPage < this.totalPages && (\n      <li class=\"spw-pagination__item spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage + 1)} disabled={this.currentPage >= this.totalPages}>\n          <span>Suivant</span> <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n        </button>\n      </li>\n    );\n\n    const mobileArrows = (\n      <ul class=\"spw-pagination__mobile-arrows\">\n        {prevArrowMobile}\n        {nextArrowMobile}\n      </ul>\n    );\n\n    return (\n      <Host>\n        <div class={this.getPaginationClass()}>\n          {this.variant === 'input' && (\n            <Fragment>\n              <ul>\n                {prevArrow}\n                <li class=\"spw-pagination__input\">\n                  <spw-text-field\n                    value={this.inputPageValue}\n                    type=\"text\"\n                    onInput={event => this.handleInputChange(event)}\n                    onKeyDown={event => this.handleKeyDown(event)}\n                    disabled={this.isDisabled}\n                    style={{ width: this.calculateWidth() }}\n                  ></spw-text-field>\n                </li>\n                <li class=\"spw-pagination__total-pages\">sur {this.totalPages} pages</li>\n                {nextArrow}\n              </ul>\n              {mobileArrows}\n            </Fragment>\n          )}\n          {this.variant === 'numbers' && (\n            <Fragment>\n              <ul>\n                {prevArrow}\n\n                {pages.map(({ page, class: pageClass }) => {\n                  if (page === '...') {\n                    return (\n                      <li class={`spw-pagination__item spw-pagination__item--dots ${pageClass}`}>\n                        <spw-icon icon=\"fa-ellipsis\"></spw-icon>\n                      </li>\n                    );\n                  }\n\n                  return (\n                    <li\n                      class={{\n                        'spw-pagination__item': true,\n                        'spw-pagination__item--active': page === this.currentPage,\n                        [pageClass]: true,\n                      }}\n                    >\n                      <button onClick={() => this.goToPage(page as number)} disabled={page === this.currentPage}>\n                        {page}\n                      </button>\n                    </li>\n                  );\n                })}\n\n                {nextArrow}\n              </ul>\n              {mobileArrows}\n            </Fragment>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spw-pagination.entry.js","sources":["src/components/spw-pagination/spw-pagination.scss?tag=spw-pagination&encapsulation=shadow","src/components/spw-pagination/spw-pagination.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n%button {\n  text-align: center;\n  line-height: 32px;\n  font-weight: 700;\n  border-radius: 32px;\n  font-size: 14px;\n  min-width: 32px;\n  height: 32px;\n  &:focus-visible {\n    outline: 3px solid white;\n    outline-offset: -1px;\n    box-shadow: 0 0 0 5px black;\n  }\n}\n\n.spw-pagination {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  @include breakpoint(md) {\n    align-items: flex-start;\n  }\n\n  ul {\n    display: flex;\n    align-items: center;\n    padding: 0;\n  }\n\n  &__item {\n    margin-right: 12px;\n    spw-icon {\n      font-size: 18px;\n    }\n    button {\n      padding: 0 6px;\n      margin: 0;\n      border: none;\n      cursor: pointer;\n      color: var(--spw-color-themes-grey-grey-900);\n      background: none;\n      @extend %button;\n    }\n\n    &:not(.spw-pagination__item--active, .spw-pagination__item--dots, .spw-pagination__item--disabled):hover {\n      button {\n        background: var(--spw-color-themes-grey-grey-200);\n      }\n    }\n\n    &:not(.spw-pagination__item--active, .spw-pagination__item--dots, .spw-pagination__item--disabled):active {\n      button {\n        background: var(--spw-color-themes-grey-grey-300);\n      }\n    }\n\n    &--arrow {\n      button {\n        padding: 0 12px;\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        text-decoration: underline;\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n\n    &--dots {\n      position: relative;\n      top: 3px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      cursor: default;\n      background: none;\n      color: var(--spw-color-themes-grey-grey-400);\n      @extend %button;\n      spw-icon {\n        font-size: 16px;\n      }\n    }\n\n    &--desktop {\n      display: none;\n      @include breakpoint(md) {\n        display: inline-block;\n      }\n    }\n\n    &--active {\n      button {\n        color: white;\n        background: var(--spw-ds-primary);\n      }\n    }\n  }\n\n  &__input {\n    spw-text-field {\n      width: 36px;\n      --spw-input-height: 32px;\n      --spw-input-padding: 0 4px;\n      --spw-input-text-align: center;\n      --spw-input-font-size: 14px;\n    }\n  }\n\n  &__mobile-arrows {\n    margin-top: 12px;\n    @include breakpoint(md) {\n      display: none !important;\n    }\n  }\n\n  &__total-pages {\n    font-size: 14px;\n    margin: 0 12px 0 6px;\n  }\n}\n","import { Component, Fragment, Prop, Host, h, Event, EventEmitter, Watch, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'spw-pagination',\n  styleUrl: 'spw-pagination.scss',\n  shadow: true,\n})\nexport class SpwPagination {\n  /** Nombre total d'éléments à paginer */\n  @Prop() totalItems: number;\n  /** Nombre d'éléments à afficher par page */\n  @Prop() itemsPerPage: number;\n  /** Indique si la pagination est désactivée */\n  @Prop() isDisabled: boolean = false;\n  /** Type de variante de la pagination : 'numbers' ou 'input' */\n  @Prop() variant: 'numbers' | 'input' = 'numbers';\n  /** Page actuellement sélectionnée, mutable */\n  @Prop({ mutable: true }) currentPage: number = 1;\n\n  /** Événement émis lorsque la page est changée, renvoie le numéro de la nouvelle page */\n  @Event() pageChanged: EventEmitter<number>;\n\n  private totalPages: number;\n  @State() inputPageValue: string = '';\n  @State() isMobile: boolean = window.innerWidth < 800;\n  private debounceTimer: any;\n\n  componentWillLoad() {\n    this.calculateTotalPages();\n    this.inputPageValue = this.currentPage.toString();\n    window.addEventListener('resize', this.updateIsMobile);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.updateIsMobile);\n  }\n\n  private updateIsMobile = () => {\n    this.isMobile = window.innerWidth < 800;\n  };\n\n  @Watch('totalItems')\n  @Watch('itemsPerPage')\n  @Watch('currentPage')\n  calculateTotalPages() {\n    this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);\n  }\n\n  @Watch('itemsPerPage')\n  onItemsPerPageChange() {\n    this.currentPage = 1;\n    this.inputPageValue = '1';\n    this.pageChanged.emit(this.currentPage);\n  }\n\n  @Watch('totalItems')\n  onTotalItemsChange() {\n    const newTotalPages = Math.ceil(this.totalItems / this.itemsPerPage);\n    if (this.currentPage > newTotalPages || this.currentPage === 0) {\n      this.currentPage = 1;\n      this.inputPageValue = '1';\n      this.pageChanged.emit(this.currentPage);\n    }\n  }\n\n  /** Méthode publique pour définir la page courante */\n  @Method()\n  async setPage(page: number): Promise<void> {\n    this.goToPage(page);\n  }\n\n  private goToPage(page: number) {\n    if (page !== this.currentPage && !this.isDisabled && page >= 1 && page <= this.totalPages) {\n      this.currentPage = page;\n      this.inputPageValue = this.currentPage.toString();\n      this.pageChanged.emit(this.currentPage);\n    }\n  }\n\n  private handleInputChange(event: Event) {\n    const inputValue = (event.target as HTMLInputElement).value;\n    this.inputPageValue = inputValue;\n    const page = parseInt(inputValue, 10);\n\n    if (!isNaN(page) && page >= 1 && page <= this.totalPages) {\n      clearTimeout(this.debounceTimer);\n      this.debounceTimer = setTimeout(() => {\n        this.goToPage(page);\n      }, 500);\n    }\n  }\n\n  private getPaginationClass() {\n    const pages = this.calculatePageRange();\n    const ellipsisCount = pages.filter(({ page }) => page === '...').length;\n    const hasEllipsisStart = ellipsisCount > 0 && pages[1]?.page === '...';\n    const hasEllipsisEnd = ellipsisCount > 0 && pages[pages.length - 2]?.page === '...';\n\n    let paginationClass = `spw-pagination spw-pagination--${this.currentPage} spw-pagination--total-${this.totalPages}`;\n\n    if (ellipsisCount === 2) {\n      paginationClass += ' spw-pagination--double-ellipsis';\n    } else if (hasEllipsisStart) {\n      paginationClass += ' spw-pagination--ellipsis-start';\n    } else if (hasEllipsisEnd) {\n      paginationClass += ' spw-pagination--ellipsis-end';\n    }\n\n    return paginationClass;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      const page = parseInt(this.inputPageValue, 10);\n      if (!isNaN(page)) {\n        this.goToPage(page);\n      }\n    }\n  }\n\n  private calculatePageRange() {\n    const pages = [];\n    const { currentPage, totalPages, isMobile } = this;\n\n    if (isMobile) {\n      // Mode mobile\n      if (totalPages <= 5) {\n        for (let i = 1; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--small-range' });\n        }\n      } else if (currentPage <= 3) {\n        for (let i = 1; i <= 3; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--start-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      } else if (currentPage >= totalPages - 2) {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = totalPages - 2; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--end-range' });\n        }\n      } else {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = currentPage - 1; i <= currentPage + 1; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--middle-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      }\n    } else {\n      // Mode desktop\n      if (totalPages <= 7) {\n        for (let i = 1; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--small-range' });\n        }\n      } else if (currentPage <= 4) {\n        for (let i = 1; i <= 4; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--start-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      } else if (currentPage >= totalPages - 3) {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = totalPages - 3; i <= totalPages; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--end-range' });\n        }\n      } else {\n        pages.push({ page: 1, class: 'spw-pagination__item--start' });\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        for (let i = currentPage - 2; i <= currentPage + 2; i++) {\n          pages.push({ page: i, class: 'spw-pagination__item--middle-range' });\n        }\n        pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });\n        pages.push({ page: totalPages, class: 'spw-pagination__item--end' });\n      }\n    }\n\n    return pages;\n  }\n\n  render() {\n    const pages = this.calculatePageRange();\n    const showPrevArrow = this.currentPage > 1;\n    const showNextArrow = this.currentPage < this.totalPages;\n\n    const prevArrow = showPrevArrow && (\n      <li class=\"spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage - 1)}>\n          <spw-icon icon=\"fa-chevron-left\"></spw-icon> <span class=\"spw-pagination__item-arrow-text\">Précédent</span>\n        </button>\n      </li>\n    );\n\n    const nextArrow = showNextArrow && (\n      <li class=\"spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage + 1)}>\n          <span class=\"spw-pagination__item-arrow-text\">Suivant</span> <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n        </button>\n      </li>\n    );\n\n    const prevArrowMobile = this.currentPage > 1 && (\n      <li class=\"spw-pagination__item spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage - 1)}>\n          <spw-icon icon=\"fa-chevron-left\"></spw-icon> <span>Précédent</span>\n        </button>\n      </li>\n    );\n\n    const nextArrowMobile = this.currentPage < this.totalPages && (\n      <li class=\"spw-pagination__item spw-pagination__item--arrow\">\n        <button onClick={() => this.goToPage(this.currentPage + 1)} disabled={this.currentPage >= this.totalPages}>\n          <span>Suivant</span> <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n        </button>\n      </li>\n    );\n\n    const mobileArrows = (\n      <ul class=\"spw-pagination__mobile-arrows\">\n        {prevArrowMobile}\n        {nextArrowMobile}\n      </ul>\n    );\n\n    return (\n      <Host>\n        <div class={this.getPaginationClass()}>\n          {this.variant === 'input' && (\n            <Fragment>\n              <ul>\n                {prevArrow}\n                <li class=\"spw-pagination__input\">\n                  <spw-text-field\n                    value={this.inputPageValue}\n                    type=\"text\"\n                    onInput={event => this.handleInputChange(event)}\n                    onKeyDown={event => this.handleKeyDown(event)}\n                    disabled={this.isDisabled}\n                  ></spw-text-field>\n                </li>\n                <li class=\"spw-pagination__total-pages\">sur {this.totalPages} pages</li>\n                {nextArrow}\n              </ul>\n              {mobileArrows}\n            </Fragment>\n          )}\n          {this.variant === 'numbers' && (\n            <Fragment>\n              <ul>\n                {prevArrow}\n\n                {pages.map(({ page, class: pageClass }) => {\n                  if (page === '...') {\n                    return (\n                      <li class={`spw-pagination__item spw-pagination__item--dots ${pageClass}`}>\n                        <spw-icon icon=\"fa-ellipsis\"></spw-icon>\n                      </li>\n                    );\n                  }\n\n                  return (\n                    <li\n                      class={{\n                        'spw-pagination__item': true,\n                        'spw-pagination__item--active': page === this.currentPage,\n                        [pageClass]: true,\n                      }}\n                    >\n                      <button onClick={() => this.goToPage(page as number)} disabled={page === this.currentPage}>\n                        {page}\n                      </button>\n                    </li>\n                  );\n                })}\n\n                {nextArrow}\n              </ul>\n              {mobileArrows}\n            </Fragment>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/spw-search-field.entry.js

@@ -1,10 +1,11 @@
-import { r as registerInstance, h } from './index-CvfVJV8a.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-CvfVJV8a.js';
 
-const spwSearchFieldCss = "/*! 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-search-field{position:relative}.spw-search-field--large spw-text-field{--spw-input-height:54px;--spw-input-padding:16px 24px;--spw-input-radius:60px;--spw-input-border:transparent;--spw-input-icon-search-color:var(--spw-ds-primary)}.spw-search-field__options{background-color:#fff;border:1px solid var(--spw-color-themes-grey-grey-800);border-radius:0 0 4px 4px;margin-top:-2px;max-height:200px;overflow-y:auto;position:absolute;transition:transform .3s ease,opacity .3s ease;width:100%;z-index:44}.spw-search-field__options--down,.spw-search-field__options--up{top:100%;transform:translateY(0)}.spw-search-field__option{border-bottom:1px solid var(--spw-color-themes-grey-grey-900);color:var(--spw-color-themes-grey-grey-900);cursor:pointer;padding:12px;text-align:left;transition:background-color .2s ease}.spw-search-field__option:hover{background-color:var(--spw-color-themes-grey-grey-200)}.spw-search-field__option:last-child{border-bottom:none}.spw-search-field__option--focused{background-color:var(--spw-color-themes-grey-grey-300)}.spw-search-field__option--selected{font-weight:700}.spw-search-field__no-results{color:var(--spw-color-themes-grey-grey-600);cursor:not-allowed;padding:12px;text-align:left}.spw-tw-italic{font-style:italic}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}";
+const spwSearchFieldCss = "/*! 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-search-field{position:relative}.spw-search-field--large spw-text-field{--spw-input-height:54px;--spw-input-padding:16px 24px;--spw-input-radius:60px;--spw-input-border:transparent;--spw-input-icon-search-color:var(--spw-ds-primary)}.spw-search-field--has-submit-button spw-text-field{--spw-input-padding-right:56px}.spw-search-field__submit{align-items:center;background:transparent;border:none;border-radius:50%;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:0;top:50%;transform:translateY(-50%);transition:all .2s ease;width:40px;z-index:10}.spw-search-field--large .spw-search-field__submit{height:46px;right:16px;width:46px}.spw-search-field__options{background-color:#fff;border:1px solid var(--spw-color-themes-grey-grey-800);border-radius:0 0 4px 4px;margin-top:-2px;max-height:200px;overflow-y:auto;position:absolute;transition:transform .3s ease,opacity .3s ease;width:100%;z-index:44}.spw-search-field--is-rounded .spw-search-field__options{border-radius:24px;margin-top:12px}.spw-search-field--is-rounded .spw-search-field__options ul{padding:12px}.spw-search-field__options--down,.spw-search-field__options--up{top:100%;transform:translateY(0)}.spw-search-field__option{border-bottom:1px solid var(--spw-color-themes-grey-grey-900);color:var(--spw-color-themes-grey-grey-900);cursor:pointer;padding:12px;text-align:left;transition:background-color .2s ease}.spw-search-field--is-rounded .spw-search-field__option{border-bottom:none;border-radius:12px;padding:12px}.spw-search-field__option:hover{background-color:var(--spw-color-themes-grey-grey-200)}.spw-search-field__option:last-child{border-bottom:none}.spw-search-field__option--focused{background-color:var(--spw-color-themes-grey-grey-300)}.spw-search-field__option--selected{font-weight:700}.spw-search-field__no-results{color:var(--spw-color-themes-grey-grey-600);cursor:not-allowed;padding:12px;text-align:left}.spw-search-field--is-rounded .spw-search-field__no-results{padding:24px}.spw-search-field__view-all{bottom:0;cursor:pointer;font-weight:700;position:sticky}.spw-search-field--is-rounded .spw-search-field__view-all{border-radius:12px;border-top:none}.spw-search-field__view-all a{background:#fff;border-top:1px solid var(--spw-color-themes-grey-grey-900);color:#000;display:block;display:inline-flex;justify-content:space-between;padding:12px;text-decoration:underline;width:100%}.spw-search-field--is-rounded .spw-search-field__view-all a{border-top:none;color:var(--spw-ds-primary);padding:12px 24px 24px}.spw-search-field__view-all a:hover{text-decoration:none}.spw-tw-italic{font-style:italic}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}";
 
 const SpwSearchField = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
         /** Placeholder à afficher dans le champ de recherche */
         this.placeholder = 'Recherche...';
         /** Taille du champ de recherche */
@@ -13,6 +14,12 @@ const SpwSearchField = class {
         this.label = '';
         /** Indique si le champ est requis */
         this.required = false;
+        /** Texte du lien pour voir tous les résultats */
+        this.viewAllResults = 'Voir plus de résultats';
+        /** Texte à afficher si pas de résultats */
+        this.noResults = 'Pas de résultats.';
+        /** Affiche un bouton submit (loupe) qui déclenche le submit du formulaire parent */
+        this.hasSubmitButton = false;
         this.filteredItems = [];
         this.searchText = '';
         this.isOpen = false;
@@ -27,6 +34,28 @@ const SpwSearchField = class {
                 }
             }
         };
+        this.handleValueChanged = (event) => {
+            const newValue = String(event.detail);
+            this.searchText = newValue;
+            this.updateHiddenInput();
+            this.filterItems();
+            this.determineDropdownDirection();
+            if (!this.searchText) {
+                this.isOpen = false;
+            }
+            else {
+                this.isOpen = true;
+            }
+            this.valueChanged.emit(this.searchText);
+        };
+        this.handleSubmit = (event) => {
+            event.preventDefault();
+            this.updateHiddenInput();
+            const form = this.el.closest('form');
+            if (form) {
+                form.submit();
+            }
+        };
     }
     componentWillLoad() {
         if (this.items) {
@@ -38,9 +67,46 @@ const SpwSearchField = class {
     }
     componentDidLoad() {
         document.addEventListener('click', this.handleClickOutside);
+        this.createHiddenInput();
     }
     disconnectedCallback() {
         document.removeEventListener('click', this.handleClickOutside);
+        if (this.hiddenInput && this.hiddenInput.parentNode) {
+            this.hiddenInput.parentNode.removeChild(this.hiddenInput);
+        }
+    }
+    createHiddenInput() {
+        if (this.name) {
+            this.hiddenInput = document.createElement('input');
+            this.hiddenInput.type = 'hidden';
+            this.hiddenInput.name = this.name;
+            this.hiddenInput.value = this.searchText;
+            this.el.appendChild(this.hiddenInput);
+        }
+    }
+    updateHiddenInput() {
+        if (this.hiddenInput) {
+            this.hiddenInput.value = this.searchText;
+        }
+    }
+    /** Réinitialise le champ de recherche */
+    async resetInput() {
+        this.searchText = '';
+        this.updateHiddenInput();
+        this.isOpen = false;
+        this.focusedItemIndex = null;
+        this.valueChanged.emit(this.searchText);
+    }
+    /** Définit la valeur du champ de recherche */
+    async setValue(value) {
+        this.searchText = value;
+        this.updateHiddenInput();
+        this.filterItems();
+        this.valueChanged.emit(this.searchText);
+    }
+    /** Récupère la valeur actuelle du champ de recherche */
+    async getValue() {
+        return this.searchText;
     }
     parseItems(newValue) {
         if (!newValue) {
@@ -55,13 +121,6 @@ const SpwSearchField = class {
             this.filteredItems = [];
         }
     }
-    handleSearchInput(event) {
-        const input = event.target;
-        this.searchText = input.value;
-        this.filterItems();
-        this.determineDropdownDirection();
-        this.isOpen = true;
-    }
     filterItems() {
         if (!this.items) {
             this.filteredItems = [];
@@ -78,7 +137,9 @@ const SpwSearchField = class {
     }
     selectItem(item) {
         this.searchText = item.label;
+        this.updateHiddenInput();
         this.isOpen = false;
+        this.valueChanged.emit(this.searchText);
         if (item.url) {
             window.location.href = item.url;
         }
@@ -132,15 +193,18 @@ const SpwSearchField = class {
     get elementClass() {
         return {
             'spw-search-field': true,
+            'spw-search-field--is-rounded': this.isRounded,
+            'spw-search-field--has-submit-button': this.hasSubmitButton,
             [`spw-search-field--${this.size}`]: true,
         };
     }
     render() {
-        return (h("div", { key: 'd00840338c82da443e332932278054e498365138', ref: el => (this.hostElement = el), class: this.elementClass }, h("spw-text-field", { key: '9c05d301ae19f15d1e1669b8addf0474ab403802', placeholder: this.placeholder, name: this.name, label: this.label, size: this.size, "is-search": true, "is-clear": true, required: this.required, disabled: this.disabled, assistiveText: this.assistiveText, value: this.searchText, onInput: event => this.handleSearchInput(event), onKeyDown: event => this.handleKeyDown(event) }), this.isOpen && !!this.items && (h("div", { key: '4f249bd675da1df764386f15f30b721d15e14ebc', class: `spw-search-field__options spw-search-field__options--${this.dropdownDirection}` }, !!this.filteredItems.length && (h("ul", { key: '404416e18cbd2eb5b5679f4353febc3994e438f8' }, this.filteredItems.map((item, index) => (h("li", { class: {
+        return (h("div", { key: '07e35a89a2689deb130a67021e40edcce012bef6', ref: el => (this.hostElement = el), class: this.elementClass }, h("spw-text-field", { key: '05a4ef03fe1f53afcd12e2c1e1238db2a1aa2cad', placeholder: this.placeholder, name: this.name, label: this.label, size: this.size, "is-search": true, "is-clear": true, required: this.required, disabled: this.disabled, assistiveText: this.assistiveText, value: this.searchText, onValueChanged: this.handleValueChanged, onKeyDown: event => this.handleKeyDown(event) }), this.hasSubmitButton && h("button", { key: '088382c1095ec44de895485ce815ce5d1fa21b6d', type: "button", class: "spw-search-field__submit", onClick: this.handleSubmit, "aria-label": "Rechercher" }), this.isOpen && !!this.items && (h("div", { key: 'c3f4b5a451a350c908bf5515c53b5bb10d439096', class: `spw-search-field__options spw-search-field__options--${this.dropdownDirection}` }, !!this.filteredItems.length && (h("ul", { key: '64097e5de526ed83489234fb4382b3999c5dc2ce' }, this.filteredItems.map((item, index) => (h("li", { class: {
                 'spw-search-field__option': true,
                 'spw-search-field__option--focused': index === this.focusedItemIndex,
-            }, onClick: () => this.selectItem(item) }, this.highlightMatch(item.label), " ", item.category && h("span", { class: "spw-tw-italic" }, " - ", item.category)))))), !this.filteredItems.length && h("p", { key: 'a8f3a1c750733ae59470cc3fe378e996ba6dd31c', class: "spw-search-field__no-results" }, "Pas de r\u00E9sultats.")))));
+            }, onClick: () => this.selectItem(item) }, this.highlightMatch(item.label), " ", item.category && h("span", { class: "spw-tw-italic" }, " - ", item.category)))))), !this.filteredItems.length && h("p", { key: '9c5728bfb4cd1591446b697cc311b77c9c4288ec', class: "spw-search-field__no-results" }, this.noResults), !!this.filteredItems.length && this.viewAllResults && this.viewAllResultsLink && (h("p", { key: '6f4f69c0283fccad053b0d2608e2beb2543546a5', class: "spw-search-field__view-all" }, h("a", { key: '939963c172d388220cef9cf33e9ee3ea6c47802c', href: this.viewAllResultsLink }, this.viewAllResults, " ", h("spw-icon", { key: '49eff81ffbdda6342459c83b141deb65997f2c23', icon: "fa-arrow-right" }))))))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "items": ["parseItems"]
     }; }

package/dist/esm/spw-search-field.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-search-field.entry.js","sources":["src/components/spw-search-field/spw-search-field.scss?tag=spw-search-field&encapsulation=shadow","src/components/spw-search-field/spw-search-field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-search-field {\n  position: relative;\n  &--large {\n    spw-text-field {\n      --spw-input-height: 54px;\n      --spw-input-padding: 16px 24px;\n      --spw-input-radius: 60px;\n      --spw-input-border: transparent;\n      --spw-input-icon-search-color: var(--spw-ds-primary);\n    }\n  }\n}\n\n.spw-search-field__options {\n  position: absolute;\n  width: 100%;\n  background-color: #fff;\n  border: 1px solid var(--spw-color-themes-grey-grey-800);\n  border-radius: 0 0 4px 4px;\n  max-height: 200px;\n  overflow-y: auto;\n  z-index: 44;\n  margin-top: -2px;\n  transition:\n    transform 0.3s ease,\n    opacity 0.3s ease;\n}\n\n.spw-search-field__options--down {\n  top: 100%;\n  transform: translateY(0);\n}\n\n.spw-search-field__options--up {\n  top: 100%;\n  transform: translateY(0);\n}\n\n.spw-search-field__option {\n  padding: 12px;\n  color: var(--spw-color-themes-grey-grey-900);\n  text-align: left;\n  border-bottom: 1px solid var(--spw-color-themes-grey-grey-900);\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n\n  &:hover {\n    background-color: var(--spw-color-themes-grey-grey-200);\n  }\n\n  &:last-child {\n    border-bottom: none;\n  }\n\n  &--focused {\n    background-color: var(--spw-color-themes-grey-grey-300);\n  }\n\n  &--selected {\n    font-weight: 700;\n  }\n}\n\n.spw-search-field__no-results {\n  padding: 12px;\n  cursor: not-allowed;\n  text-align: left;\n  color: var(--spw-color-themes-grey-grey-600);\n}\n","import { Component, Prop, State, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'spw-search-field',\n  styleUrl: 'spw-search-field.scss',\n  shadow: true,\n})\nexport class SpwSearchField {\n  private hostElement: HTMLElement;\n\n  /** Liste des éléments à filtrer, passée sous forme de chaîne JSON */\n  @Prop() items?: string;\n  /** Placeholder à afficher dans le champ de recherche */\n  @Prop() placeholder: string = 'Recherche...';\n  /** Taille du champ de recherche */\n  @Prop() size?: 'large' | 'medium' = 'medium';\n  /** Label associé au champ de recherche */\n  @Prop() label?: string = '';\n  /** Indique si le champ de recherche est désactivé */\n  @Prop() disabled?: boolean;\n  /** Nom du champ de recherche, utilisé pour les formulaires */\n  @Prop() name: string;\n  /** Indique si le champ est requis */\n  @Prop() required?: boolean = false;\n  /** Texte d'assistance affiché sous le champ de recherche */\n  @Prop() assistiveText?: string;\n\n  @State() filteredItems: Array<{ url?: string; label: string; category?: string }> = [];\n  @State() searchText: string = '';\n  @State() isOpen: boolean = false;\n  @State() focusedItemIndex: number | null = null;\n  @State() dropdownDirection: 'up' | 'down' = 'down';\n\n  componentWillLoad() {\n    if (this.items) {\n      this.parseItems(this.items);\n    } else {\n      this.filteredItems = [];\n    }\n  }\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  @Watch('items')\n  parseItems(newValue: string) {\n    if (!newValue) {\n      this.filteredItems = [];\n      return;\n    }\n\n    try {\n      this.filteredItems = JSON.parse(newValue);\n    } catch (e) {\n      console.error('Invalid JSON format for items:', newValue);\n      this.filteredItems = [];\n    }\n  }\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.isOpen) {\n      const target = event.composedPath()[0] as Node;\n      const isInsideHost = this.hostElement.contains(target);\n\n      if (!isInsideHost) {\n        this.isOpen = false;\n      }\n    }\n  };\n\n  private handleSearchInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.searchText = input.value;\n    this.filterItems();\n    this.determineDropdownDirection();\n    this.isOpen = true;\n  }\n\n  private filterItems() {\n    if (!this.items) {\n      this.filteredItems = [];\n      return;\n    }\n\n    const normalizedSearchText = this.normalizeString(this.searchText);\n\n    this.filteredItems = JSON.parse(this.items).filter(item => this.normalizeString(item.label).includes(normalizedSearchText));\n  }\n\n  private normalizeString(str: string): string {\n    return str\n      .normalize('NFD')\n      .replace(/[\\u0300-\\u036f]/g, '')\n      .toLowerCase();\n  }\n\n  private selectItem(item: { url?: string; label: string }) {\n    this.searchText = item.label;\n    this.isOpen = false;\n\n    if (item.url) {\n      window.location.href = item.url;\n    }\n  }\n\n  private determineDropdownDirection() {\n    const rect = this.hostElement.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n\n    if (rect.bottom + 200 > viewportHeight && rect.top > 200) {\n      this.dropdownDirection = 'up';\n    } else {\n      this.dropdownDirection = 'down';\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (this.isOpen) {\n          this.focusedItemIndex = this.focusedItemIndex === null ? 0 : (this.focusedItemIndex + 1) % this.filteredItems.length;\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (this.isOpen) {\n          this.focusedItemIndex =\n            this.focusedItemIndex === null ? this.filteredItems.length - 1 : (this.focusedItemIndex - 1 + this.filteredItems.length) % this.filteredItems.length;\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (this.isOpen && this.focusedItemIndex !== null) {\n          this.selectItem(this.filteredItems[this.focusedItemIndex]);\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  private highlightMatch(item: string) {\n    const normalizedSearchText = this.normalizeString(this.searchText);\n    const normalizedItem = this.normalizeString(item);\n\n    const startIndex = normalizedItem.indexOf(normalizedSearchText);\n\n    if (startIndex === -1 || !this.searchText) {\n      return item;\n    }\n\n    const endIndex = startIndex + normalizedSearchText.length;\n\n    return (\n      <span>\n        {item.slice(0, startIndex)}\n        <strong>{item.slice(startIndex, endIndex)}</strong>\n        {item.slice(endIndex)}\n      </span>\n    );\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-search-field': true,\n      [`spw-search-field--${this.size}`]: true,\n    };\n  }\n\n  render() {\n    return (\n      <div ref={el => (this.hostElement = el as HTMLElement)} class={this.elementClass}>\n        <spw-text-field\n          placeholder={this.placeholder}\n          name={this.name}\n          label={this.label}\n          size={this.size}\n          is-search={true}\n          is-clear={true}\n          required={this.required}\n          disabled={this.disabled}\n          assistiveText={this.assistiveText}\n          value={this.searchText}\n          onInput={event => this.handleSearchInput(event)}\n          onKeyDown={event => this.handleKeyDown(event)}\n        ></spw-text-field>\n        {this.isOpen && !!this.items && (\n          <div class={`spw-search-field__options spw-search-field__options--${this.dropdownDirection}`}>\n            {!!this.filteredItems.length && (\n              <ul>\n                {this.filteredItems.map((item, index) => (\n                  <li\n                    class={{\n                      'spw-search-field__option': true,\n                      'spw-search-field__option--focused': index === this.focusedItemIndex,\n                    }}\n                    onClick={() => this.selectItem(item)}\n                  >\n                    {this.highlightMatch(item.label)} {item.category && <span class=\"spw-tw-italic\"> - {item.category}</span>}\n                  </li>\n                ))}\n              </ul>\n            )}\n            {!this.filteredItems.length && <p class=\"spw-search-field__no-results\">Pas de résultats.</p>}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spw-search-field.entry.js","sources":["src/components/spw-search-field/spw-search-field.scss?tag=spw-search-field&encapsulation=shadow","src/components/spw-search-field/spw-search-field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-search-field {\n  position: relative;\n  &--large {\n    spw-text-field {\n      --spw-input-height: 54px;\n      --spw-input-padding: 16px 24px;\n      --spw-input-radius: 60px;\n      --spw-input-border: transparent;\n      --spw-input-icon-search-color: var(--spw-ds-primary);\n    }\n  }\n\n  &--has-submit-button {\n    spw-text-field {\n      --spw-input-padding-right: 56px;\n    }\n  }\n}\n\n.spw-search-field__submit {\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 40px;\n  height: 40px;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  z-index: 10;\n\n  .spw-search-field--large & {\n    width: 46px;\n    height: 46px;\n    right: 16px;\n  }\n}\n\n.spw-search-field__options {\n  position: absolute;\n  width: 100%;\n  background-color: #fff;\n  border: 1px solid var(--spw-color-themes-grey-grey-800);\n  border-radius: 0 0 4px 4px;\n  max-height: 200px;\n  overflow-y: auto;\n  z-index: 44;\n  margin-top: -2px;\n  transition:\n    transform 0.3s ease,\n    opacity 0.3s ease;\n  .spw-search-field--is-rounded & {\n    border-radius: 24px;\n    margin-top: 12px;\n    ul {\n      padding: 12px;\n    }\n  }\n}\n\n.spw-search-field__options--down {\n  top: 100%;\n  transform: translateY(0);\n}\n\n.spw-search-field__options--up {\n  top: 100%;\n  transform: translateY(0);\n}\n\n.spw-search-field__option {\n  padding: 12px;\n  color: var(--spw-color-themes-grey-grey-900);\n  text-align: left;\n  border-bottom: 1px solid var(--spw-color-themes-grey-grey-900);\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n\n  .spw-search-field--is-rounded & {\n    border-radius: 12px;\n    padding: 12px;\n    border-bottom: none;\n  }\n\n  &:hover {\n    background-color: var(--spw-color-themes-grey-grey-200);\n  }\n\n  &:last-child {\n    border-bottom: none;\n  }\n\n  &--focused {\n    background-color: var(--spw-color-themes-grey-grey-300);\n  }\n\n  &--selected {\n    font-weight: 700;\n  }\n}\n\n.spw-search-field__no-results {\n  padding: 12px;\n  cursor: not-allowed;\n  text-align: left;\n  color: var(--spw-color-themes-grey-grey-600);\n  .spw-search-field--is-rounded & {\n    padding: 24px;\n  }\n}\n\n.spw-search-field__view-all {\n  position: sticky;\n  bottom: 0;\n  cursor: pointer;\n  font-weight: 700;\n\n  .spw-search-field--is-rounded & {\n    border-radius: 12px;\n    border-top: none;\n  }\n\n  a {\n    color: black;\n    background: white;\n    border-top: 1px solid var(--spw-color-themes-grey-grey-900);\n    .spw-search-field--is-rounded & {\n      color: var(--spw-ds-primary);\n      padding: 12px 24px 24px 24px;\n      border-top: none;\n    }\n    text-decoration: underline;\n    display: block;\n    width: 100%;\n    padding: 12px;\n    display: inline-flex;\n    justify-content: space-between;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, Method, h, Watch, Element } from '@stencil/core';\n\n@Component({\n  tag: 'spw-search-field',\n  styleUrl: 'spw-search-field.scss',\n  shadow: true,\n})\nexport class SpwSearchField {\n  @Element() el: HTMLElement;\n  private hostElement: HTMLElement;\n  private hiddenInput: HTMLInputElement;\n\n  /** Événement émis lorsque la valeur du champ de recherche change */\n  @Event() valueChanged: EventEmitter<string>;\n\n  /** Liste des éléments à filtrer, passée sous forme de chaîne JSON */\n  @Prop() items?: string;\n  /** Placeholder à afficher dans le champ de recherche */\n  @Prop() placeholder: string = 'Recherche...';\n  /** Taille du champ de recherche */\n  @Prop() size?: 'large' | 'medium' = 'medium';\n  /** Label associé au champ de recherche */\n  @Prop() label?: string = '';\n  /** Indique si le champ de recherche est désactivé */\n  @Prop() disabled?: boolean;\n  /** Indique si le champ de recherche est arrondi ou pas (communément utilisé dans un hero banner) */\n  @Prop() isRounded?: boolean;\n  /** Nom du champ de recherche, utilisé pour les formulaires */\n  @Prop() name: string;\n  /** Indique si le champ est requis */\n  @Prop() required?: boolean = false;\n  /** Texte d'assistance affiché sous le champ de recherche */\n  @Prop() assistiveText?: string;\n  /** Texte du lien pour voir tous les résultats */\n  @Prop() viewAllResults?: string = 'Voir plus de résultats';\n  /** URL vers laquelle renvoie le lien \"voir tous les résultats\" */\n  @Prop() viewAllResultsLink?: string;\n  /** Texte à afficher si pas de résultats */\n  @Prop() noResults?: string = 'Pas de résultats.';\n  /** Affiche un bouton submit (loupe) qui déclenche le submit du formulaire parent */\n  @Prop() hasSubmitButton?: boolean = false;\n\n  @State() filteredItems: Array<{ url?: string; label: string; category?: string }> = [];\n  @State() searchText: string = '';\n  @State() isOpen: boolean = false;\n  @State() focusedItemIndex: number | null = null;\n  @State() dropdownDirection: 'up' | 'down' = 'down';\n\n  componentWillLoad() {\n    if (this.items) {\n      this.parseItems(this.items);\n    } else {\n      this.filteredItems = [];\n    }\n  }\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleClickOutside);\n    this.createHiddenInput();\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n    if (this.hiddenInput && this.hiddenInput.parentNode) {\n      this.hiddenInput.parentNode.removeChild(this.hiddenInput);\n    }\n  }\n\n  private createHiddenInput() {\n    if (this.name) {\n      this.hiddenInput = document.createElement('input');\n      this.hiddenInput.type = 'hidden';\n      this.hiddenInput.name = this.name;\n      this.hiddenInput.value = this.searchText;\n      this.el.appendChild(this.hiddenInput);\n    }\n  }\n\n  private updateHiddenInput() {\n    if (this.hiddenInput) {\n      this.hiddenInput.value = this.searchText;\n    }\n  }\n\n  /** Réinitialise le champ de recherche */\n  @Method()\n  async resetInput() {\n    this.searchText = '';\n    this.updateHiddenInput();\n    this.isOpen = false;\n    this.focusedItemIndex = null;\n    this.valueChanged.emit(this.searchText);\n  }\n\n  /** Définit la valeur du champ de recherche */\n  @Method()\n  async setValue(value: string) {\n    this.searchText = value;\n    this.updateHiddenInput();\n    this.filterItems();\n    this.valueChanged.emit(this.searchText);\n  }\n\n  /** Récupère la valeur actuelle du champ de recherche */\n  @Method()\n  async getValue(): Promise<string> {\n    return this.searchText;\n  }\n\n  @Watch('items')\n  parseItems(newValue: string) {\n    if (!newValue) {\n      this.filteredItems = [];\n      return;\n    }\n\n    try {\n      this.filteredItems = JSON.parse(newValue);\n    } catch (e) {\n      console.error('Invalid JSON format for items:', newValue);\n      this.filteredItems = [];\n    }\n  }\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.isOpen) {\n      const target = event.composedPath()[0] as Node;\n      const isInsideHost = this.hostElement.contains(target);\n\n      if (!isInsideHost) {\n        this.isOpen = false;\n      }\n    }\n  };\n\n  private handleValueChanged = (event: CustomEvent<string | number>) => {\n    const newValue = String(event.detail);\n    this.searchText = newValue;\n    this.updateHiddenInput();\n    this.filterItems();\n    this.determineDropdownDirection();\n\n    if (!this.searchText) {\n      this.isOpen = false;\n    } else {\n      this.isOpen = true;\n    }\n\n    this.valueChanged.emit(this.searchText);\n  };\n\n  private filterItems() {\n    if (!this.items) {\n      this.filteredItems = [];\n      return;\n    }\n\n    const normalizedSearchText = this.normalizeString(this.searchText);\n\n    this.filteredItems = JSON.parse(this.items).filter(item => this.normalizeString(item.label).includes(normalizedSearchText));\n  }\n\n  private normalizeString(str: string): string {\n    return str\n      .normalize('NFD')\n      .replace(/[\\u0300-\\u036f]/g, '')\n      .toLowerCase();\n  }\n\n  private selectItem(item: { url?: string; label: string }) {\n    this.searchText = item.label;\n    this.updateHiddenInput();\n    this.isOpen = false;\n    this.valueChanged.emit(this.searchText);\n\n    if (item.url) {\n      window.location.href = item.url;\n    }\n  }\n\n  private determineDropdownDirection() {\n    const rect = this.hostElement.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n\n    if (rect.bottom + 200 > viewportHeight && rect.top > 200) {\n      this.dropdownDirection = 'up';\n    } else {\n      this.dropdownDirection = 'down';\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (this.isOpen) {\n          this.focusedItemIndex = this.focusedItemIndex === null ? 0 : (this.focusedItemIndex + 1) % this.filteredItems.length;\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (this.isOpen) {\n          this.focusedItemIndex =\n            this.focusedItemIndex === null ? this.filteredItems.length - 1 : (this.focusedItemIndex - 1 + this.filteredItems.length) % this.filteredItems.length;\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (this.isOpen && this.focusedItemIndex !== null) {\n          this.selectItem(this.filteredItems[this.focusedItemIndex]);\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  private highlightMatch(item: string) {\n    const normalizedSearchText = this.normalizeString(this.searchText);\n    const normalizedItem = this.normalizeString(item);\n\n    const startIndex = normalizedItem.indexOf(normalizedSearchText);\n\n    if (startIndex === -1 || !this.searchText) {\n      return item;\n    }\n\n    const endIndex = startIndex + normalizedSearchText.length;\n\n    return (\n      <span>\n        {item.slice(0, startIndex)}\n        <strong>{item.slice(startIndex, endIndex)}</strong>\n        {item.slice(endIndex)}\n      </span>\n    );\n  }\n\n  private handleSubmit = (event: Event) => {\n    event.preventDefault();\n\n    this.updateHiddenInput();\n\n    const form = this.el.closest('form');\n    if (form) {\n      form.submit();\n    }\n  };\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-search-field': true,\n      'spw-search-field--is-rounded': this.isRounded,\n      'spw-search-field--has-submit-button': this.hasSubmitButton,\n      [`spw-search-field--${this.size}`]: true,\n    };\n  }\n\n  render() {\n    return (\n      <div ref={el => (this.hostElement = el as HTMLElement)} class={this.elementClass}>\n        <spw-text-field\n          placeholder={this.placeholder}\n          name={this.name}\n          label={this.label}\n          size={this.size}\n          is-search={true}\n          is-clear={true}\n          required={this.required}\n          disabled={this.disabled}\n          assistiveText={this.assistiveText}\n          value={this.searchText}\n          onValueChanged={this.handleValueChanged}\n          onKeyDown={event => this.handleKeyDown(event)}\n        ></spw-text-field>\n        {this.hasSubmitButton && <button type=\"button\" class=\"spw-search-field__submit\" onClick={this.handleSubmit} aria-label=\"Rechercher\"></button>}\n        {this.isOpen && !!this.items && (\n          <div class={`spw-search-field__options spw-search-field__options--${this.dropdownDirection}`}>\n            {!!this.filteredItems.length && (\n              <ul>\n                {this.filteredItems.map((item, index) => (\n                  <li\n                    class={{\n                      'spw-search-field__option': true,\n                      'spw-search-field__option--focused': index === this.focusedItemIndex,\n                    }}\n                    onClick={() => this.selectItem(item)}\n                  >\n                    {this.highlightMatch(item.label)} {item.category && <span class=\"spw-tw-italic\"> - {item.category}</span>}\n                  </li>\n                ))}\n              </ul>\n            )}\n            {!this.filteredItems.length && <p class=\"spw-search-field__no-results\">{this.noResults}</p>}\n            {!!this.filteredItems.length && this.viewAllResults && this.viewAllResultsLink && (\n              <p class=\"spw-search-field__view-all\">\n                <a href={this.viewAllResultsLink}>\n                  {this.viewAllResults} <spw-icon icon=\"fa-arrow-right\"></spw-icon>\n                </a>\n              </p>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/spw-select.entry.js

@@ -123,8 +123,10 @@ const SpwSelect = class {
                 const option = document.createElement('option');
                 const value = this.itemValue ? item[this.itemValue] : item;
                 const label = this.itemLabel ? item[this.itemLabel] : item;
+                const disabled = item.disabled || false;
                 option.value = String(value);
                 option.textContent = String(label);
+                option.disabled = disabled;
                 this.selectElement.appendChild(option);
             });
         }
@@ -161,7 +163,7 @@ const SpwSelect = class {
         };
     }
     render() {
-        return (h(Host, { key: '17dff311dbe9762fe0d38f1949f012767e9a2b51' }, h("div", { key: '0fc7e6d39e182c1044bb5b3d117110d44316a958', class: this.elementClass }, this.label && h("spw-field-label", { key: '6a4eda2b4ff3caefb9b05b12b1581274f1be10a6', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: 'f0b09de81771bc5008bb58c0b90ff15e5a4615b6', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'ac1906e5238eb49410d2a2f534b56b2f9853e7aa', class: "spw-select__container" }, h("select", { key: 'e1e817c838f15973a6ef86672e15eca40b740d33', id: this.name, class: "spw-select__trigger", onChange: event => this.handleSelectChange(event), disabled: this.disabled, ref: el => (this.selectElement = el), tabindex: this.disabled ? -1 : 0 }, h("option", { key: 'a5e2727f8418964b03462f16b266d1cbb8cac425', value: "", disabled: true, selected: !this.internalValue }, this.placeholder)), h("spw-icon", { key: 'fe958cab33e002cab576bffd8f720feeeaf455d1', class: "spw-select__arrow", icon: "fa-chevron-down" })), !this.items && h("slot", { key: '5e81d8b62ce0e59dd25204aa7a88ccdaf413722e' })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+        return (h(Host, { key: 'deb7266660e609a3e44623613a990bf8dcbe7343' }, h("div", { key: 'ff425d15ea0fd790039e72674d7657324b3c62cb', class: this.elementClass }, this.label && h("spw-field-label", { key: '71f35858b08561f526d52498aa04da0b7dd46c57', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: '1e0b80d55ae61be1d161fc4dcad2e5abb0d3b351', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '3af822dbdc83f589aad041fd6fd0cb7cd43be639', class: "spw-select__container" }, h("select", { key: '727b2f5f46ac0610f91da0eeb13530ec99dc98a3', id: this.name, class: "spw-select__trigger", onChange: event => this.handleSelectChange(event), disabled: this.disabled, ref: el => (this.selectElement = el), tabindex: this.disabled ? -1 : 0 }, h("option", { key: '54fdb7a9268d4e796cc2cf6e70642719668ac3a7', value: "", disabled: true, selected: !this.internalValue }, this.placeholder)), h("spw-icon", { key: '345e115df06ae4373a0d910947997d4f2f7cd2d4', class: "spw-select__arrow", icon: "fa-chevron-down" })), !this.items && h("slot", { key: 'ca10c23f8e7e9b7422d479b5b648f661c6d431a0' })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/spw-select.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-select.entry.js","sources":["src/components/spw-select/spw-select.scss?tag=spw-select&encapsulation=shadow","src/components/spw-select/spw-select.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-select {\n  position: relative;\n  &__container {\n    position: relative;\n  }\n  &__arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 12px;\n    pointer-events: none;\n    color: var(--spw-color-themes-grey-grey-600);\n    font-size: 16px;\n  }\n  &__trigger {\n    width: 100%;\n    height: 40px;\n    border-radius: 4px;\n    border: 1px solid var(--spw-color-themes-grey-grey-800);\n    background-color: #fff;\n    font-size: 16px;\n    color: var(--spw-color-themes-grey-grey-800);\n    position: relative;\n    padding: 0;\n    margin: 0;\n    appearance: none;\n    padding: 0 12px;\n    padding-right: 40px;\n\n    &:hover {\n      outline: 4px solid var(--spw-color-themes-grey-grey-300);\n    }\n\n    &:focus-visible {\n      outline: 3px solid white;\n      outline-offset: 0;\n      box-shadow: 0 0 0 6px black;\n    }\n\n    &::after {\n      content: '\\f078';\n      font-family: var(--spw-ds-font-icons-solid);\n      font-weight: 900;\n      font-size: 14px;\n      color: var(--spw-color-themes-grey-grey-800);\n      position: absolute;\n      right: 10px;\n      top: 50%;\n      transform: translateY(-50%);\n      pointer-events: none;\n    }\n\n    .spw-select--is-error & {\n      border-color: var(--spw-colors-states-error-error-300);\n    }\n\n    .spw-select--large & {\n      height: 60px;\n      padding: 0 24px;\n      font-size: 18px;\n    }\n\n    .spw-select--disabled & {\n      border-color: var(--spw-color-themes-grey-grey-400);\n      background: var(--spw-color-themes-grey-grey-100);\n      color: var(--spw-color-themes-grey-grey-500);\n      cursor: not-allowed;\n      &::placeholder {\n        color: var(--spw-color-themes-grey-grey-500);\n      }\n      &:hover,\n      &:focus,\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n}\n","import { AttachInternals, Host, Component, Method, Prop, State, Event, EventEmitter, h, Element, Watch } from '@stencil/core';\n\nexport interface SelectItem {\n  label: string;\n  value: string | number;\n}\n\n@Component({\n  tag: 'spw-select',\n  styleUrl: 'spw-select.scss',\n  formAssociated: true,\n  shadow: true,\n})\nexport class SpwSelect {\n  @Element() el: HTMLSpwSelectElement;\n\n  /** Emet un event si la valeur change */\n  @Event() valueChanged: EventEmitter<string | number>;\n  @State() internalValue: string | number;\n\n  /** Valeur sélectionnée actuelle, mutable et reflétée dans le DOM */\n  @Prop({ mutable: true, reflect: true }) value: string | number;\n  /** Label associé au champ de sélection */\n  @Prop() label: string = '';\n  /** Texte du placeholder à afficher lorsque rien n'est sélectionné */\n  @Prop() placeholder: string = 'Sélectionner une option';\n  /** Indique si le champ de sélection est désactivé */\n  @Prop() disabled: boolean;\n  /** Nom de l'élément utilisé dans les formulaires pour associer la valeur sélectionnée */\n  @Prop() name: string;\n  /** Indique si la sélection est obligatoire dans le formulaire */\n  @Prop() required: boolean = false;\n  /** Taille du champ de sélection : 'large' ou 'medium' */\n  @Prop() size: 'large' | 'medium' = 'medium';\n  /** Texte d'assistance affiché sous le champ de sélection */\n  @Prop() assistiveText?: string;\n  /** Message d'erreur à afficher sous le champ de sélection */\n  @Prop() error?: string = '';\n  /** Message d'indication (hint) à afficher sous le champ de sélection */\n  @Prop() hint?: string = '';\n  /** Message de succès à afficher sous le champ de sélection */\n  @Prop() success?: string = '';\n  /** Message de warning à afficher sous le champ */\n  @Prop() warning?: string = '';\n  /** Affiche une icône d'erreur si vrai */\n  @Prop() showErrorIcon?: boolean = true;\n  /** Affiche une icône d'indication si vrai */\n  @Prop() showHintIcon?: boolean = true;\n  /** Affiche une icône de succès si vrai */\n  @Prop() showSuccessIcon?: boolean = true;\n  /** Affiche une icône de warning si vrai */\n  @Prop() showWarningIcon?: boolean = true;\n  /** Liste d'items dynamiques pour générer les options (array d'objects avec label + value) */\n  @Prop() items?: SelectItem[];\n  /** Propriété à utiliser comme label des options */\n  @Prop() itemLabel?: string;\n  /** Propriété à utiliser comme valeur des options */\n  @Prop() itemValue?: string;\n\n  private selectElement!: HTMLSelectElement;\n  private defaultValue: string | number | null = null;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Watch('items')\n  handleItemsChange() {\n    if (this.selectElement) {\n      this.syncDynamicOptions();\n    }\n  }\n\n  @Method()\n  async resetSelect() {\n    this.internalValue = '';\n    this.value = '';\n    if (this.selectElement) {\n      this.selectElement.value = '';\n    }\n    this.internals.setFormValue('');\n    this.valueChanged.emit('');\n  }\n\n  componentWillLoad() {\n    this.defaultValue = this.value ?? this.getInitialSelectedValue();\n    this.internalValue = this.value || this.getInitialSelectedValue();\n  }\n\n  componentDidLoad() {\n    this.internals.setFormValue(this.getFormValue());\n    if (!this.items) {\n      this.moveOptionsToLightDom();\n    } else {\n      this.syncDynamicOptions();\n    }\n  }\n\n  formResetCallback() {\n    this.setValue(this.defaultValue ?? '');\n    this.resetSelect();\n  }\n\n  private setValue(val: string | number) {\n    this.internalValue = val;\n    this.value = val;\n\n    if (this.selectElement) {\n      this.selectElement.value = String(val);\n    }\n\n    this.internals.setFormValue(this.getFormValue());\n    this.valueChanged.emit(this.internalValue);\n  }\n\n  private getFormValue(): string | null {\n    return this.internalValue ? String(this.internalValue) : null;\n  }\n\n  private getInitialSelectedValue(): string | number | null {\n    if (this.items && this.items.length > 0) {\n      return null;\n    }\n    const assignedNodes = Array.from(this.el.querySelectorAll('option')) as HTMLOptionElement[];\n    for (const option of assignedNodes) {\n      if (option.hasAttribute('selected')) {\n        return option.getAttribute('value');\n      }\n    }\n    return null;\n  }\n\n  private handleSelectChange(event: Event) {\n    const select = event.target as HTMLSelectElement;\n    this.internalValue = select.value;\n    this.value = this.internalValue;\n    this.internals.setFormValue(this.getFormValue());\n    this.valueChanged.emit(this.internalValue);\n  }\n\n  private moveOptionsToLightDom() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    if (slot) {\n      const assignedNodes = slot.assignedNodes({ flatten: true }) as HTMLElement[];\n      assignedNodes.forEach(node => {\n        if (node.nodeName === 'OPTION' || node.nodeName === 'OPTGROUP') {\n          this.selectElement.appendChild(node);\n        }\n      });\n    }\n  }\n\n  private syncDynamicOptions() {\n    while (this.selectElement.options.length > 1) {\n      this.selectElement.remove(1);\n    }\n\n    if (this.items && this.items.length > 0) {\n      this.items.forEach(item => {\n        const option = document.createElement('option');\n        const value = this.itemValue ? item[this.itemValue] : item;\n        const label = this.itemLabel ? item[this.itemLabel] : item;\n        option.value = String(value);\n        option.textContent = String(label);\n        this.selectElement.appendChild(option);\n      });\n    }\n\n    if (this.selectElement.value !== String(this.internalValue || '')) {\n      this.selectElement.value = String(this.internalValue || '');\n    }\n  }\n\n  private renderErrorMessage() {\n    if (this.error) {\n      return (\n        <spw-field-message variant=\"error\" showIcon={this.showErrorIcon}>\n          {this.error}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private renderHintMessage() {\n    if (this.hint) {\n      return (\n        <spw-field-message variant=\"hint\" showIcon={this.showHintIcon}>\n          {this.hint}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private renderSuccessMessage() {\n    if (this.success) {\n      return (\n        <spw-field-message variant=\"success\" showIcon={this.showSuccessIcon}>\n          {this.success}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private renderWarningMessage() {\n    if (this.warning) {\n      return (\n        <spw-field-message variant=\"warning\" showIcon={this.showWarningIcon}>\n          {this.warning}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-select': true,\n      [`spw-select--${this.size}`]: true,\n      'spw-select--disabled': this.disabled,\n      'spw-select--is-error': !!this.error,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.elementClass}>\n          {this.label && <spw-field-label label={this.label} name={this.name} required={this.required}></spw-field-label>}\n          {this.assistiveText && (\n            <spw-field-message class=\"spw-tw-mb-2 -spw-tw-mt-1\" variant=\"hint\" showIcon={false}>\n              {this.assistiveText}\n            </spw-field-message>\n          )}\n          <div class=\"spw-select__container\">\n            <select\n              id={this.name}\n              class=\"spw-select__trigger\"\n              onChange={event => this.handleSelectChange(event)}\n              disabled={this.disabled}\n              ref={el => (this.selectElement = el as HTMLSelectElement)}\n              tabindex={this.disabled ? -1 : 0}\n            >\n              <option value=\"\" disabled selected={!this.internalValue}>\n                {this.placeholder}\n              </option>\n            </select>\n            <spw-icon class=\"spw-select__arrow\" icon=\"fa-chevron-down\"></spw-icon>\n          </div>\n          {!this.items && <slot />}\n        </div>\n        {this.renderErrorMessage()}\n        {this.renderHintMessage()}\n        {this.renderSuccessMessage()}\n        {this.renderWarningMessage()}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spw-select.entry.js","sources":["src/components/spw-select/spw-select.scss?tag=spw-select&encapsulation=shadow","src/components/spw-select/spw-select.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-select {\n  position: relative;\n  &__container {\n    position: relative;\n  }\n  &__arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 12px;\n    pointer-events: none;\n    color: var(--spw-color-themes-grey-grey-600);\n    font-size: 16px;\n  }\n  &__trigger {\n    width: 100%;\n    height: 40px;\n    border-radius: 4px;\n    border: 1px solid var(--spw-color-themes-grey-grey-800);\n    background-color: #fff;\n    font-size: 16px;\n    color: var(--spw-color-themes-grey-grey-800);\n    position: relative;\n    padding: 0;\n    margin: 0;\n    appearance: none;\n    padding: 0 12px;\n    padding-right: 40px;\n\n    &:hover {\n      outline: 4px solid var(--spw-color-themes-grey-grey-300);\n    }\n\n    &:focus-visible {\n      outline: 3px solid white;\n      outline-offset: 0;\n      box-shadow: 0 0 0 6px black;\n    }\n\n    &::after {\n      content: '\\f078';\n      font-family: var(--spw-ds-font-icons-solid);\n      font-weight: 900;\n      font-size: 14px;\n      color: var(--spw-color-themes-grey-grey-800);\n      position: absolute;\n      right: 10px;\n      top: 50%;\n      transform: translateY(-50%);\n      pointer-events: none;\n    }\n\n    .spw-select--is-error & {\n      border-color: var(--spw-colors-states-error-error-300);\n    }\n\n    .spw-select--large & {\n      height: 60px;\n      padding: 0 24px;\n      font-size: 18px;\n    }\n\n    .spw-select--disabled & {\n      border-color: var(--spw-color-themes-grey-grey-400);\n      background: var(--spw-color-themes-grey-grey-100);\n      color: var(--spw-color-themes-grey-grey-500);\n      cursor: not-allowed;\n      &::placeholder {\n        color: var(--spw-color-themes-grey-grey-500);\n      }\n      &:hover,\n      &:focus,\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n}\n","import { AttachInternals, Host, Component, Method, Prop, State, Event, EventEmitter, h, Element, Watch } from '@stencil/core';\n\nexport interface SelectItem {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n}\n\n@Component({\n  tag: 'spw-select',\n  styleUrl: 'spw-select.scss',\n  formAssociated: true,\n  shadow: true,\n})\nexport class SpwSelect {\n  @Element() el: HTMLSpwSelectElement;\n\n  /** Emet un event si la valeur change */\n  @Event() valueChanged: EventEmitter<string | number>;\n  @State() internalValue: string | number;\n\n  /** Valeur sélectionnée actuelle, mutable et reflétée dans le DOM */\n  @Prop({ mutable: true, reflect: true }) value: string | number;\n  /** Label associé au champ de sélection */\n  @Prop() label: string = '';\n  /** Texte du placeholder à afficher lorsque rien n'est sélectionné */\n  @Prop() placeholder: string = 'Sélectionner une option';\n  /** Indique si le champ de sélection est désactivé */\n  @Prop() disabled: boolean;\n  /** Nom de l'élément utilisé dans les formulaires pour associer la valeur sélectionnée */\n  @Prop() name: string;\n  /** Indique si la sélection est obligatoire dans le formulaire */\n  @Prop() required: boolean = false;\n  /** Taille du champ de sélection : 'large' ou 'medium' */\n  @Prop() size: 'large' | 'medium' = 'medium';\n  /** Texte d'assistance affiché sous le champ de sélection */\n  @Prop() assistiveText?: string;\n  /** Message d'erreur à afficher sous le champ de sélection */\n  @Prop() error?: string = '';\n  /** Message d'indication (hint) à afficher sous le champ de sélection */\n  @Prop() hint?: string = '';\n  /** Message de succès à afficher sous le champ de sélection */\n  @Prop() success?: string = '';\n  /** Message de warning à afficher sous le champ */\n  @Prop() warning?: string = '';\n  /** Affiche une icône d'erreur si vrai */\n  @Prop() showErrorIcon?: boolean = true;\n  /** Affiche une icône d'indication si vrai */\n  @Prop() showHintIcon?: boolean = true;\n  /** Affiche une icône de succès si vrai */\n  @Prop() showSuccessIcon?: boolean = true;\n  /** Affiche une icône de warning si vrai */\n  @Prop() showWarningIcon?: boolean = true;\n  /** Liste d'items dynamiques pour générer les options (array d'objects avec label + value) */\n  @Prop() items?: SelectItem[];\n  /** Propriété à utiliser comme label des options */\n  @Prop() itemLabel?: string;\n  /** Propriété à utiliser comme valeur des options */\n  @Prop() itemValue?: string;\n\n  private selectElement!: HTMLSelectElement;\n  private defaultValue: string | number | null = null;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Watch('items')\n  handleItemsChange() {\n    if (this.selectElement) {\n      this.syncDynamicOptions();\n    }\n  }\n\n  @Method()\n  async resetSelect() {\n    this.internalValue = '';\n    this.value = '';\n    if (this.selectElement) {\n      this.selectElement.value = '';\n    }\n    this.internals.setFormValue('');\n    this.valueChanged.emit('');\n  }\n\n  componentWillLoad() {\n    this.defaultValue = this.value ?? this.getInitialSelectedValue();\n    this.internalValue = this.value || this.getInitialSelectedValue();\n  }\n\n  componentDidLoad() {\n    this.internals.setFormValue(this.getFormValue());\n    if (!this.items) {\n      this.moveOptionsToLightDom();\n    } else {\n      this.syncDynamicOptions();\n    }\n  }\n\n  formResetCallback() {\n    this.setValue(this.defaultValue ?? '');\n    this.resetSelect();\n  }\n\n  private setValue(val: string | number) {\n    this.internalValue = val;\n    this.value = val;\n\n    if (this.selectElement) {\n      this.selectElement.value = String(val);\n    }\n\n    this.internals.setFormValue(this.getFormValue());\n    this.valueChanged.emit(this.internalValue);\n  }\n\n  private getFormValue(): string | null {\n    return this.internalValue ? String(this.internalValue) : null;\n  }\n\n  private getInitialSelectedValue(): string | number | null {\n    if (this.items && this.items.length > 0) {\n      return null;\n    }\n    const assignedNodes = Array.from(this.el.querySelectorAll('option')) as HTMLOptionElement[];\n    for (const option of assignedNodes) {\n      if (option.hasAttribute('selected')) {\n        return option.getAttribute('value');\n      }\n    }\n    return null;\n  }\n\n  private handleSelectChange(event: Event) {\n    const select = event.target as HTMLSelectElement;\n    this.internalValue = select.value;\n    this.value = this.internalValue;\n    this.internals.setFormValue(this.getFormValue());\n    this.valueChanged.emit(this.internalValue);\n  }\n\n  private moveOptionsToLightDom() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    if (slot) {\n      const assignedNodes = slot.assignedNodes({ flatten: true }) as HTMLElement[];\n      assignedNodes.forEach(node => {\n        if (node.nodeName === 'OPTION' || node.nodeName === 'OPTGROUP') {\n          this.selectElement.appendChild(node);\n        }\n      });\n    }\n  }\n\n  private syncDynamicOptions() {\n    while (this.selectElement.options.length > 1) {\n      this.selectElement.remove(1);\n    }\n\n    if (this.items && this.items.length > 0) {\n      this.items.forEach(item => {\n        const option = document.createElement('option');\n        const value = this.itemValue ? item[this.itemValue] : item;\n        const label = this.itemLabel ? item[this.itemLabel] : item;\n        const disabled = item.disabled || false;\n        option.value = String(value);\n        option.textContent = String(label);\n        option.disabled = disabled;\n        this.selectElement.appendChild(option);\n      });\n    }\n\n    if (this.selectElement.value !== String(this.internalValue || '')) {\n      this.selectElement.value = String(this.internalValue || '');\n    }\n  }\n\n  private renderErrorMessage() {\n    if (this.error) {\n      return (\n        <spw-field-message variant=\"error\" showIcon={this.showErrorIcon}>\n          {this.error}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private renderHintMessage() {\n    if (this.hint) {\n      return (\n        <spw-field-message variant=\"hint\" showIcon={this.showHintIcon}>\n          {this.hint}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private renderSuccessMessage() {\n    if (this.success) {\n      return (\n        <spw-field-message variant=\"success\" showIcon={this.showSuccessIcon}>\n          {this.success}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private renderWarningMessage() {\n    if (this.warning) {\n      return (\n        <spw-field-message variant=\"warning\" showIcon={this.showWarningIcon}>\n          {this.warning}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-select': true,\n      [`spw-select--${this.size}`]: true,\n      'spw-select--disabled': this.disabled,\n      'spw-select--is-error': !!this.error,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.elementClass}>\n          {this.label && <spw-field-label label={this.label} name={this.name} required={this.required}></spw-field-label>}\n          {this.assistiveText && (\n            <spw-field-message class=\"spw-tw-mb-2 -spw-tw-mt-1\" variant=\"hint\" showIcon={false}>\n              {this.assistiveText}\n            </spw-field-message>\n          )}\n          <div class=\"spw-select__container\">\n            <select\n              id={this.name}\n              class=\"spw-select__trigger\"\n              onChange={event => this.handleSelectChange(event)}\n              disabled={this.disabled}\n              ref={el => (this.selectElement = el as HTMLSelectElement)}\n              tabindex={this.disabled ? -1 : 0}\n            >\n              <option value=\"\" disabled selected={!this.internalValue}>\n                {this.placeholder}\n              </option>\n            </select>\n            <spw-icon class=\"spw-select__arrow\" icon=\"fa-chevron-down\"></spw-icon>\n          </div>\n          {!this.items && <slot />}\n        </div>\n        {this.renderErrorMessage()}\n        {this.renderHintMessage()}\n        {this.renderSuccessMessage()}\n        {this.renderWarningMessage()}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/spw-sidebar-navigation-dropdown.entry.js

@@ -15,7 +15,7 @@ const SpwSidebarNavigationDropdown = class {
         };
     }
     render() {
-        return (h(Host, { key: '02e55fcb6e035e1c2c89c378f6c12e5142b93456', class: this.classes }, h("div", { key: '6938fe3452c3d5b0f7076648d8df01520aad9a04', class: "spw-sidebar-navigation-dropdown__content", style: { display: this.open ? 'block' : 'none' } }, h("slot", { key: '925365f2fb7cec831414a24a45cf292d4080d452' }))));
+        return (h(Host, { key: 'a7c1acec0c8bd09d869525b1b2b96bf9df0ab61e', class: this.classes }, h("div", { key: 'ab68824586c9badafd73e4a0c4695a163df21015', class: "spw-sidebar-navigation-dropdown__content", style: { display: this.open ? 'block' : 'none' } }, h("slot", { key: '01ab71cc87c554a70e8cebfcc1de32e52789936f' }))));
     }
 };
 SpwSidebarNavigationDropdown.style = spwSidebarNavigationDropdownCss;