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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spw-ds/spw-stencil-library",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "Design System du SPW. Librairie Stencil.",
   "readme": "../../README.md",
   "main": "dist/index.cjs.js",

package/dist/spw-stencil-library/p-300b4bdb.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,H as a,g as o}from"./p-CvfVJV8a.js";const n='/*! 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;width:100%}: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)}}@media (min-width:1024px){:host{display:contents;width:auto}}.spw-header-navigation-item{background:#fff;color:var(--spw-colors-support-grey-grey-900);font-size:16px;font-weight:700}@media (max-width:1023px){.spw-header-navigation-item ::slotted(a:hover){color:var(--spw-ds-primary)!important}}:host([data-level="1"]) .spw-header-navigation-item ::slotted(a){font-size:20px;padding:24px 16px;position:relative}:host([data-level="1"]) .spw-header-navigation-item ::slotted(a):before{background:var(--spw-colors-support-grey-grey-300);content:"";height:1px;left:16px;position:absolute;top:0;width:calc(100% - 32px)}@media (min-width:1024px){:host([data-level="1"]) .spw-header-navigation-item ::slotted(a){border-bottom:0;font-size:16px;padding:20px 16px}:host([data-level="1"]) .spw-header-navigation-item ::slotted(a):before{background:var(--spw-ds-primary);bottom:0;content:"";height:3px;left:16px;position:absolute;top:auto;width:0}:host([data-level="1"]) .spw-header-navigation-item:hover ::slotted(spw-header-navigation-dropdown){margin-left:16px;opacity:1;pointer-events:auto;top:100%;transition:opacity .1s ease-in}:host([data-level="1"]) .spw-header-navigation-item:hover ::slotted(a){color:var(--spw-ds-primary)!important}:host([data-level="1"]) .spw-header-navigation-item:hover ::slotted(a):before{width:calc(100% - 32px)}}:host([data-level="1"]) .spw-header-navigation-item--has-subnav ::slotted(a):after{content:"\\f054";font-family:var(--spw-ds-font-icons-solid);font-size:18px}@media (min-width:1024px){:host([data-level="1"]) .spw-header-navigation-item--has-subnav ::slotted(a):after{content:"\\f078";font-size:14px}}:host([data-level="1"]) .spw-header-navigation-item--is-subnav-visible ::slotted(spw-header-navigation-dropdown){z-index:10}:host([data-level="1"]) .spw-header-navigation-item--is-subnav-visible ::slotted(a):after{content:"\\f054"}@media (min-width:1024px){:host([data-level="1"]) .spw-header-navigation-item--is-subnav-visible ::slotted(a):after{content:"\\f078"}}:host([data-level="2"]) .spw-header-navigation-item ::slotted(a){font-size:18px;font-weight:400;padding:12px 16px}@media (min-width:1024px){:host([data-level="2"]) .spw-header-navigation-item ::slotted(a){font-size:16px;font-weight:700;padding:20px}:host([data-level="2"]) .spw-header-navigation-item:hover ::slotted(spw-header-navigation-dropdown){left:100%;opacity:1;pointer-events:auto;top:0;transition:opacity .1s ease-in;z-index:38}:host([data-level="2"]) .spw-header-navigation-item:hover ::slotted(a){background:var(--spw-colors-support-grey-grey-100);color:var(--spw-ds-primary)!important}:host([data-level="2"]) .spw-header-navigation-item:hover ::slotted(a):before{display:none}}:host([data-level="2"]) .spw-header-navigation-item--has-subnav ::slotted(a):after{content:"\\f054";font-family:var(--spw-ds-font-icons-solid);font-weight:700}:host([data-level="2"]) .spw-header-navigation-item--is-subnav-visible ::slotted(spw-header-navigation-dropdown){z-index:11}:host([data-level="2"]) .spw-header-navigation-item--is-subnav-visible ::slotted(a):after{content:"\\f054"}:host([data-level="3"]) .spw-header-navigation-item ::slotted(a){font-size:16px;font-weight:400;padding:12px 16px}@media (min-width:1024px){:host([data-level="3"]) .spw-header-navigation-item ::slotted(a){font-size:16px;font-weight:700;padding:20px}:host([data-level="3"]) .spw-header-navigation-item ::slotted(a:hover){color:var(--spw-ds-primary)!important}}:host([data-level="3"]) .spw-header-navigation-item--is-subnav-visible ::slotted(spw-header-navigation-dropdown){z-index:12}.spw-header-navigation-item--is-active ::slotted(a){color:var(--spw-ds-primary)!important}.spw-header-navigation-item ::slotted(a){align-items:center;color:inherit;display:inline-flex;gap:8px;justify-content:space-between;padding:16px 0;position:relative;text-decoration:none;width:100%}@media (min-width:1024px){.spw-header-navigation-item ::slotted(a){padding:16px}.spw-header-navigation-item ::slotted(a):before{background:var(--spw-ds-primary);bottom:0;content:"";height:5px;left:16px;position:absolute;transition:width .2s ease-in;width:0}}.spw-header-navigation-item ::slotted(a:focus-visible){box-shadow:0 0 0 3px #000;outline:3px solid #fff;outline-offset:-3px}.spw-header-navigation-item ::slotted(a:active){color:var(--spw-ds-primary)!important}.spw-header-navigation-item ::slotted(spw-header-navigation-dropdown){display:none;opacity:0}@media (min-width:1024px){.spw-header-navigation-item ::slotted(spw-header-navigation-dropdown){box-shadow:var(--spw-effect-elevation-8);display:block;opacity:0;pointer-events:none;position:absolute;width:320px}}@media (max-width:1023px){.spw-header-navigation-item--is-subnav-visible ::slotted(spw-header-navigation-dropdown){background:#fff;display:block;left:0;margin-top:0;min-height:100%;opacity:1;overflow-y:auto;padding-top:132px;position:absolute;top:0;width:100%}}.spw-header-navigation-item__top{background:#fff;border-bottom:1px solid var(--spw-colors-support-grey-grey-300);display:flex;flex-direction:column;height:118px;justify-content:space-between;left:16px;padding:24px 0;position:absolute;top:0;width:calc(100% - 32px);z-index:9999999}.spw-header-navigation-item__top-back{align-items:center;color:var(--spw-colors-support-grey-grey-900);display:flex;font-size:14px;font-weight:700;gap:8px;justify-content:left;text-decoration:none}.spw-header-navigation-item__top-back span{text-decoration:underline}.spw-header-navigation-item__top-back spw-icon{font-size:18px}.spw-header-navigation-item__top-title a{color:var(--spw-colors-support-grey-grey-900);display:block;font-size:20px;font-weight:700;overflow:hidden;text-decoration:underline;text-overflow:ellipsis;white-space:nowrap}:host([data-level-visible="1"]) .spw-header-navigation-item__top--1{display:flex}@media (min-width:1024px){:host([data-level-visible="1"]) .spw-header-navigation-item__top--1{display:none}}:host([data-level-visible="2"]) .spw-header-navigation-item__top--1{display:none}:host([data-level-visible="3"]) .spw-header-navigation-item__top--1{display:none}:host([data-level-visible="1"]) .spw-header-navigation-item__top--2{display:none}:host([data-level-visible="2"]) .spw-header-navigation-item__top--2{display:flex}@media (min-width:1024px){:host([data-level-visible="2"]) .spw-header-navigation-item__top--2{display:none}}:host([data-level-visible="3"]) .spw-header-navigation-item__top--2{display:none}:host([data-level-visible="1"]) .spw-header-navigation-item__top--3{display:none}:host([data-level-visible="2"]) .spw-header-navigation-item__top--3{display:none}:host([data-level-visible="3"]) .spw-header-navigation-item__top--3{display:flex}@media (min-width:1024px){:host([data-level-visible="3"]) .spw-header-navigation-item__top--3{display:none}.spw-header-navigation-item__top{display:none}}';const s=class{constructor(i){e(this,i);this.spwHeaderNavigationNavigate=t(this,"spwHeaderNavigationNavigate",7);this.isActive=false;this.internalIsActive=false;this.hasSubnav=false;this.level=1;this.isSubnavVisible=false;this.lastClickedLevel1Item=null;this.isMobile=window.innerWidth<1024}componentWillLoad(){this.internalIsActive=this.isActive;this.checkForSubnav();this.calculateLevel();this.updateLevelClass()}componentWillUpdate(){if(this.isActive!==this.internalIsActive){this.internalIsActive=this.isActive}this.updateLevelClass()}checkForSubnav(){const e=this.el.shadowRoot.querySelector("slot");if(e){const t=e.assignedElements({flatten:true});const i=t.some((e=>e.tagName==="SPW-HEADER-NAVIGATION-DROPDOWN"));if(i!==this.hasSubnav){this.hasSubnav=i}}}calculateLevel(){let e=1;let t=this.el.parentElement;while(t&&t.tagName!=="SPW-HEADER-NAVIGATION"){if(t.tagName==="SPW-HEADER-NAVIGATION-DROPDOWN"){e++}t=t.parentElement}this.level=e}updateLevelClass(){const e=document.documentElement;Array.from(e.classList).forEach((t=>{if(t.startsWith("spw-ds-nav-level-")){e.classList.remove(t)}}));e.classList.add(`spw-ds-nav-level-${this.level}`);this.spwHeaderNavigationNavigate.emit({level:this.level,element:this.el})}toggleSubnavVisibility(e){if(!this.isMobile)return;e.stopPropagation();if(this.hasSubnav&&!this.isSubnavVisible){const t=window.matchMedia("(max-width: 1024px)").matches;if(t){e.preventDefault()}if(this.level===1){this.lastClickedLevel1Item=this.el.innerText;document.documentElement.setAttribute("data-ds-nav-level1",this.lastClickedLevel1Item)}this.isSubnavVisible=!this.isSubnavVisible;if(this.isSubnavVisible){this.level++;this.updateLevelClass()}}}getStoredLevel1Item(){return document.documentElement.getAttribute("data-ds-nav-level1")||""}handleBackClick(e){e.stopPropagation();this.isSubnavVisible=false;if(this.level>1){this.level--;this.updateLevelClass()}this.internalIsActive=false;if(this.level===1&&!this.isSubnavVisible){this.lastClickedLevel1Item=null;document.documentElement.removeAttribute("data-ds-nav-level1")}}getPageTitle(){const e=this.el.shadowRoot.querySelector("slot");if(e){const t=e.assignedElements({flatten:true});if(t.length>0){const e=t[0];const i=e.innerText||"";const a=e.href||null;const o=e.target||null;return{title:i,link:a,target:o}}}return null}async componentDidLoad(){setTimeout((()=>{this.checkForSubnav()}),0);const e=this.el.shadowRoot.querySelector("slot");if(e){const t=new MutationObserver((()=>{this.checkForSubnav()}));t.observe(e,{childList:true,subtree:true})}}render(){const e=this.getPageTitle();const t=this.getStoredLevel1Item();const o={"spw-header-navigation-item":true,"spw-header-navigation-item--has-subnav":this.hasSubnav,"spw-header-navigation-item--is-active":this.internalIsActive,"spw-header-navigation-item--is-subnav-visible":this.isSubnavVisible};return i(a,{key:"a512e941812f774ce08f6eb45e5d476ef52420dd","data-level":this.level},i("li",{key:"fd49b57a51f48863ee0922055c2281262817195a",class:o},i("div",{key:"ccc19148c0f975348990d09dc66ce7b5496e01dd",class:"spw-header-navigation-item__content",onClick:e=>this.toggleSubnavVisibility(e)},this.isSubnavVisible&&i("div",{key:"eb91eadefd53c15f541bed6dd2b2601d7fa5f24e",class:`spw-header-navigation-item__top spw-header-navigation-item__top--${this.level}`},i("div",{key:"1d1b063eef0a4a02a7f693ecb52d01c142d7eea2",class:"spw-header-navigation-item__top-back",onClick:e=>this.handleBackClick(e)},i("spw-icon",{key:"5738ed79837db0f23d467d195f94ad62f5725982",icon:"fa-chevron-left"})," ",i("span",{key:"dce53b6febdc4687064fdd746ade3bbf6f237f9a"},this.level===1?"":this.level===2?"Menu principal":t)),i("div",{key:"824529700d56c9b7bac36c09c63fc1c105a8dac7",class:"spw-header-navigation-item__top-title"},i("a",{key:"6beaff0b388e7284d9ca76d9ce9ad79c4c0bed2b",href:(e===null||e===void 0?void 0:e.link)||"#",target:(e===null||e===void 0?void 0:e.target)||"_self"},(e===null||e===void 0?void 0:e.title)||""))),i("slot",{key:"46bfcb894fe31623cfc4d45bf379276506705e0b"}))))}get el(){return o(this)}};s.style=n;export{s as spw_header_navigation_item};
-//# sourceMappingURL=p-300b4bdb.entry.js.map

package/dist/spw-stencil-library/p-300b4bdb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["spwHeaderNavigationItemCss","SpwHeaderNavigationItem","constructor","hostRef","this","isActive","internalIsActive","hasSubnav","level","isSubnavVisible","lastClickedLevel1Item","isMobile","window","innerWidth","componentWillLoad","checkForSubnav","calculateLevel","updateLevelClass","componentWillUpdate","slot","el","shadowRoot","querySelector","assignedElements","flatten","some","tagName","parent","parentElement","htmlElement","document","documentElement","Array","from","classList","forEach","className","startsWith","remove","add","spwHeaderNavigationNavigate","emit","element","toggleSubnavVisibility","event","stopPropagation","isMobileScreen","matchMedia","matches","preventDefault","innerText","setAttribute","getStoredLevel1Item","getAttribute","handleBackClick","removeAttribute","getPageTitle","length","firstElement","title","link","href","target","componentDidLoad","setTimeout","mutationObserver","MutationObserver","observe","childList","subtree","render","pageTitle","storedTitle","elementClass","h","Host","key","class","onClick","icon"],"sources":["src/components/spw-header/spw-header-navigation-item/spw-header-navigation-item.scss?tag=spw-header-navigation-item&encapsulation=shadow","src/components/spw-header/spw-header-navigation-item/spw-header-navigation-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  @include breakpoint(lg) {\n    display: contents;\n    width: auto;\n  }\n}\n\n.spw-header-navigation-item {\n  color: var(--spw-colors-support-grey-grey-900);\n  font-size: 16px;\n  font-weight: 700;\n  background: white;\n\n  ::slotted(a:hover) {\n    @include under-breakpoint(lg) {\n      color: var(--spw-ds-primary) !important;\n    }\n  }\n\n  :host([data-level='1']) & {\n    ::slotted(a) {\n      position: relative;\n      padding: 24px 16px;\n      font-size: 20px;\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 16px;\n        width: calc(100% - 32px);\n        height: 1px;\n        background: var(--spw-colors-support-grey-grey-300);\n      }\n      @include breakpoint(lg) {\n        padding: 20px 16px;\n        font-size: 16px;\n        border-bottom: 0;\n        &:before {\n          content: '';\n          position: absolute;\n          top: auto;\n          bottom: 0;\n          left: 16px;\n          width: 0;\n          height: 3px;\n          background: var(--spw-ds-primary);\n        }\n      }\n    }\n    &:hover {\n      @include breakpoint(lg) {\n        ::slotted(spw-header-navigation-dropdown) {\n          pointer-events: auto;\n          opacity: 1;\n          top: 100%;\n          margin-left: 16px;\n          transition: opacity 0.1s ease-in;\n        }\n        ::slotted(a) {\n          color: var(--spw-ds-primary) !important;\n          &:before {\n            width: calc(100% - 32px);\n          }\n        }\n      }\n    }\n\n    &--has-subnav {\n      ::slotted(a) {\n        &:after {\n          font-family: var(--spw-ds-font-icons-solid);\n          content: '\\f054';\n          font-size: 18px;\n          @include breakpoint(lg) {\n            content: '\\f078';\n            font-size: 14px;\n          }\n        }\n      }\n    }\n\n    &--is-subnav-visible {\n      ::slotted(spw-header-navigation-dropdown) {\n        z-index: 10;\n      }\n      ::slotted(a) {\n        &:after {\n          content: '\\f054';\n          @include breakpoint(lg) {\n            content: '\\f078';\n          }\n        }\n      }\n    }\n  }\n\n  :host([data-level='2']) & {\n    ::slotted(a) {\n      padding: 12px 16px;\n      font-weight: 400;\n      font-size: 18px;\n      @include breakpoint(lg) {\n        padding: 20px;\n        font-weight: 700;\n        font-size: 16px;\n      }\n    }\n    @include breakpoint(lg) {\n      &:hover {\n        ::slotted(spw-header-navigation-dropdown) {\n          pointer-events: auto;\n          opacity: 1;\n          left: 100%;\n          top: 0;\n          transition: opacity 0.1s ease-in;\n          z-index: 38;\n        }\n        ::slotted(a) {\n          color: var(--spw-ds-primary) !important;\n          background: var(--spw-colors-support-grey-grey-100);\n          &:before {\n            display: none;\n          }\n        }\n      }\n    }\n\n    &--has-subnav {\n      ::slotted(a) {\n        &:after {\n          font-family: var(--spw-ds-font-icons-solid);\n          content: '\\f054';\n          font-weight: 700;\n        }\n      }\n    }\n\n    &--is-subnav-visible {\n      ::slotted(spw-header-navigation-dropdown) {\n        z-index: 11;\n      }\n      ::slotted(a) {\n        &:after {\n          content: '\\f054';\n        }\n      }\n    }\n  }\n\n  :host([data-level='3']) & {\n    ::slotted(a) {\n      padding: 12px 16px;\n      font-weight: 400;\n      font-size: 16px;\n      @include breakpoint(lg) {\n        padding: 20px;\n        font-weight: 700;\n        font-size: 16px;\n      }\n    }\n    ::slotted(a:hover) {\n      @include breakpoint(lg) {\n        color: var(--spw-ds-primary) !important;\n      }\n    }\n    &--is-subnav-visible {\n      ::slotted(spw-header-navigation-dropdown) {\n        z-index: 12;\n      }\n    }\n  }\n\n  &--is-active {\n    ::slotted(a) {\n      color: var(--spw-ds-primary) !important;\n    }\n  }\n\n  ::slotted(a) {\n    display: inline-flex;\n    position: relative;\n    color: inherit;\n    text-decoration: none;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    width: 100%;\n    padding: 16px 0;\n    @include breakpoint(lg) {\n      padding: 16px;\n    }\n    &:before {\n      @include breakpoint(lg) {\n        content: '';\n        transition: width 0.2s ease-in;\n        bottom: 0;\n        left: 16px;\n        height: 5px;\n        width: 0;\n        position: absolute;\n        background: var(--spw-ds-primary);\n      }\n    }\n  }\n\n  ::slotted(a:focus-visible) {\n    outline: 3px solid white;\n    outline-offset: -3px;\n    box-shadow: 0 0 0 3px black;\n  }\n\n  ::slotted(a:active) {\n    color: var(--spw-ds-primary) !important;\n  }\n\n  ::slotted(spw-header-navigation-dropdown) {\n    display: none;\n    opacity: 0;\n    @include breakpoint(lg) {\n      display: block;\n      pointer-events: none;\n      opacity: 0;\n      position: absolute;\n      width: 320px;\n      box-shadow: var(--spw-effect-elevation-8);\n    }\n  }\n\n  &--is-subnav-visible {\n    ::slotted(spw-header-navigation-dropdown) {\n      @include under-breakpoint(lg) {\n        display: block;\n        opacity: 1;\n        position: absolute;\n        background: white;\n        width: 100%;\n        margin-top: 0;\n        padding-top: 132px;\n        top: 0;\n        left: 0;\n        min-height: 100%;\n        overflow-y: auto;\n      }\n    }\n  }\n}\n\n.spw-header-navigation-item__top {\n  position: absolute;\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  top: 0;\n  left: 16px;\n  height: 118px;\n  z-index: 9999999;\n  width: calc(100% - 32px);\n  padding: 24px 0;\n  background: white;\n  border-bottom: 1px solid var(--spw-colors-support-grey-grey-300);\n\n  &-back {\n    gap: 8px;\n    display: flex;\n    justify-content: left;\n    align-items: center;\n    font-weight: 700;\n    font-size: 14px;\n    text-decoration: none;\n    color: var(--spw-colors-support-grey-grey-900);\n    span {\n      text-decoration: underline;\n    }\n    spw-icon {\n      font-size: 18px;\n    }\n  }\n\n  &-title {\n    a {\n      font-size: 20px;\n      font-weight: 700;\n      text-decoration: underline;\n      color: var(--spw-colors-support-grey-grey-900);\n      display: block;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n  }\n\n  &--1 {\n    :host([data-level-visible='1']) & {\n      display: flex;\n      @include breakpoint(lg) {\n        display: none;\n      }\n    }\n    :host([data-level-visible='2']) & {\n      display: none;\n    }\n    :host([data-level-visible='3']) & {\n      display: none;\n    }\n  }\n\n  &--2 {\n    :host([data-level-visible='1']) & {\n      display: none;\n    }\n    :host([data-level-visible='2']) & {\n      display: flex;\n      @include breakpoint(lg) {\n        display: none;\n      }\n    }\n    :host([data-level-visible='3']) & {\n      display: none;\n    }\n  }\n\n  &--3 {\n    :host([data-level-visible='1']) & {\n      display: none;\n    }\n    :host([data-level-visible='2']) & {\n      display: none;\n    }\n    :host([data-level-visible='3']) & {\n      display: flex;\n      @include breakpoint(lg) {\n        display: none;\n      }\n    }\n  }\n\n  @include breakpoint(lg) {\n    display: none;\n  }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'spw-header-navigation-item',\n  styleUrl: 'spw-header-navigation-item.scss',\n  shadow: true,\n})\nexport class SpwHeaderNavigationItem {\n  @Element() el: HTMLSpwHeaderNavigationItemElement;\n\n  /** Définit si l'élément de menu est la page courante */\n  @Prop() isActive: boolean = false;\n\n  @State() internalIsActive: boolean = false;\n  @State() hasSubnav: boolean = false;\n  @State() level: number = 1;\n  @State() isSubnavVisible: boolean = false;\n  @State() lastClickedLevel1Item: string | null = null;\n  @State() isMobile: boolean = window.innerWidth < 1024;\n\n  @Event() spwHeaderNavigationNavigate: EventEmitter<{ level: number; element: HTMLSpwHeaderNavigationItemElement }>;\n\n  componentWillLoad() {\n    this.internalIsActive = this.isActive;\n    this.checkForSubnav();\n    this.calculateLevel();\n    this.updateLevelClass();\n  }\n\n  componentWillUpdate() {\n    if (this.isActive !== this.internalIsActive) {\n      this.internalIsActive = this.isActive;\n    }\n    this.updateLevelClass();\n  }\n\n  private checkForSubnav() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    if (slot) {\n      const assignedElements = slot.assignedElements({ flatten: true });\n      const hasSubnav = assignedElements.some(el => el.tagName === 'SPW-HEADER-NAVIGATION-DROPDOWN');\n\n      if (hasSubnav !== this.hasSubnav) {\n        this.hasSubnav = hasSubnav;\n      }\n    }\n  }\n\n  private calculateLevel() {\n    let level = 1;\n    let parent = this.el.parentElement;\n\n    while (parent && parent.tagName !== 'SPW-HEADER-NAVIGATION') {\n      if (parent.tagName === 'SPW-HEADER-NAVIGATION-DROPDOWN') {\n        level++;\n      }\n      parent = parent.parentElement;\n    }\n\n    this.level = level;\n  }\n\n  private updateLevelClass() {\n    const htmlElement = document.documentElement;\n    Array.from(htmlElement.classList).forEach(className => {\n      if (className.startsWith('spw-ds-nav-level-')) {\n        htmlElement.classList.remove(className);\n      }\n    });\n    htmlElement.classList.add(`spw-ds-nav-level-${this.level}`);\n    this.spwHeaderNavigationNavigate.emit({ level: this.level, element: this.el });\n  }\n\n  private toggleSubnavVisibility(event: MouseEvent) {\n    if (!this.isMobile) return;\n\n    event.stopPropagation();\n\n    if (this.hasSubnav && !this.isSubnavVisible) {\n      const isMobileScreen = window.matchMedia('(max-width: 1024px)').matches;\n      if (isMobileScreen) {\n        event.preventDefault();\n      }\n\n      if (this.level === 1) {\n        this.lastClickedLevel1Item = this.el.innerText;\n        document.documentElement.setAttribute('data-ds-nav-level1', this.lastClickedLevel1Item);\n      }\n\n      this.isSubnavVisible = !this.isSubnavVisible;\n\n      if (this.isSubnavVisible) {\n        this.level++;\n        this.updateLevelClass();\n      }\n    }\n  }\n\n  private getStoredLevel1Item(): string {\n    return document.documentElement.getAttribute('data-ds-nav-level1') || '';\n  }\n\n  private handleBackClick(event: MouseEvent) {\n    event.stopPropagation();\n\n    this.isSubnavVisible = false;\n\n    if (this.level > 1) {\n      this.level--;\n      this.updateLevelClass();\n    }\n\n    this.internalIsActive = false;\n\n    if (this.level === 1 && !this.isSubnavVisible) {\n      this.lastClickedLevel1Item = null;\n      document.documentElement.removeAttribute('data-ds-nav-level1');\n    }\n  }\n\n  private getPageTitle(): { title: string; link: string | null; target: string | null } | null {\n    const parent = this.el.shadowRoot.querySelector('slot');\n\n    if (parent) {\n      const assignedElements = parent.assignedElements({ flatten: true }) as HTMLElement[];\n\n      if (assignedElements.length > 0) {\n        const firstElement = assignedElements[0];\n\n        const title = firstElement.innerText || '';\n        const link = (firstElement as HTMLAnchorElement).href || null;\n        const target = (firstElement as HTMLAnchorElement).target || null;\n\n        return { title, link, target };\n      }\n    }\n\n    return null;\n  }\n\n  async componentDidLoad() {\n    setTimeout(() => {\n      this.checkForSubnav();\n    }, 0);\n\n    const slot = this.el.shadowRoot.querySelector('slot');\n    if (slot) {\n      const mutationObserver = new MutationObserver(() => {\n        this.checkForSubnav();\n      });\n\n      mutationObserver.observe(slot, { childList: true, subtree: true });\n    }\n  }\n\n  render() {\n    const pageTitle = this.getPageTitle();\n    const storedTitle = this.getStoredLevel1Item();\n\n    const elementClass = {\n      'spw-header-navigation-item': true,\n      'spw-header-navigation-item--has-subnav': this.hasSubnav,\n      'spw-header-navigation-item--is-active': this.internalIsActive,\n      'spw-header-navigation-item--is-subnav-visible': this.isSubnavVisible,\n    };\n\n    return (\n      <Host data-level={this.level}>\n        <li class={elementClass}>\n          <div class=\"spw-header-navigation-item__content\" onClick={event => this.toggleSubnavVisibility(event)}>\n            {this.isSubnavVisible && (\n              <div class={`spw-header-navigation-item__top spw-header-navigation-item__top--${this.level}`}>\n                <div class=\"spw-header-navigation-item__top-back\" onClick={event => this.handleBackClick(event)}>\n                  <spw-icon icon=\"fa-chevron-left\"></spw-icon> <span>{this.level === 1 ? '' : this.level === 2 ? 'Menu principal' : storedTitle}</span>\n                </div>\n                <div class=\"spw-header-navigation-item__top-title\">\n                  <a href={pageTitle?.link || '#'} target={pageTitle?.target || '_self'}>\n                    {pageTitle?.title || ''}\n                  </a>\n                </div>\n              </div>\n            )}\n            <slot></slot>\n          </div>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/spw-stencil-library/p-9e12973d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["spwHeaderNavigationCss","SpwHeaderNavigation","constructor","hostRef","this","level","element","redirectToHome","event","preventDefault","window","location","href","handleNavigation","stopPropagation","detail","setTimeout","updateNavigationItems","allItems","getAllNavigationItems","forEach","item","index","setAttribute","navItems","document","querySelectorAll","push","shadowRoot","subItems","subItem","render","h","Host","key","class","onClick","icon"],"sources":["src/components/spw-header/spw-header-navigation/spw-header-navigation.scss?tag=spw-header-navigation&encapsulation=shadow","src/components/spw-header/spw-header-navigation/spw-header-navigation.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.spw-header-navigation {\n  display: none;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 80px);\n  background: white;\n  z-index: 9999;\n  overflow-y: auto;\n  order: 2;\n  border-top: 1px solid var(--spw-colors-support-grey-grey-300);\n  :host(.spw-ds-nav-open) & {\n    display: flex;\n    flex-direction: column;\n  }\n  @include breakpoint(lg) {\n    order: initial;\n    display: block;\n    height: auto;\n    width: auto;\n    overflow-y: initial;\n    top: auto;\n    left: auto;\n    z-index: 30;\n  }\n  :host(.spw-ds-search-open) & {\n    @include breakpoint(lg) {\n      display: none;\n    }\n  }\n  &__list {\n    position: relative;\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-direction: column;\n    width: calc(100% + 32px);\n    margin-left: -16px;\n    margin-right: -16px;\n    @include breakpoint(lg) {\n      flex-direction: row;\n    }\n    @include breakpoint(xl) {\n      gap: 24px;\n    }\n    &-back {\n      display: flex;\n      justify-content: left;\n      width: 100%;\n      padding: 24px 16px;\n      padding-bottom: 0;\n      position: relative;\n      z-index: 3;\n      &:after {\n        content: '';\n        position: absolute;\n        bottom: -1px;\n        width: 100%;\n        left: 0;\n        height: 1px;\n        background: white;\n      }\n      a {\n        gap: 8px;\n        display: flex;\n        justify-content: left;\n        align-items: center;\n        font-weight: 700;\n        font-size: 14px;\n        text-decoration: none;\n        color: var(--spw-colors-support-grey-grey-900);\n        span {\n          text-decoration: underline;\n        }\n        spw-icon {\n          font-size: 18px;\n        }\n      }\n      @include breakpoint(lg) {\n        display: none;\n      }\n    }\n  }\n}\n","import { Component, Listen, Host, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-header-navigation',\n  styleUrl: 'spw-header-navigation.scss',\n  shadow: true,\n})\nexport class SpwHeaderNavigation {\n  @State() level: number = 0;\n  @State() element: HTMLSpwHeaderNavigationItemElement | null = null;\n\n  private redirectToHome(event: MouseEvent) {\n    event.preventDefault();\n    window.location.href = '/';\n  }\n\n  @Listen('spwHeaderNavigationNavigate', { capture: true })\n  handleNavigation(event: CustomEvent<{ level: number; element: HTMLSpwHeaderNavigationItemElement }>) {\n    event.stopPropagation();\n    this.element = event.detail.element;\n    this.level = event.detail.level;\n\n    setTimeout(() => {\n      this.updateNavigationItems();\n    }, 0);\n  }\n\n  private updateNavigationItems() {\n    const allItems = this.getAllNavigationItems();\n\n    allItems.forEach((item, index) => {\n      item.setAttribute('data-id', `${index + 1}`);\n      item.setAttribute('data-level-visible', `${this.level}`);\n    });\n  }\n\n  private getAllNavigationItems(): HTMLElement[] {\n    const allItems: HTMLElement[] = [];\n    const navItems = document.querySelectorAll('spw-header-navigation-item');\n\n    navItems.forEach(item => {\n      allItems.push(item);\n      const shadowRoot = item.shadowRoot;\n      if (shadowRoot) {\n        const subItems = shadowRoot.querySelectorAll('spw-header-navigation-item');\n        subItems.forEach(subItem => allItems.push(subItem as HTMLElement));\n      }\n    });\n\n    return allItems;\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav class=\"spw-header-navigation\">\n          <div class=\"spw-ds-container\">\n            <ul class=\"spw-header-navigation__list\">\n              <li class=\"spw-header-navigation__list-back\">\n                <a href=\"#\" onClick={event => this.redirectToHome(event)}>\n                  <spw-icon icon=\"fa-chevron-left\"></spw-icon> <span>Page d'accueil</span>\n                </a>\n              </li>\n              <slot></slot>\n            </ul>\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAyB,g/H,MCOlBC,EAAmB,MALhC,WAAAC,CAAAC,G,UAMWC,KAAKC,MAAW,EAChBD,KAAOE,QAA8C,IA6D/D,CA3DS,cAAAC,CAAeC,GACrBA,EAAMC,iBACNC,OAAOC,SAASC,KAAO,G,CAIzB,gBAAAC,CAAiBL,GACfA,EAAMM,kBACNV,KAAKE,QAAUE,EAAMO,OAAOT,QAC5BF,KAAKC,MAAQG,EAAMO,OAAOV,MAE1BW,YAAW,KACTZ,KAAKa,uBAAuB,GAC3B,E,CAGG,qBAAAA,GACN,MAAMC,EAAWd,KAAKe,wBAEtBD,EAASE,SAAQ,CAACC,EAAMC,KACtBD,EAAKE,aAAa,UAAW,GAAGD,EAAQ,KACxCD,EAAKE,aAAa,qBAAsB,GAAGnB,KAAKC,QAAQ,G,CAIpD,qBAAAc,GACN,MAAMD,EAA0B,GAChC,MAAMM,EAAWC,SAASC,iBAAiB,8BAE3CF,EAASJ,SAAQC,IACfH,EAASS,KAAKN,GACd,MAAMO,EAAaP,EAAKO,WACxB,GAAIA,EAAY,CACd,MAAMC,EAAWD,EAAWF,iBAAiB,8BAC7CG,EAAST,SAAQU,GAAWZ,EAASS,KAAKG,I,KAI9C,OAAOZ,C,CAGT,MAAAa,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAK,OAAAE,IAAA,2CAAAC,MAAM,yBACTH,EAAK,OAAAE,IAAA,2CAAAC,MAAM,oBACTH,EAAI,MAAAE,IAAA,2CAAAC,MAAM,+BACRH,EAAI,MAAAE,IAAA,2CAAAC,MAAM,oCACRH,EAAA,KAAAE,IAAA,2CAAGtB,KAAK,IAAIwB,QAAS5B,GAASJ,KAAKG,eAAeC,IAChDwB,EAAU,YAAAE,IAAA,2CAAAG,KAAK,oBAA6B,IAACL,EAAA,QAAAE,IAAA,gEAGjDF,EAAA,QAAAE,IAAA,gD","ignoreList":[]}

package/dist/spw-stencil-library/p-c4e4cfd4.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s}from"./p-CvfVJV8a.js";const i="/*! 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 o=class{constructor(s){t(this,s);this.valueChanged=e(this,"valueChanged",7);this.placeholder="Recherche...";this.size="medium";this.label="";this.required=false;this.filteredItems=[];this.searchText="";this.isOpen=false;this.focusedItemIndex=null;this.dropdownDirection="down";this.handleClickOutside=t=>{if(this.isOpen){const e=t.composedPath()[0];const s=this.hostElement.contains(e);if(!s){this.isOpen=false}}}}componentWillLoad(){if(this.items){this.parseItems(this.items)}else{this.filteredItems=[]}}componentDidLoad(){document.addEventListener("click",this.handleClickOutside)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside)}async resetInput(){this.searchText="";this.isOpen=false;this.focusedItemIndex=null;this.valueChanged.emit(this.searchText)}parseItems(t){if(!t){this.filteredItems=[];return}try{this.filteredItems=JSON.parse(t)}catch(e){console.error("Invalid JSON format for items:",t);this.filteredItems=[]}}handleSearchInput(t){const e=t.target;this.searchText=e.value;this.filterItems();this.determineDropdownDirection();this.isOpen=true;this.valueChanged.emit(this.searchText)}filterItems(){if(!this.items){this.filteredItems=[];return}const t=this.normalizeString(this.searchText);this.filteredItems=JSON.parse(this.items).filter((e=>this.normalizeString(e.label).includes(t)))}normalizeString(t){return t.normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase()}selectItem(t){this.searchText=t.label;this.isOpen=false;this.valueChanged.emit(this.searchText);if(t.url){window.location.href=t.url}}determineDropdownDirection(){const t=this.hostElement.getBoundingClientRect();const e=window.innerHeight;if(t.bottom+200>e&&t.top>200){this.dropdownDirection="up"}else{this.dropdownDirection="down"}}handleKeyDown(t){switch(t.key){case"ArrowDown":t.preventDefault();if(this.isOpen){this.focusedItemIndex=this.focusedItemIndex===null?0:(this.focusedItemIndex+1)%this.filteredItems.length}break;case"ArrowUp":t.preventDefault();if(this.isOpen){this.focusedItemIndex=this.focusedItemIndex===null?this.filteredItems.length-1:(this.focusedItemIndex-1+this.filteredItems.length)%this.filteredItems.length}break;case"Enter":t.preventDefault();if(this.isOpen&&this.focusedItemIndex!==null){this.selectItem(this.filteredItems[this.focusedItemIndex])}break;case"Escape":this.isOpen=false;break}}highlightMatch(t){const e=this.normalizeString(this.searchText);const i=this.normalizeString(t);const o=i.indexOf(e);if(o===-1||!this.searchText){return t}const n=o+e.length;return s("span",null,t.slice(0,o),s("strong",null,t.slice(o,n)),t.slice(n))}get elementClass(){return{"spw-search-field":true,[`spw-search-field--${this.size}`]:true}}render(){return s("div",{key:"177ea345dde83be8b00034dabd261cd4ae921b53",ref:t=>this.hostElement=t,class:this.elementClass},s("spw-text-field",{key:"ff33047f1a04a89e239ab0bd3a8af4337c8f235b",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:t=>this.handleSearchInput(t),onKeyDown:t=>this.handleKeyDown(t)}),this.isOpen&&!!this.items&&s("div",{key:"11c758b336d8590e082eaa7773fa6cd45709074d",class:`spw-search-field__options spw-search-field__options--${this.dropdownDirection}`},!!this.filteredItems.length&&s("ul",{key:"745a24351b6818bedd402ecd19c5ad06d7eab8d9"},this.filteredItems.map(((t,e)=>s("li",{class:{"spw-search-field__option":true,"spw-search-field__option--focused":e===this.focusedItemIndex},onClick:()=>this.selectItem(t)},this.highlightMatch(t.label)," ",t.category&&s("span",{class:"spw-tw-italic"}," - ",t.category))))),!this.filteredItems.length&&s("p",{key:"53f82d90522e707aef8f3a4de87875d44ad1fbea",class:"spw-search-field__no-results"},"Pas de résultats.")))}static get watchers(){return{items:["parseItems"]}}};o.style=i;export{o as spw_search_field};
-//# sourceMappingURL=p-c4e4cfd4.entry.js.map

package/dist/spw-stencil-library/p-c4e4cfd4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["spwSearchFieldCss","SpwSearchField","constructor","hostRef","this","placeholder","size","label","required","filteredItems","searchText","isOpen","focusedItemIndex","dropdownDirection","handleClickOutside","event","target","composedPath","isInsideHost","hostElement","contains","componentWillLoad","items","parseItems","componentDidLoad","document","addEventListener","disconnectedCallback","removeEventListener","resetInput","valueChanged","emit","newValue","JSON","parse","e","console","error","handleSearchInput","input","value","filterItems","determineDropdownDirection","normalizedSearchText","normalizeString","filter","item","includes","str","normalize","replace","toLowerCase","selectItem","url","window","location","href","rect","getBoundingClientRect","viewportHeight","innerHeight","bottom","top","handleKeyDown","key","preventDefault","length","highlightMatch","normalizedItem","startIndex","indexOf","endIndex","h","slice","elementClass","render","ref","el","class","name","disabled","assistiveText","onInput","onKeyDown","map","index","onClick","category"],"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, Event, EventEmitter, Method, 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  /** É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  /** 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  /** Réinitialise le champ de recherche */\n  @Method()\n  async resetInput() {\n    this.searchText = '';\n    this.isOpen = false;\n    this.focusedItemIndex = null;\n    this.valueChanged.emit(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 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    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.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 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"],"mappings":"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","ignoreList":[]}