jb-select 6.4.0 → 6.4.2

package/README.md

@@ -15,7 +15,12 @@ pure js standalone select box web-component
 - support option dom customization
 - can get array of js object as a option list and extract value and label from it to show it to user.
 
-sample:<https://codepen.io/javadbat/pen/abpjKVP>
+
+## Sample
+
+- [Codepen](https://codepen.io/javadbat/pen/abpjKVP)
+- [Storybook](https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect)
+- [CodeSandbox](https://3f63dj.csb.app/samples/jb-select)
 
 ## using with JS frameworks
 
@@ -24,15 +29,20 @@ to use this component in **react** see [`jb-select/react`](https://github.com/ja
 ## install
 
 ### using npm:
-```cmd
+
+```bash
     npm i jb-select
 ```
 ### using cdn:
+
 ```html
-    <script src="https://unpkg.com/jb-input/dist/JBInput.umd.js"></script>
+    <script src="https://unpkg.com/jb-select/dist/index.umd.js"></script>
 ```
+then in your HTML file just use 
 
-use `<jb-select></jb-select>`
+```html
+<jb-select></jb-select>
+```
 
 ## set option list
 
@@ -52,11 +62,13 @@ using `jb-option` is quite an easy job:
     <jb-option value="0" >Other</jb-option>
 </jb-select>
 ```
+
 its easy and simple to customization options display content. for example you can set option value like this for user to pick color:
 
 ```html
 <jb-option value="red"><span class="color-circle" style="background-color:#f00"></span>red</jb-option>
 ```
+
 you can also assign non-string value to option in js in some advance scenario:
 
 ```js
@@ -65,15 +77,18 @@ document.querySelector('jb-option').value = {
     age:10
 }
 ```
+
 by doing this, calling a `document.querySelector('jb-select').value` will give you the object in javascript
 
 ### using `jb-option-list`
 this web-component is an assistance for developers to manage their option list in javascript without involving too much HTML in their logic
+
 ```html
 <jb-select>
     <jb-option-list />
 </jb-select>
 ```
+
 ```js
 const optionListElement = document.querySelector('jb-option-list')
 optionListElement.optionList = [1,2,3]
@@ -101,6 +116,7 @@ optionListElement.setCallback("getTitle", (option)=>{
 optionListElement.setCallback("getValue", (option)=>option.id);
 
 ```
+
 `jb-option-list` use `jb-option` inside itself and just help you to manage your option list easier in js
 
 ## get value
@@ -113,7 +129,8 @@ document.querySelector('jb-select').value;
 // if you use a object in option list you can get selected option title beside value
 document.querySelector('jb-select').selectedOptionTitle;
 ```
-### set value
+
+## set value
 
 to select value in your code you have 2 option:
 1- set it via dom assign `dropDownElement.value = yourValue`
@@ -128,7 +145,8 @@ remember set value as attribute if your option is a plain string but in direct a
  ```html
  <jb-select placeholder="please select" search-placeholder="type to search"></jb-select>
  ```
-### validation
+
+## validation
 since select has a limited value options, validation have different story here. the only validation i really necessary here is required that indicate if user must select a value before he can move on so pass `required` attribute in dom then call `checkValidity` function like all other jb web component family. but if you need more customize validation just read [jb-validation](https://github.com/javadbat/jb-validation)
 
 you can also set `error` attribute to pass error directly to the component
@@ -137,7 +155,7 @@ you can also set `error` attribute to pass error directly to the component
 <jb-select error="your error message"></jb-select>
 ```
 
-### change empty state shape
+## change empty state shape
 when the searched value in select is not found, there is an open dropdown with the not found message.
 you can customize this entire section by adding a div with the `slot="empty-list"`
 
@@ -150,6 +168,7 @@ like the example the below:
     </div>
 </jb-select>
 ```
+
 ### Add Icon or Any Element into box
 sometimes you want to add icon into the select box before value box.
 you can customize this entire section by adding a div or any other Tag with the `slot="start-section"`
@@ -164,7 +183,7 @@ like the example the below:
 </jb-select>
 ```
 
-### callbacks
+## callbacks
 
 you can add callbacks to manage the way component works
 for example if you have array of object as a option list and want to show custom title for option you can use:
@@ -181,7 +200,7 @@ for example if you have array of object as a option list and want to show custom
 
 remember you must set this callback before set value and option list
 
-### events
+## events
 
 ```js
     dropDownElement.addEventListener('change',(e)=>{/*your function*/});
@@ -190,10 +209,12 @@ remember you must set this callback before set value and option list
 
 ```
 
-### set custom style
+## set custom style
 
 in some cases in your project you need to change defualt style of web-component for example you need zero margin or different border-radius and etc.  
 if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component
+
+
 | css variable name                         | description                                                                                   |
 | -------------                             | -------------                                                                                 |
 | --jb-select-margin                        | web-component margin default is `0 0`                                                         |
@@ -253,6 +274,6 @@ if you want to set a custom style to this web-component all you need is to set c
 
 - see [`jb-select/react`](https://github.com/javadbat/jb-select/tree/main/react) if you want to use this component in react.
 
-- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/main/docs/component-list.md) for more components.
+- see [All JB Design system Component List](https://javadbat.github.io/design-system/) for more components.
 
 - use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=Object.create,t=Object.defineProperty,i=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,l=Object.getPrototypeOf,o=Object.prototype.hasOwnProperty,a=(a,n,r)=>(r=null!=a?e(l(a)):{},((e,l,a,n)=>{if(l&&"object"==typeof l||"function"==typeof l)for(var r,c=s(l),h=0,d=c.length;h<d;h++)r=c[h],o.call(e,r)||r===a||t(e,r,{get:(e=>l[e]).bind(null,r),enumerable:!(n=i(l,r))||n.enumerable});return e})(!n&&a&&a.__esModule?r:t(r,"default",{value:a,enumerable:!0}),a));const n=a(require("jb-validation")),r=a(require("jb-core"));function c(e,t,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(e):s?s.value:t.get(e)}function h(e,t,i,s,l){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!l)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!l:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?l.call(e,i):l?l.value=i:t.set(e,i),i}var d,b,p,m,u,v,g,w,f,x,y,j,k,E;var V=class extends HTMLElement{get value(){return c(this,m,"f")}set value(e){h(this,m,e,"f")}set selected(e){h(this,u,e,"f"),e?c(this,b,"f").componentWrapper.classList.add("--selected"):c(this,b,"f").componentWrapper.classList.remove("--selected")}get selected(){return c(this,u,"f")}get optionContent(){return c(this,b,"f").contentWrapper.querySelector("slot").assignedNodes()}get hidden(){return c(this,v,"f")}set hidden(e){h(this,v,e,"f"),e?(c(this,b,"f").componentWrapper.classList.add("--hidden"),this.setAttribute("inert","")):(c(this,b,"f").componentWrapper.classList.remove("--hidden"),this.removeAttribute("inert"))}get optionContentText(){return this.optionContent.reduce(((e,t)=>e+=t.textContent),"")}constructor(){super(),d.add(this),b.set(this,void 0),p.set(this,void 0),m.set(this,void 0),u.set(this,!1),v.set(this,!1),c(this,d,"m",w).call(this),c(this,d,"m",y).call(this)}connectedCallback(){c(this,d,"m",x).call(this)}setSelectElement(e){e&&(h(this,p,e,"f"),c(this,p,"f").addEventListener("filter-change",c(this,d,"m",g).bind(this)))}disconnectedCallback(){c(this,p,"f")?.removeEventListener("filter-change",c(this,d,"m",g).bind(this));const e=new CustomEvent("jb-option-disconnected",{bubbles:!0,composed:!0,cancelable:!1});this.dispatchEvent(e)}static get observedAttributes(){return["value"]}attributeChangedCallback(e,t,i){c(this,d,"m",j).call(this,e,i)}};b=new WeakMap,p=new WeakMap,m=new WeakMap,u=new WeakMap,v=new WeakMap,d=new WeakSet,g=function(e){const{filterText:t}=e.detail;this.optionContentText.toLowerCase().includes(t.toLowerCase())?this.hidden=!1:this.hidden=!0},w=function(){const e=this.attachShadow({mode:"open"}),t=document.createElement("template");t.innerHTML='<style>.jb-options-web-component .option-content-wrapper{min-height:36px;padding:4px 16px;display:flex;align-items:center;font-size:.9em;color:var(--jb-select-option-color, inherit);background-color:var(--background-color)}.jb-options-web-component .option-content-wrapper:hover{background-color:var(--background-color-hover);color:var(--option-color-hover);cursor:pointer}.jb-options-web-component.--selected{font-weight:900}.jb-options-web-component.--hidden{display:none}</style>\n\n    <div class="jb-options-web-component">\n      <div class="option-content-wrapper">\n        <slot></slot>\n      </div>\n    </div>\n  ',e.appendChild(t.content.cloneNode(!0)),h(this,b,{componentWrapper:e.querySelector(".jb-options-web-component"),contentWrapper:e.querySelector(".option-content-wrapper")},"f"),c(this,d,"m",f).call(this)},f=function(){c(this,b,"f").componentWrapper.addEventListener("click",c(this,d,"m",k).bind(this))},x=function(){const e=new CustomEvent("jb-option-connected",{bubbles:!0,composed:!0});this.dispatchEvent(e)},y=function(){this.value=this.getAttribute("value")||null},j=function(e,t){if("value"===e)h(this,m,t,"f")},k=function(){c(this,u,"f")||c(this,d,"m",E).call(this)},E=function(){const e=new CustomEvent("select",{bubbles:!0,cancelable:!1,composed:!0});this.dispatchEvent(e)};var L,C,M,W,T,S,z,N,O,A,q,P;!customElements.get("jb-option")&&window.customElements.define("jb-option",V);var K=class extends HTMLElement{get callbacks(){return c(this,C,"f")}get optionList(){return c(this,M,"f")||[]}set optionList(e){Array.isArray(e)?(h(this,M,e,"f"),c(this,L,"m",N).call(this,e)):console.error("your provided option list to jb-option-list is not a array. you must provide array value",{value:e})}constructor(){super(),L.add(this),C.set(this,{}),M.set(this,[]),W.set(this,new Map),c(this,L,"m",z).call(this)}connectedCallback(){}setCallback(e,t){switch(c(this,C,"f")[e]=t,e){case"getContentDOM":case"getTitle":c(this,L,"m",T).call(this);break;case"getValue":c(this,L,"m",S).call(this)}}};C=new WeakMap,M=new WeakMap,W=new WeakMap,L=new WeakSet,T=function(){c(this,W,"f").forEach(((e,t)=>{c(this,L,"m",q).call(this,t,e)}))},S=function(){c(this,W,"f").forEach(((e,t)=>{e.value=c(this,L,"m",O).call(this,t)}))},z=function(){const e=this.attachShadow({mode:"open"}),t=document.createElement("template");e.appendChild(t.content.cloneNode(!0))},N=function(e){this.shadowRoot.innerHTML="",e.forEach((e=>{const t=c(this,L,"m",P).call(this,e);this.shadowRoot.appendChild(t),c(this,W,"f").set(e,t)}))},O=function(e){this.callbacks.getValue&&"function"!=typeof this.callbacks.getValue&&console.error("getOptionValue callback is not a function");try{return"function"==typeof c(this,C,"f").getValue?c(this,C,"f").getValue(e):e}catch(t){console.error("Invalid getOptionValue callback Result, must be a function that returns the value of an option",e)}},A=function(e){if("function"!=typeof c(this,C,"f").getTitle)return String(e);try{return c(this,C,"f").getTitle(e)}catch(t){console.error("Invalid getOptionTitle callback Result, must be a function that returns the value of an option",e)}return""},q=function(e,t){t.innerHTML="","function"==typeof c(this,C,"f").getContentDOM?t.appendChild(c(this,C,"f").getContentDOM(e)):t.innerHTML=c(this,L,"m",A).call(this,e)},P=function(e){const t=new V;return c(this,L,"m",q).call(this,e,t),t.value=c(this,L,"m",O).call(this,e),t};!customElements.get("jb-option-list")&&window.customElements.define("jb-option-list",K);var H=class{get value(){return`oklch(${this.lightness} ${this.chroma} ${this.hue})`}constructor(e,t){this.variableName=t,this.lightness=e.lightness,this.chroma=e.chroma,this.hue=e.hue}};function D(e){return new H({lightness:6*(3+1.3*e)*.01,chroma:.001*(14+.09*e),hue:258.36},`--jb-neutral-${e}`)}function B(e){return new H({lightness:e.lightness+.07,chroma:e.chroma+.07,hue:e.hue},`${e.variableName}-hover`)}function $(e){return new H({lightness:e.lightness-.1,chroma:e.chroma-.05,hue:e.hue},`${e.variableName}-pressed`)}function I(e){const t=Math.min(e.lightness+.12*(1-e.lightness),.985),i=e.chroma*(1-.15*(t-e.lightness));return new H({lightness:t,chroma:Number(i.toFixed(3)),hue:e.hue},`${e.variableName}-l`)}function R(e){const t=Math.max(e.lightness-.12*e.lightness,.02),i=e.chroma*(1-.15*(t-e.lightness));return new H({lightness:t,chroma:i,hue:e.hue},`${e.variableName}-d`)}function F(e){const t=Math.min(e.lightness+.65*(1-e.lightness),.93),i=.55*e.chroma*(1-.08*(t-e.lightness)),s=e.hue>=70&&e.hue<=162?5:-3,l=e.hue+s;return new H({lightness:t,chroma:Number(i.toFixed(3)),hue:l},`${e.variableName}-subtle`)}function J(e){const t=Math.max(e.lightness-.35,.22),i=Math.min(1.6*e.chroma,.28);return new H({lightness:Number(t.toFixed(3)),chroma:Number(i.toFixed(3)),hue:e.hue},`${e.variableName}-contrast`)}const _=new H({lightness:.6,chroma:.26,hue:256},"--jb-primary"),Z=new H({lightness:.6,chroma:.26,hue:286},"--jb-secondary"),G=new H({lightness:.75,chroma:.18,hue:70},"--jb-yellow"),Q=new H({lightness:.68,chroma:.1484,hue:162.1},"--jb-green"),U=new H({lightness:.6,chroma:.22,hue:23.21},"--jb-red"),X={single:{black:new H({lightness:.14,chroma:0,hue:0},"--jb-black"),white:new H({lightness:1,chroma:0,hue:0},"--jb-white"),highlight:new H({lightness:.93,chroma:.2302,hue:125.18},"--jb-highlight")},neutral:[D(0),D(1),D(2),D(3),D(4),D(5),D(6),D(7),D(8),D(9),D(10)],primary:{main:_,hover:B(_),pressed:$(_),light:I(_),dark:R(_),subtle:F(_),contrast:J(_)},secondary:{main:Z,hover:B(Z),pressed:$(Z),light:I(Z),dark:R(Z),subtle:F(Z),contrast:J(Z)},yellow:{main:G,hover:B(G),pressed:$(G),light:I(G),dark:R(G),subtle:F(G),contrast:J(G)},green:{main:Q,hover:B(Q),pressed:$(Q),light:I(Q),dark:R(Q),subtle:F(Q),contrast:J(Q)},red:{main:U,hover:B(U),pressed:$(U),light:I(U),dark:R(U),subtle:F(U),contrast:J(U)}};function Y(e){try{const{value:t,...i}=e;window.CSS.registerProperty({...i}),function(e,t){try{t&&(document.documentElement.style.getPropertyValue(e)||document.documentElement.style.setProperty(e,t))}catch(e){}}(e.name,t)}catch(e){}}function ee(){var e;Y({name:"--jb-radius",inherits:!0,value:"1rem",initialValue:"16px",syntax:"<length-percentage>"}),Y({name:"--jb-radius-xs",inherits:!0,value:"0.5rem",initialValue:"8px",syntax:"<length-percentage>"}),Y({name:"--jb-radius-sm",inherits:!0,value:"0.75rem",initialValue:"12px",syntax:"<length-percentage>"}),Y({name:"--jb-radius-lg",inherits:!0,value:"1.25rem",initialValue:"20px",syntax:"<length-percentage>"}),Y({name:"--jb-radius-xl",inherits:!0,value:"1.5rem",initialValue:"24px",syntax:"<length-percentage>"}),function(e){Y({name:e.primary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.primary.main.value}),Y({name:e.secondary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.secondary.main.value}),Y({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value}),Y({name:e.single.black.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.black.value}),Y({name:e.single.white.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.white.value}),Y({name:e.single.highlight.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.highlight.value}),Y({name:e.yellow.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.yellow.main.value}),Y({name:e.green.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.green.main.value}),Y({name:e.red.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.red.main.value}),Y({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value});for(let t=1;t<=10;t++)Y({name:e.neutral[t].variableName,syntax:"<color>",inherits:!0,initialValue:e.neutral[t].value})}(X),Y({name:"--jb-text-primary",syntax:"<color>",inherits:!0,initialValue:(e=X).single.black.value}),Y({name:"--jb-text-secondary",syntax:"<color>",inherits:!0,initialValue:e.neutral[7].value}),Y({name:"--jb-text-contrast",syntax:"<color>",inherits:!0,initialValue:e.single.white.value})}var te,ie,se,le,oe,ae,ne,re,ce,he,de,be,pe,me,ue,ve,ge,we,fe,xe,ye,je,ke,Ee,Ve,Le,Ce,Me,We,Te,Se,ze,Ne,Oe,Ae,qe,Pe,Ke,He,De,Be,$e,Ie,Re,Fe,Je,_e,Ze,Ge,Qe,Ue=class extends HTMLElement{static get formAssociated(){return!0}get value(){return c(this,ie,"f")?c(this,ie,"f"):null}set value(e){c(this,te,"m",ke).call(this,e)}get textValue(){return c(this,se,"f")}set textValue(e){h(this,se,e,"f"),this.elements.input.value=e,c(this,te,"m",He).call(this,e)}get selectedOptionTitle(){return this.value?c(this,ae,"f").optionContentText:""}get placeholder(){return c(this,ne,"f")}set placeholder(e){h(this,ne,e,"f"),null!==this.value&&void 0!==this.value?this.elements.input.placeholder="":this.elements.input.placeholder=e}get searchPlaceholder(){return c(this,re,"f")}set searchPlaceholder(e){h(this,re,e,"f")}get isMobileDevice(){return(0,r.isMobile)()}get isOpen(){return this.elements.componentWrapper.classList.contains("--focused")}get validation(){return c(this,he,"f")}get disabled(){return c(this,de,"f")}set disabled(e){h(this,de,e,"f"),this.elements.input.disabled=e,e?c(this,pe,"f").states?.add("disabled"):c(this,pe,"f").states?.delete("disabled")}set required(e){h(this,be,e,"f"),c(this,he,"f").checkValiditySync({showError:!1})}get required(){return c(this,be,"f")}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get name(){return this.getAttribute("name")||""}get isDirty(){return this.value!==this.initialValue}constructor(){super(),te.add(this),ie.set(this,void 0),se.set(this,""),le.set(this,null),oe.set(this,new Set),ae.set(this,null),this.callbacks={},ne.set(this,""),re.set(this,"search"),he.set(this,new n.ValidationHelper({clearValidationError:this.clearValidationError.bind(this),showValidationError:this.showValidationError.bind(this),getValue:()=>c(this,te,"a",ce),getValidations:c(this,te,"m",Ze).bind(this),getValueString:()=>c(this,se,"f"),setValidationResult:c(this,te,"m",Qe).bind(this)})),de.set(this,!1),be.set(this,!1),pe.set(this,void 0),this.initialValue=null,"function"==typeof this.attachInternals&&h(this,pe,this.attachInternals(),"f"),c(this,te,"m",ve).call(this),c(this,te,"m",we).call(this)}connectedCallback(){c(this,te,"m",ue).call(this),c(this,te,"m",me).call(this)}static get observedAttributes(){return["label","message","value","required","placeholder","search-placeholder","error"]}attributeChangedCallback(e,t,i){c(this,te,"m",fe).call(this,e,i)}focus(){this.elements.input.focus(),c(this,te,"m",Pe).call(this),this.elements.componentWrapper.classList.add("--focused"),this.isMobileDevice&&(this.elements.input.placeholder=c(this,re,"f"))}blur(){this.elements.componentWrapper.classList.remove("--focused"),this.textValue="",c(this,te,"m",ze).call(this,""),c(this,te,"m",Ke).call(this),c(this,he,"f").checkValidity({showError:!0}),this.isMobileDevice&&(this.value?this.elements.input.placeholder="":this.elements.input.placeholder=this.placeholder),this.elements.input.blur()}showValidationError(e){const t="string"==typeof e?e:e.message;this.elements.messageBox.innerHTML=t,this.elements.messageBox.classList.add("--error")}clearValidationError(){this.elements.messageBox.innerHTML=this.getAttribute("message")||"",this.elements.messageBox.classList.remove("--error")}checkValidity(){const e=c(this,he,"f").checkValiditySync({showError:!1});if(!e.isAllValid){const e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}reportValidity(){const e=c(this,he,"f").checkValiditySync({showError:!0});if(!e.isAllValid){const e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}get validationMessage(){return c(this,pe,"f")?.validationMessage||c(this,he,"f").resultSummary.message}};ie=new WeakMap,se=new WeakMap,le=new WeakMap,oe=new WeakMap,ae=new WeakMap,ne=new WeakMap,re=new WeakMap,he=new WeakMap,de=new WeakMap,be=new WeakMap,pe=new WeakMap,te=new WeakSet,ce=function(){return{inputtedText:c(this,se,"f"),selectedOption:c(this,ae,"f"),value:this.value}},me=function(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)},ue=function(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)},ve=function(){const e=this.attachShadow({mode:"open",delegatesFocus:!0});ee();const t=document.createElement("template");t.innerHTML='<style>:host{--border-radius:var(--jb-select-border-radius, var(--jb-radius));--middle-div-height: var(--jb-select-middle-div-height, 0px);--border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));--base-z-index: 1;--mobile-modal-z-index: 900;--mobile-modal-height: var(--jb-select-mobile-modal-height, 100vh);--border-color: var(--jb-select-border-color, var(--jb-neutral-10));--message-color: var(--jb-select-message-color, var(--jb-text-secondary));--label-color: var(--jb-select-label-color, var(--jb-text-primary));--value-color: var(--jb-select-value-color, var(--jb-text-primary));--placeholder-color: var(--jb-select-placeholder-color, var(--jb-neutral-6));--select-box-bg-color: var(--jb-select-bgcolor, var(--jb-neutral-10));--overlay-bg-color:var(--jb-select-overlay-bg-color, oklch(from var(--jb-neutral) l c h / calc(alpha - 0.5)));--modal-label-color:var(--jb-select-modal-label-color, var(--jb-text-contrast));--modal-close-color:var(--jb-select-modal-close-color, var(--jb-white));--close-bg-color:var(--jb-select-close-bg-color, var(--jb-neutral-2));--list-scroll-color:var(--jb-select-list-scroll-color, oklch(from var(--select-box-bg-color) calc(l - 0.2) c h));--empty-list-placeholder-color:var(--jb-select-empty-list-placeholder-color, var(--jb-text-secondary)) }:host(:state(invalid)){--message-color: var(--jb-select-message-error-color, var(--jb-red))}:host(:focus-within){--border-color: var(--jb-select-border-color-focus, var(--jb-neutral))}.jb-select-web-component{width:var(--jb-select-width, 100%);margin:var(--jb-select-margin, 0 0);position:relative;box-sizing:border-box}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused{position:fixed;bottom:0;top:initial;left:0;background-color:var(--overlay-bg-color);width:100vw;height:var(--mobile-modal-height);border-radius:var(--jb-select-mobile-modal-border-radius, 0) var(--jb-select-mobile-modal-border-radius, 0) 0 0;margin:0;padding:16px 8px;z-index:var(--mobile-modal-z-index)}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .select-box{height:var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));background-color:var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));border-width:var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));border-color:var(--jb-select-mobile-search-border-color, var(--border-color));border-bottom-width:var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));border-bottom-color:var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--border-color)));border-radius:var(--jb-select-mobile-search-border-radius, var(--border-radius))}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .select-box .front-box .arrow-icon{display:none}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .select-box .selected-value-wrapper{opacity:0;transition:none}}.jb-select-web-component.--focused .middle-divider{display:block}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .middle-divider{margin:var(--jb-select-middle-div-mobile-margin, 16px 0 0 0)}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .select-list-wrapper{position:initial;margin:var(--jb-select-mobile-item-list-margin, 16px 0);border-radius:var(--jb-select-mobile-item-list-border-radius, var(--border-radius))}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .label-wrapper{display:flex}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .label-wrapper label{color:var(--modal-label-color);font-size:1.5em;display:flex;align-items:center}}.jb-select-web-component.--focused .label-wrapper .close-button{display:none}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .label-wrapper .close-button{display:flex;width:48px;height:48px;justify-content:center;align-items:center;color:var(--modal-close-color)}.jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg{opacity:var(--jb-select-close-bg-opacity, 0.4);fill:var(--close-bg-color)}.jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path{fill:var(--modal-close-color)}}.jb-select-web-component.--has-value .select-box{border-color:var(--jb-select-border-color-selected, var(--border-color));background-color:var(--jb-select-bgcolor-selected, var(--select-box-bg-color))}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--has-value .select-box:focus-within{background-color:var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color))}}.jb-select-web-component .label-wrapper label{width:100%;margin:4px 0px;display:block;font-size:var(--jb-select-label-font-size, 0.8em);font-weight:var(--jb-select-label-font-weight, normal);color:var(--label-color)}.jb-select-web-component .label-wrapper label.--hide{display:none}.jb-select-web-component .label-wrapper .close-button{display:none}.jb-select-web-component .select-box{width:100%;box-sizing:border-box;height:var(--jb-select-height, 2.5rem);border:solid var(--jb-select-border-width, 1px) var(--border-color);border-bottom:solid var(--p-border-bottom-width) var(--border-color);border-radius:var(--border-radius);background-color:var(--select-box-bg-color);margin:var(--jb-select-select-box-margin, 4px 0px 0px 0px);overflow:hidden;display:flex;padding-inline-end:var(--jb-select-box-padding-end, 1rem);gap:.5rem;align-items:center}.jb-select-web-component .select-box:focus-within{border-color:var(--jb-select-border-color, var(--border-color));border-bottom-color:var(--jb-select-border-color, var(--border-color));border-radius:var(--border-radius) var(--border-radius) 0 0}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component .select-box:focus-within{border-radius:var(--jb-select-mobile-search-border-radius, var(--border-radius))}}.jb-select-web-component .select-box .start-section{height:100%;width:auto;display:flex;justify-content:center;align-items:center}.jb-select-web-component .select-box .middle-section{position:relative;width:100%;height:100%;flex:1}.jb-select-web-component .select-box .middle-section .selected-value-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;overflow:hidden;z-index:1}.jb-select-web-component .select-box .middle-section .selected-value-wrapper.--search-typed{opacity:0}.jb-select-web-component .select-box .middle-section .selected-value-wrapper .selected-value{width:100%;box-sizing:border-box;height:100%;background-color:rgba(0,0,0,0);padding:2px 12px 0 12px;display:block;font-family:inherit;font-size:var(--jb-select-selected-value-font-size, 1.1em);color:var(--value-color);margin:0;border-radius:0;display:flex;align-items:center}.jb-select-web-component .select-box .middle-section .front-box{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;overflow:hidden;z-index:2}.jb-select-web-component .select-box .middle-section .front-box input{border:none;width:100%;box-sizing:border-box;height:100%;background-color:rgba(0,0,0,0);padding:2px 12px 0 12px;display:block;font-family:inherit;font-size:var(--jb-select-value-font-size, 1.1rem);color:var(--value-color);margin:0;border-radius:0}.jb-select-web-component .select-box .middle-section .front-box input:focus{outline:none}.jb-select-web-component .select-box .middle-section .front-box input::placeholder{color:var(--placeholder-color);font-size:var(--jb-select-placeholder-font-size, 1.1em)}.jb-select-web-component .select-box .end-section .arrow-icon{margin:var(--jb-select-arrow-icon-margin, 0 0 0 0)}.jb-select-web-component .select-box:focus-within .selected-value{opacity:.7;transition:all .3s ease}.jb-select-web-component .middle-divider{display:none;position:relative;z-index:calc(var(--base-z-index) + 3);width:100%;height:var(--middle-div-height);background-color:var(--jb-select-middle-div-color, var(--border-color));margin:var(--jb-select-middle-div-margin, calc(-1 * var(--border-bottom-width)) 0);border-radius:var(--jb-select-middle-div-radius, 0px)}.jb-select-web-component .message-box{font-size:var(--jb-select-message-font-size, 0.7em);font-weight:var(--jb-select-message-font-weight, normal);padding:4px 8px;color:var(--message-color)}.jb-select-web-component .message-box:empty{padding:0}.jb-select-web-component .message-box.--error{color:red}.jb-select-web-component .select-list-wrapper{display:none;position:absolute;margin:calc(-1*var(--border-bottom-width)) 0;height:auto;overflow:hidden;width:100%;background-color:var(--select-box-bg-color);border-radius:0 0 var(--border-radius) var(--border-radius);border:solid var(--jb-select-list-border-width, 1px) var(--border-color);border-top:none;border-bottom:solid var(--border-bottom-width) var(--border-color);box-shadow:var(--jb-select-list-box-shadow);box-sizing:border-box;z-index:calc(var(--base-z-index) + 2)}.jb-select-web-component .select-list-wrapper.--show{display:block}.jb-select-web-component .select-list-wrapper .select-list{width:100%;max-height:var(--jb-select-list-max-height, 400px);overflow-y:auto}.jb-select-web-component .select-list-wrapper .select-list slot{padding:var(--jb-select-list-padding, 16px 0)}.jb-select-web-component .select-list-wrapper .select-list slot:empty{padding:0}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component .select-list-wrapper .select-list{max-height:calc(var(--mobile-modal-height) - 15rem)}}.jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar{width:9px;background-color:rgba(0,0,0,0)}.jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar-thumb{background-color:var(--list-scroll-color);border-radius:var(--jb-select-list-scroll-border-radius, 4px)}.jb-select-web-component .select-list-wrapper .empty-list-placeholder{display:none;text-align:center;color:var(--empty-list-placeholder-color);font-style:italic;padding:8px 0}.jb-select-web-component .select-list-wrapper .empty-list-placeholder.--show{display:block}</style>\n<div class="jb-select-web-component">\r\n    <div class="label-wrapper">\r\n        <label class="--hide"><span class="label-value"></span></label>\r\n        \x3c!-- close button will be visible on mobile modal --\x3e\r\n        <div class="close-button">\r\n            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">\r\n                <path class="close-btn-svg-bg" opacity="0.4" d="M16.3399 1.9998H7.66988C4.27988 1.9998 1.99988 4.3798 1.99988 7.9198V16.0898C1.99988 19.6198 4.27988 21.9998 7.66988 21.9998H16.3399C19.7299 21.9998 21.9999 19.6198 21.9999 16.0898V7.9198C21.9999 4.3798 19.7299 1.9998 16.3399 1.9998Z"/>\r\n                <path class="close-btn-svg-path" d="M15.0156 13.7703L13.2366 11.9923L15.0146 10.2143C15.3566 9.8733 15.3566 9.3183 15.0146 8.9773C14.6726 8.6333 14.1196 8.6343 13.7776 8.9763L11.9986 10.7543L10.2196 8.9743C9.87758 8.6323 9.32358 8.6343 8.98158 8.9743C8.64058 9.3163 8.64058 9.8713 8.98158 10.2123L10.7616 11.9923L8.98558 13.7673C8.64358 14.1093 8.64358 14.6643 8.98558 15.0043C9.15658 15.1763 9.37958 15.2613 9.60358 15.2613C9.82858 15.2613 10.0516 15.1763 10.2226 15.0053L11.9986 13.2293L13.7786 15.0083C13.9496 15.1793 14.1726 15.2643 14.3966 15.2643C14.6206 15.2643 14.8446 15.1783 15.0156 15.0083C15.3576 14.6663 15.3576 14.1123 15.0156 13.7703Z" fill="#200E32"/>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n    <div class="select-box">\r\n        <div class="start-section">\r\n            <slot name="start-section"></slot>\r\n        </div>\r\n        <div class="middle-section">\r\n            <div class="selected-value-wrapper"></div>\r\n            <div class="front-box">\r\n                <input class="input">\r\n\r\n            </div>\r\n        </div>\r\n        <div class="end-section">\r\n            <div class="arrow-icon" tabindex="-1">\r\n                <slot name="select-arrow-icon">\r\n                    <svg width="8" height="8" id="Layer_1" x="0px" y="0px" viewBox="0 0 494.1 371.1" style="enable-background:new 0 0 494.1 371.1;" xml:space="preserve">\r\n                        <path d="M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2  c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z"/>\r\n                    </svg>\r\n                </slot>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class="middle-divider">\r\n        \x3c!-- middle line between input box and list (hidden by default but user may need it sometimes) --\x3e\r\n    </div>\r\n    <div class="select-list-wrapper">\r\n        <div class="select-list" tabindex="-1">\r\n            <slot></slot>\r\n        </div>\r\n        <div class="empty-list-placeholder">\r\n            <slot name="empty-list-message">no item available</slot>\r\n        </div>\r\n    </div>\r\n    <div class="message-box"></div>\r\n</div>',e.appendChild(t.content.cloneNode(!0)),this.elements={input:e.querySelector(".select-box input"),componentWrapper:e.querySelector(".jb-select-web-component"),selectedValueWrapper:e.querySelector(".selected-value-wrapper"),messageBox:e.querySelector(".message-box"),optionList:e.querySelector(".select-list"),optionListWrapper:e.querySelector(".select-list-wrapper"),optionListSlot:e.querySelector(".select-list-wrapper .select-list slot"),arrowIcon:e.querySelector(".arrow-icon"),label:{wrapper:e.querySelector("label"),text:e.querySelector("label .label-value")},emptyListPlaceholder:e.querySelector(".empty-list-placeholder")},c(this,te,"m",ge).call(this),c(this,te,"m",xe).call(this)},ge=function(){this.elements.input.addEventListener("change",(e=>{c(this,te,"m",Oe).call(this,e)})),this.elements.input.addEventListener("keypress",c(this,te,"m",Ce).bind(this)),this.elements.input.addEventListener("keyup",c(this,te,"m",Se).bind(this)),this.elements.input.addEventListener("beforeinput",c(this,te,"m",Me).bind(this)),this.elements.input.addEventListener("input",(e=>{c(this,te,"m",We).call(this,e)})),this.elements.input.addEventListener("focus",c(this,te,"m",Ae).bind(this)),this.elements.input.addEventListener("blur",c(this,te,"m",qe).bind(this)),this.elements.arrowIcon.addEventListener("click",c(this,te,"m",Le).bind(this)),this.addEventListener("select",c(this,te,"m",De).bind(this)),this.addEventListener("jb-option-connected",c(this,te,"m",Be).bind(this)),this.elements.optionListSlot.addEventListener("slotchange",c(this,te,"m",ye).bind(this))},we=function(){this.textValue="",this.value=this.getAttribute("value")||null},fe=function(e,t){switch(e){case"label":this.elements.label.text.innerHTML=t,null==t||null==t||""==t?this.elements.label.wrapper.classList.add("--hide"):this.elements.label.wrapper.classList.remove("--hide");break;case"message":this.elements.messageBox.innerHTML=t;break;case"value":c(this,te,"m",ke).call(this,t);break;case"required":this.required=""===t||"true"==t||"True"==t;break;case"placeholder":this.placeholder=t;break;case"search-placeholder":this.searchPlaceholder=t;break;case"error":this.reportValidity()}},xe=function(){Array.from(c(this,oe,"f")).some((e=>0==e.hidden))?this.elements.emptyListPlaceholder.classList.remove("--show"):this.elements.emptyListPlaceholder.classList.add("--show")},ye=function(e){c(this,te,"m",je).call(this),c(this,te,"m",xe).call(this)},je=function(){if(c(this,le,"f")){c(this,te,"m",ke).call(this,c(this,le,"f"))&&h(this,le,null,"f")}else this.value&&c(this,te,"m",ke).call(this,this.value)},ke=function(e){if(null==e)return c(this,te,"m",Ve).call(this,null,null),!0;let t=null;return c(this,oe,"f").forEach((i=>{i.value==e&&(t=i)})),t?(c(this,te,"m",Ve).call(this,t.value,t),!0):(h(this,le,e,"f"),!1)},Ee=function(e){c(this,oe,"f").forEach((e=>e.selected=!1)),e&&(e.selected=!0,h(this,ae,e,"f"))},Ve=function(e,t){h(this,le,null,"f"),h(this,ie,e,"f"),null==e?(this.textValue="",c(this,te,"m",Fe).call(this,null),c(this,te,"m",Ee).call(this,null),this.elements.componentWrapper.classList.remove("--has-value"),this.isMobileDevice&&this.isOpen||(this.elements.input.placeholder=this.placeholder)):(this.textValue="",c(this,te,"m",Ee).call(this,t),c(this,te,"m",Fe).call(this,e),this.elements.componentWrapper.classList.add("--has-value"),this.isMobileDevice&&this.isOpen||(this.elements.input.placeholder="")),c(this,te,"m",He).call(this,"")},Le=function(){this.isOpen?this.blur():this.focus()},Ce=function(e){const t={altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,composed:e.composed,ctrlKey:e.ctrlKey,detail:e.detail,isComposing:e.isComposing,key:e.key,location:e.location,metaKey:e.metaKey,view:e.view,repeat:e.repeat,shiftKey:e.shiftKey},i=new KeyboardEvent("keypress",t);this.dispatchEvent(i)},Me=function(e){},We=function(e){const t=e.target.value;this.textValue=t,c(this,te,"m",ze).call(this,t),c(this,he,"f").checkValidity({showError:!1}),c(this,te,"m",Te).call(this,e),c(this,te,"m",xe).call(this)},Te=function(e){const t=new InputEvent("input",{bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed,data:e.data,dataTransfer:e.dataTransfer,detail:e.detail,inputType:e.inputType,isComposing:e.isComposing,targetRanges:e.getTargetRanges(),view:e.view});this.dispatchEvent(t)},Se=function(e){const t=e.target.value;"Backspace"!==e.key&&"Delete"!==e.key||c(this,te,"m",ze).call(this,t),c(this,te,"m",Ne).call(this,e)},ze=function(e){""!==e?this.elements.selectedValueWrapper.classList.add("--search-typed"):this.elements.selectedValueWrapper.classList.remove("--search-typed")},Ne=function(e){const t=new KeyboardEvent("keyup",{altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,ctrlKey:e.ctrlKey,detail:e.detail,key:e.key,shiftKey:e.shiftKey,charCode:e.charCode,location:e.location,composed:e.composed,isComposing:e.isComposing,metaKey:e.metaKey,repeat:e.repeat,keyCode:e.keyCode,view:e.view});this.dispatchEvent(t)},Oe=function(e){const t=e.target.value;h(this,se,t,"f")},Ae=function(){this.focus()},qe=function(e){const t=e.relatedTarget;this.elements.optionListWrapper.contains(t)||this.elements.arrowIcon.contains(t)||this.blur()},Pe=function(){this.elements.optionListWrapper.classList.add("--show")},Ke=function(){this.elements.optionListWrapper.classList.remove("--show")},He=function(e){const t=new CustomEvent("filter-change",{detail:{filterText:e},bubbles:!1,cancelable:!1,composed:!1});this.dispatchEvent(t)},De=function(e){const t=c(this,ie,"f"),i=c(this,ae,"f"),s=e.composedPath()[0];if(s instanceof V){const l=s.value;c(this,te,"m",Ie).call(this,l,s),this.blur();c(this,te,"m",Re).call(this).defaultPrevented&&(e.preventDefault(),c(this,te,"m",Ie).call(this,t,i))}},Be=function(e){e.stopPropagation();const t=e.composedPath()[0];t.addEventListener("jb-option-disconnected",c(this,te,"m",$e).bind(this),{once:!0,passive:!0}),t.setSelectElement(this),c(this,oe,"f").add(t),c(this,le,"f")&&c(this,te,"m",je).call(this),c(this,te,"m",xe).call(this)},$e=function(e){e.stopPropagation();const t=e.target;c(this,oe,"f").delete(t),c(this,te,"m",xe).call(this),t.value==c(this,ie,"f")&&c(this,te,"m",je).call(this)},Ie=function(e,t){c(this,te,"m",Ve).call(this,e,t),c(this,te,"m",Ge).call(this,!0)},Re=function(){const e=new Event("change",{bubbles:!0,cancelable:!0});return this.dispatchEvent(e),e},Fe=function(e){if(this.elements.selectedValueWrapper.innerHTML="",null!=e){const t=c(this,te,"m",Je).call(this,e);this.elements.selectedValueWrapper.appendChild(t)}},Je=function(e){return"function"==typeof this.callbacks.getSelectedValueDOM?this.callbacks.getSelectedValueDOM(e,c(this,ae,"f")):c(this,te,"m",_e).call(this)},_e=function(){let e=[];c(this,ae,"f")&&(e=c(this,ae,"f").optionContent);const t=document.createElement("div");return t.classList.add("selected-value"),t.append(...e.map((e=>e.cloneNode()))),t},Ze=function(){const e=[];if(null!==this.getAttribute("error")&&this.getAttribute("error").trim().length>0&&e.push({validator:void 0,message:this.getAttribute("error"),stateType:"customError"}),this.required){const t=`${this.getAttribute("label")||""} حتما باید انتخاب شود`;e.push({validator:({value:e})=>null!=e,message:t,stateType:"valueMissing"})}return e},Ge=function(e){if(!this.isAutoValidationDisabled)return c(this,he,"f").checkValidity({showError:e})},Qe=function(e){if(e.isAllValid)c(this,pe,"f")?.setValidity({},"");else{const t={};let i="";e.validationList.forEach((e=>{e.isValid||(e.validation.stateType?t[e.validation.stateType]=!0:t.customError=!0,""==i&&(i=e.message))})),c(this,pe,"f")?.setValidity(t,i)}};!customElements.get("jb-select")&&window.customElements.define("jb-select",Ue),exports.JBOptionListWebComponent=K,exports.JBOptionWebComponent=V,exports.JBSelectWebComponent=Ue;
+var e=Object.create,t=Object.defineProperty,s=Object.getOwnPropertyDescriptor,i=Object.getOwnPropertyNames,o=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,n=(n,a,r)=>(r=null!=n?e(o(n)):{},((e,o,n,a)=>{if(o&&"object"==typeof o||"function"==typeof o)for(var r,c=i(o),h=0,d=c.length;h<d;h++)r=c[h],l.call(e,r)||r===n||t(e,r,{get:(e=>o[e]).bind(null,r),enumerable:!(a=s(o,r))||a.enumerable});return e})(!a&&n&&n.__esModule?r:t(r,"default",{value:n,enumerable:!0}),n));const a=n(require("jb-validation")),r=n(require("jb-core"));function c(e,t,s,i){if("a"===s&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===s?i:"a"===s?i.call(e):i?i.value:t.get(e)}function h(e,t,s,i,o){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?o.call(e,s):o?o.value=s:t.set(e,s),s}var d,b,p,m,u,v,g,f,w,x,y,j,k,E;var L=class extends HTMLElement{get value(){return c(this,m,"f")}set value(e){h(this,m,e,"f")}set selected(e){h(this,u,e,"f"),e?c(this,b,"f").componentWrapper.classList.add("--selected"):c(this,b,"f").componentWrapper.classList.remove("--selected")}get selected(){return c(this,u,"f")}get optionContent(){return c(this,b,"f").contentWrapper.querySelector("slot").assignedNodes()}get hidden(){return c(this,v,"f")}set hidden(e){h(this,v,e,"f"),e?(c(this,b,"f").componentWrapper.classList.add("--hidden"),this.setAttribute("inert","")):(c(this,b,"f").componentWrapper.classList.remove("--hidden"),this.removeAttribute("inert"))}get optionContentText(){return this.optionContent.reduce(((e,t)=>e+=t.textContent),"")}constructor(){super(),d.add(this),b.set(this,void 0),p.set(this,void 0),m.set(this,void 0),u.set(this,!1),v.set(this,!1),c(this,d,"m",f).call(this),c(this,d,"m",y).call(this)}connectedCallback(){c(this,d,"m",x).call(this)}setSelectElement(e){e&&(h(this,p,e,"f"),c(this,p,"f").addEventListener("filter-change",c(this,d,"m",g).bind(this)))}disconnectedCallback(){c(this,p,"f")?.removeEventListener("filter-change",c(this,d,"m",g).bind(this));const e=new CustomEvent("jb-option-disconnected",{bubbles:!0,composed:!0,cancelable:!1});this.dispatchEvent(e)}static get observedAttributes(){return["value"]}attributeChangedCallback(e,t,s){c(this,d,"m",j).call(this,e,s)}};b=new WeakMap,p=new WeakMap,m=new WeakMap,u=new WeakMap,v=new WeakMap,d=new WeakSet,g=function(e){const{filterText:t}=e.detail;this.optionContentText.toLowerCase().includes(t.toLowerCase())?this.hidden=!1:this.hidden=!0},f=function(){const e=this.attachShadow({mode:"open"}),t=document.createElement("template");t.innerHTML='<style>.jb-options-web-component .option-content-wrapper{min-height:36px;padding:4px 16px;display:flex;align-items:center;font-size:.9em;color:var(--jb-select-option-color, inherit);background-color:var(--background-color)}.jb-options-web-component .option-content-wrapper:hover{background-color:var(--background-color-hover);color:var(--option-color-hover);cursor:pointer}.jb-options-web-component.--selected{font-weight:900}.jb-options-web-component.--hidden{display:none}</style>\n\n    <div class="jb-options-web-component">\n      <div class="option-content-wrapper">\n        <slot></slot>\n      </div>\n    </div>\n  ',e.appendChild(t.content.cloneNode(!0)),h(this,b,{componentWrapper:e.querySelector(".jb-options-web-component"),contentWrapper:e.querySelector(".option-content-wrapper")},"f"),c(this,d,"m",w).call(this)},w=function(){c(this,b,"f").componentWrapper.addEventListener("click",c(this,d,"m",k).bind(this))},x=function(){const e=new CustomEvent("jb-option-connected",{bubbles:!0,composed:!0});this.dispatchEvent(e)},y=function(){this.value=this.getAttribute("value")||null},j=function(e,t){if("value"===e)h(this,m,t,"f")},k=function(){c(this,u,"f")||c(this,d,"m",E).call(this)},E=function(){const e=new CustomEvent("select",{bubbles:!0,cancelable:!1,composed:!0});this.dispatchEvent(e)};var C,V,M,W,T,S,z,O,A,q,P,N;!customElements.get("jb-option")&&window.customElements.define("jb-option",L);var K=class extends HTMLElement{get callbacks(){return c(this,V,"f")}get optionList(){return c(this,M,"f")||[]}set optionList(e){Array.isArray(e)?(h(this,M,e,"f"),c(this,C,"m",O).call(this,e)):console.error("your provided option list to jb-option-list is not a array. you must provide array value",{value:e})}constructor(){super(),C.add(this),V.set(this,{}),M.set(this,[]),W.set(this,new Map),c(this,C,"m",z).call(this)}connectedCallback(){}setCallback(e,t){switch(c(this,V,"f")[e]=t,e){case"getContentDOM":case"getTitle":c(this,C,"m",T).call(this);break;case"getValue":c(this,C,"m",S).call(this)}}};V=new WeakMap,M=new WeakMap,W=new WeakMap,C=new WeakSet,T=function(){c(this,W,"f").forEach(((e,t)=>{c(this,C,"m",P).call(this,t,e)}))},S=function(){c(this,W,"f").forEach(((e,t)=>{e.value=c(this,C,"m",A).call(this,t)}))},z=function(){const e=this.attachShadow({mode:"open"}),t=document.createElement("template");e.appendChild(t.content.cloneNode(!0))},O=function(e){this.shadowRoot.innerHTML="",e.forEach((e=>{const t=c(this,C,"m",N).call(this,e);this.shadowRoot.appendChild(t),c(this,W,"f").set(e,t)}))},A=function(e){this.callbacks.getValue&&"function"!=typeof this.callbacks.getValue&&console.error("getOptionValue callback is not a function");try{return"function"==typeof c(this,V,"f").getValue?c(this,V,"f").getValue(e):e}catch(t){console.error("Invalid getOptionValue callback Result, must be a function that returns the value of an option",e)}},q=function(e){if("function"!=typeof c(this,V,"f").getTitle)return String(e);try{return c(this,V,"f").getTitle(e)}catch(t){console.error("Invalid getOptionTitle callback Result, must be a function that returns the value of an option",e)}return""},P=function(e,t){t.innerHTML="","function"==typeof c(this,V,"f").getContentDOM?t.appendChild(c(this,V,"f").getContentDOM(e)):t.innerHTML=c(this,C,"m",q).call(this,e)},N=function(e){const t=new L;return c(this,C,"m",P).call(this,e,t),t.value=c(this,C,"m",A).call(this,e),t};!customElements.get("jb-option-list")&&window.customElements.define("jb-option-list",K);var H=class{lightness;chroma;hue;variableName;get value(){return`oklch(${this.lightness} ${this.chroma} ${this.hue})`}constructor(e,t){this.variableName=t,this.lightness=e.lightness,this.chroma=e.chroma,this.hue=e.hue}};function D(e){return new H({lightness:6*(3+1.3*e)*.01,chroma:.001*(14+.09*e),hue:258.36},`--jb-neutral-${e}`)}function B(e){return new H({lightness:e.lightness-.1,chroma:e.chroma-.05,hue:e.hue},`${e.variableName}-pressed`)}function $(e){const t=Math.min(e.lightness+.12*(1-e.lightness),.985),s=e.chroma*(1-.15*(t-e.lightness));return new H({lightness:t,chroma:Number(s.toFixed(3)),hue:e.hue},`${e.variableName}-l`)}function I(e){const t=Math.max(e.lightness-.12*e.lightness,.02),s=e.chroma*(1-.15*(t-e.lightness));return new H({lightness:t,chroma:s,hue:e.hue},`${e.variableName}-d`)}function R(e){const t=Math.min(e.lightness+.65*(1-e.lightness),.93),s=.55*e.chroma*(1-.08*(t-e.lightness)),i=e.hue>=70&&e.hue<=162?5:-3,o=e.hue+i;return new H({lightness:t,chroma:Number(s.toFixed(3)),hue:o},`${e.variableName}-subtle`)}function F(e){const t=Math.max(e.lightness-.35,.22),s=Math.min(1.6*e.chroma,.28);return new H({lightness:Number(t.toFixed(3)),chroma:Number(s.toFixed(3)),hue:e.hue},`${e.variableName}-contrast`)}function J(e){return{main:e,hover:(t=e,new H({lightness:t.lightness+.07,chroma:t.chroma+.07,hue:t.hue},`${t.variableName}-hover`)),pressed:B(e),light:$(e),dark:I(e),subtle:R(e),contrast:F(e)};var t}const _=new H({lightness:.6,chroma:.26,hue:256},"--jb-primary"),Z=new H({lightness:.6,chroma:.26,hue:286},"--jb-secondary"),G=new H({lightness:.75,chroma:.18,hue:70},"--jb-yellow"),Q=new H({lightness:.68,chroma:.1484,hue:162.1},"--jb-green"),U=new H({lightness:.6,chroma:.22,hue:23.21},"--jb-red"),X={single:{black:new H({lightness:.14,chroma:0,hue:0},"--jb-black"),white:new H({lightness:1,chroma:0,hue:0},"--jb-white"),highlight:new H({lightness:.93,chroma:.2302,hue:125.18},"--jb-highlight")},neutral:[D(0),D(1),D(2),D(3),D(4),D(5),D(6),D(7),D(8),D(9),D(10)],primary:J(_),secondary:J(Z),yellow:J(G),green:J(Q),red:J(U)};function Y(e){try{const{value:t,...s}=e;window.CSS.registerProperty({...s}),function(e,t){try{t&&(document.documentElement.style.getPropertyValue(e)||document.documentElement.style.setProperty(e,t))}catch(e){}}(e.name,t)}catch(e){}}function ee(e,t){Y({name:t??e.variableName,syntax:"<color>",inherits:!0,initialValue:e.value})}function te(){var e;Y({name:"--jb-radius",inherits:!0,value:"1rem",initialValue:"16px",syntax:"<length-percentage>"}),Y({name:"--jb-radius-xs",inherits:!0,value:"0.5rem",initialValue:"8px",syntax:"<length-percentage>"}),Y({name:"--jb-radius-sm",inherits:!0,value:"0.75rem",initialValue:"12px",syntax:"<length-percentage>"}),Y({name:"--jb-radius-lg",inherits:!0,value:"1.25rem",initialValue:"20px",syntax:"<length-percentage>"}),Y({name:"--jb-radius-xl",inherits:!0,value:"1.5rem",initialValue:"24px",syntax:"<length-percentage>"}),function(e){ee(e.neutral[0],"--jb-neutral"),ee(e.primary.main),ee(e.secondary.main),ee(e.single.black),ee(e.single.white),ee(e.single.highlight),ee(e.yellow.main),ee(e.green.main),ee(e.red.main),ee(e.red.main);for(let t=1;t<=10;t++)ee(e.neutral[t])}(X),ee((e=X).single.black,"--jb-text-primary"),ee(e.neutral[7],"--jb-text-secondary"),ee(e.single.white,"--jb-text-contrast")}var se,ie,oe,le,ne,ae,re,ce,he,de,be,pe,me,ue,ve,ge,fe,we,xe,ye,je,ke,Ee,Le,Ce,Ve,Me,We,Te,Se,ze,Oe,Ae,qe,Pe,Ne,Ke,He,De,Be,$e,Ie,Re,Fe,Je,_e,Ze,Ge,Qe,Ue,Xe=class extends HTMLElement{static get formAssociated(){return!0}get value(){return c(this,ie,"f")?c(this,ie,"f"):null}set value(e){c(this,se,"m",Ee).call(this,e)}get textValue(){return c(this,oe,"f")}set textValue(e){h(this,oe,e,"f"),this.elements.input.value=e,c(this,se,"m",De).call(this,e)}get selectedOptionTitle(){return this.value?c(this,ae,"f").optionContentText:""}get placeholder(){return c(this,re,"f")}set placeholder(e){h(this,re,e,"f"),null!==this.value&&void 0!==this.value?this.elements.input.placeholder="":this.elements.input.placeholder=e}get searchPlaceholder(){return c(this,ce,"f")}set searchPlaceholder(e){h(this,ce,e,"f")}get isMobileDevice(){return(0,r.isMobile)()}get isOpen(){return this.elements.componentWrapper.classList.contains("--focused")}get validation(){return c(this,de,"f")}get disabled(){return c(this,be,"f")}set disabled(e){h(this,be,e,"f"),this.elements.input.disabled=e,e?c(this,me,"f").states?.add("disabled"):c(this,me,"f").states?.delete("disabled")}set required(e){h(this,pe,e,"f"),c(this,de,"f").checkValiditySync({showError:!1})}get required(){return c(this,pe,"f")}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get name(){return this.getAttribute("name")||""}get isDirty(){return this.value!==this.initialValue}constructor(){super(),se.add(this),ie.set(this,void 0),oe.set(this,""),le.set(this,null),ne.set(this,new Set),ae.set(this,null),this.callbacks={},re.set(this,""),ce.set(this,"search"),de.set(this,new a.ValidationHelper({clearValidationError:this.clearValidationError.bind(this),showValidationError:this.showValidationError.bind(this),getValue:()=>c(this,se,"a",he),getValidations:c(this,se,"m",Ge).bind(this),getValueString:()=>c(this,oe,"f"),setValidationResult:c(this,se,"m",Ue).bind(this)})),be.set(this,!1),pe.set(this,!1),me.set(this,void 0),this.initialValue=null,"function"==typeof this.attachInternals&&h(this,me,this.attachInternals(),"f"),c(this,se,"m",ge).call(this),c(this,se,"m",we).call(this)}connectedCallback(){c(this,se,"m",ve).call(this),c(this,se,"m",ue).call(this)}static get observedAttributes(){return["label","message","value","required","placeholder","search-placeholder","error"]}attributeChangedCallback(e,t,s){c(this,se,"m",xe).call(this,e,s)}focus(){this.elements.input.focus(),c(this,se,"m",Ke).call(this),this.elements.componentWrapper.classList.add("--focused"),this.isMobileDevice&&(this.elements.input.placeholder=c(this,ce,"f"))}blur(){this.elements.componentWrapper.classList.remove("--focused"),this.textValue="",c(this,se,"m",Oe).call(this,""),c(this,se,"m",He).call(this),c(this,de,"f").checkValidity({showError:!0}),this.isMobileDevice&&(this.value?this.elements.input.placeholder="":this.elements.input.placeholder=this.placeholder),this.elements.input.blur()}showValidationError(e){const t="string"==typeof e?e:e.message;this.elements.messageBox.innerHTML=t,this.elements.messageBox.classList.add("--error")}clearValidationError(){this.elements.messageBox.innerHTML=this.getAttribute("message")||"",this.elements.messageBox.classList.remove("--error")}checkValidity(){const e=c(this,de,"f").checkValiditySync({showError:!1});if(!e.isAllValid){const e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}reportValidity(){const e=c(this,de,"f").checkValiditySync({showError:!0});if(!e.isAllValid){const e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}get validationMessage(){return c(this,me,"f")?.validationMessage||c(this,de,"f").resultSummary.message}};ie=new WeakMap,oe=new WeakMap,le=new WeakMap,ne=new WeakMap,ae=new WeakMap,re=new WeakMap,ce=new WeakMap,de=new WeakMap,be=new WeakMap,pe=new WeakMap,me=new WeakMap,se=new WeakSet,he=function(){return{inputtedText:c(this,oe,"f"),selectedOption:c(this,ae,"f"),value:this.value}},ue=function(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)},ve=function(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)},ge=function(){const e=this.attachShadow({mode:"open",delegatesFocus:!0});te();const t=document.createElement("template");t.innerHTML='<style>:host{--border-radius:var(--jb-select-border-radius, var(--jb-radius));--middle-div-height: var(--jb-select-middle-div-height, 0px);--border-width: var(--jb-select-border-width, 1px);--border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));--base-z-index: 1;--mobile-modal-z-index: 900;--mobile-modal-height: var(--jb-select-mobile-modal-height, 100vh);--border-color: var(--jb-select-border-color, var(--jb-neutral-10));--message-color: var(--jb-select-message-color, var(--jb-text-secondary));--label-color: var(--jb-select-label-color, var(--jb-text-primary));--value-color: var(--jb-select-value-color, var(--jb-text-primary));--placeholder-color: var(--jb-select-placeholder-color, var(--jb-neutral-6));--select-box-bg-color: var(--jb-select-bgcolor, var(--jb-neutral-10));--overlay-bg-color:var(--jb-select-overlay-bg-color, oklch(from var(--jb-neutral) l c h / calc(alpha - 0.5)));--modal-label-color:var(--jb-select-modal-label-color, var(--jb-text-contrast));--modal-close-color:var(--jb-select-modal-close-color, var(--jb-white));--close-bg-color:var(--jb-select-close-bg-color, var(--jb-neutral-2));--list-scroll-color:var(--jb-select-list-scroll-color, oklch(from var(--select-box-bg-color) calc(l - 0.2) c h));--empty-list-placeholder-color:var(--jb-select-empty-list-placeholder-color, var(--jb-text-secondary)) }:host(:state(invalid)){--message-color: var(--jb-select-message-error-color, var(--jb-red))}:host(:focus-within){--border-color: var(--jb-select-border-color-focus, var(--jb-neutral))}.jb-select-web-component{width:var(--jb-select-width, 100%);margin:var(--jb-select-margin, 0 0);position:relative;box-sizing:border-box}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused{position:fixed;bottom:0;top:initial;left:0;background-color:var(--overlay-bg-color);width:100vw;height:var(--mobile-modal-height);border-radius:var(--jb-select-mobile-modal-border-radius, 0) var(--jb-select-mobile-modal-border-radius, 0) 0 0;margin:0;padding:16px 8px;z-index:var(--mobile-modal-z-index)}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .select-box{height:var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));background-color:var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));border-width:var(--jb-select-mobile-search-border-width, var(--border-width));border-color:var(--jb-select-mobile-search-border-color, var(--border-color));border-bottom-width:var(--jb-select-mobile-search-border-bottom-width, var(--border-bottom-width));border-bottom-color:var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--border-color)));border-radius:var(--jb-select-mobile-search-border-radius, var(--border-radius))}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .select-box .front-box .arrow-icon{display:none}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .select-box .selected-value-wrapper{opacity:0;transition:none}}.jb-select-web-component.--focused .middle-divider{display:block}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .middle-divider{margin:var(--jb-select-middle-div-mobile-margin, 16px 0 0 0)}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .select-list-wrapper{position:initial;margin:var(--jb-select-mobile-item-list-margin, 16px 0);border-radius:var(--jb-select-mobile-item-list-border-radius, var(--border-radius))}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .label-wrapper{display:flex}}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .label-wrapper label{color:var(--modal-label-color);font-size:1.5em;display:flex;align-items:center}}.jb-select-web-component.--focused .label-wrapper .close-button{display:none}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--focused .label-wrapper .close-button{display:flex;width:48px;height:48px;justify-content:center;align-items:center;color:var(--modal-close-color)}.jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg{opacity:var(--jb-select-close-bg-opacity, 0.4);fill:var(--close-bg-color)}.jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path{fill:var(--modal-close-color)}}.jb-select-web-component.--has-value .select-box{border-color:var(--jb-select-border-color-selected, var(--border-color));background-color:var(--jb-select-bgcolor-selected, var(--select-box-bg-color))}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component.--has-value .select-box:focus-within{background-color:var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color))}}.jb-select-web-component .label-wrapper label{width:100%;margin:4px 0px;display:block;font-size:var(--jb-select-label-font-size, 0.8em);font-weight:var(--jb-select-label-font-weight, normal);color:var(--label-color)}.jb-select-web-component .label-wrapper label.--hide{display:none}.jb-select-web-component .label-wrapper .close-button{display:none}.jb-select-web-component .select-box{width:100%;box-sizing:border-box;height:var(--jb-select-height, 2.5rem);border:solid var(--border-width) var(--border-color);border-bottom:solid var(--border-bottom-width) var(--border-color);border-radius:var(--border-radius);background-color:var(--select-box-bg-color);margin:var(--jb-select-select-box-margin, 4px 0px 0px 0px);overflow:hidden;display:flex;padding-inline-end:var(--jb-select-box-padding-end, 1rem);gap:.5rem;align-items:center}.jb-select-web-component .select-box:focus-within{border-color:var(--jb-select-border-color, var(--border-color));border-bottom-color:var(--jb-select-border-color, var(--border-color));border-radius:var(--border-radius) var(--border-radius) 0 0}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component .select-box:focus-within{border-radius:var(--jb-select-mobile-search-border-radius, var(--border-radius))}}.jb-select-web-component .select-box .start-section{height:100%;width:auto;display:flex;justify-content:center;align-items:center}.jb-select-web-component .select-box .middle-section{position:relative;width:100%;height:100%;flex:1}.jb-select-web-component .select-box .middle-section .selected-value-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;overflow:hidden;z-index:1}.jb-select-web-component .select-box .middle-section .selected-value-wrapper.--search-typed{opacity:0}.jb-select-web-component .select-box .middle-section .selected-value-wrapper .selected-value{width:100%;box-sizing:border-box;height:100%;background-color:rgba(0,0,0,0);padding:2px 12px 0 12px;display:block;font-family:inherit;font-size:var(--jb-select-selected-value-font-size, 1.1em);color:var(--value-color);margin:0;border-radius:0;display:flex;align-items:center}.jb-select-web-component .select-box .middle-section .front-box{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;overflow:hidden;z-index:2}.jb-select-web-component .select-box .middle-section .front-box input{border:none;width:100%;box-sizing:border-box;height:100%;background-color:rgba(0,0,0,0);padding:2px 12px 0 12px;display:block;font-family:inherit;font-size:var(--jb-select-value-font-size, 1.1rem);color:var(--value-color);margin:0;border-radius:0}.jb-select-web-component .select-box .middle-section .front-box input:focus{outline:none}.jb-select-web-component .select-box .middle-section .front-box input::placeholder{color:var(--placeholder-color);font-size:var(--jb-select-placeholder-font-size, 1.1em)}.jb-select-web-component .select-box .end-section .arrow-icon{margin:var(--jb-select-arrow-icon-margin, 0 0 0 0)}.jb-select-web-component .select-box:focus-within .selected-value{opacity:.7;transition:all .3s ease}.jb-select-web-component .middle-divider{display:none;position:relative;z-index:calc(var(--base-z-index) + 3);width:100%;height:var(--middle-div-height);background-color:var(--jb-select-middle-div-color, var(--border-color));margin:var(--jb-select-middle-div-margin, calc(-1 * var(--border-bottom-width)) 0);border-radius:var(--jb-select-middle-div-radius, 0px)}.jb-select-web-component .message-box{font-size:var(--jb-select-message-font-size, 0.7em);font-weight:var(--jb-select-message-font-weight, normal);padding:4px 8px;color:var(--message-color)}.jb-select-web-component .message-box:empty{padding:0}.jb-select-web-component .message-box.--error{color:red}.jb-select-web-component .select-list-wrapper{display:none;position:absolute;margin:calc(-1*var(--border-bottom-width)) 0;height:auto;overflow:hidden;width:100%;background-color:var(--select-box-bg-color);border-radius:0 0 var(--border-radius) var(--border-radius);border:solid var(--jb-select-list-border-width, 1px) var(--border-color);border-top:none;border-bottom:solid var(--border-bottom-width) var(--border-color);box-shadow:var(--jb-select-list-box-shadow);box-sizing:border-box;z-index:calc(var(--base-z-index) + 2)}.jb-select-web-component .select-list-wrapper.--show{display:block}.jb-select-web-component .select-list-wrapper .select-list{width:100%;max-height:var(--jb-select-list-max-height, 400px);overflow-y:auto}.jb-select-web-component .select-list-wrapper .select-list slot{padding:var(--jb-select-list-padding, 16px 0)}.jb-select-web-component .select-list-wrapper .select-list slot:empty{padding:0}@media(min-width: 320px)and (max-width: 767px){.jb-select-web-component .select-list-wrapper .select-list{max-height:calc(var(--mobile-modal-height) - 15rem)}}.jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar{width:9px;background-color:rgba(0,0,0,0)}.jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar-thumb{background-color:var(--list-scroll-color);border-radius:var(--jb-select-list-scroll-border-radius, 4px)}.jb-select-web-component .select-list-wrapper .empty-list-placeholder{display:none;text-align:center;color:var(--empty-list-placeholder-color);font-style:italic;padding:8px 0}.jb-select-web-component .select-list-wrapper .empty-list-placeholder.--show{display:block}</style>\n\n  <div class="jb-select-web-component">\n    <div class="label-wrapper">\n        <label class="--hide"><span class="label-value"></span></label>\n        \x3c!-- close button will be visible on mobile modal --\x3e\n        <div class="close-button">\n            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">\n                <path class="close-btn-svg-bg" opacity="0.4"\n                    d="M16.3399 1.9998H7.66988C4.27988 1.9998 1.99988 4.3798 1.99988 7.9198V16.0898C1.99988 19.6198 4.27988 21.9998 7.66988 21.9998H16.3399C19.7299 21.9998 21.9999 19.6198 21.9999 16.0898V7.9198C21.9999 4.3798 19.7299 1.9998 16.3399 1.9998Z" />\n                <path class="close-btn-svg-path"\n                    d="M15.0156 13.7703L13.2366 11.9923L15.0146 10.2143C15.3566 9.8733 15.3566 9.3183 15.0146 8.9773C14.6726 8.6333 14.1196 8.6343 13.7776 8.9763L11.9986 10.7543L10.2196 8.9743C9.87758 8.6323 9.32358 8.6343 8.98158 8.9743C8.64058 9.3163 8.64058 9.8713 8.98158 10.2123L10.7616 11.9923L8.98558 13.7673C8.64358 14.1093 8.64358 14.6643 8.98558 15.0043C9.15658 15.1763 9.37958 15.2613 9.60358 15.2613C9.82858 15.2613 10.0516 15.1763 10.2226 15.0053L11.9986 13.2293L13.7786 15.0083C13.9496 15.1793 14.1726 15.2643 14.3966 15.2643C14.6206 15.2643 14.8446 15.1783 15.0156 15.0083C15.3576 14.6663 15.3576 14.1123 15.0156 13.7703Z"\n                    fill="#200E32" />\n            </svg>\n        </div>\n    </div>\n    <div class="select-box">\n        <div class="start-section">\n            <slot name="start-section"></slot>\n        </div>\n        <div class="middle-section">\n            <div class="selected-value-wrapper"></div>\n            <div class="front-box">\n                <input class="input" />\n\n            </div>\n        </div>\n        <div class="end-section">\n            <div class="arrow-icon" tabindex="-1">\n                <slot name="select-arrow-icon">\n                    <svg width=\'8\' height=\'8\' id=\'Layer_1\' x=\'0px\' y=\'0px\' viewBox=\'0 0 494.1 371.1\'\n                        style=\'enable-background:new 0 0 494.1 371.1;\' xml:space=\'preserve\'>\n                        <path\n                            d=\'M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2  c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z\' />\n                    </svg>\n                </slot>\n            </div>\n        </div>\n    </div>\n    <div class="middle-divider">\n        \x3c!-- middle line between input box and list (hidden by default but user may need it sometimes) --\x3e\n    </div>\n    <div class="select-list-wrapper">\n        <div class="select-list" tabindex="-1">\n            <slot></slot>\n        </div>\n        <div class="empty-list-placeholder">\n            <slot name="empty-list-message">no item available</slot>\n        </div>\n    </div>\n    <div class="message-box"></div>\n  </div>\n  ',e.appendChild(t.content.cloneNode(!0)),this.elements={input:e.querySelector(".select-box input"),componentWrapper:e.querySelector(".jb-select-web-component"),selectedValueWrapper:e.querySelector(".selected-value-wrapper"),messageBox:e.querySelector(".message-box"),optionList:e.querySelector(".select-list"),optionListWrapper:e.querySelector(".select-list-wrapper"),optionListSlot:e.querySelector(".select-list-wrapper .select-list slot"),arrowIcon:e.querySelector(".arrow-icon"),label:{wrapper:e.querySelector("label"),text:e.querySelector("label .label-value")},emptyListPlaceholder:e.querySelector(".empty-list-placeholder")},c(this,se,"m",fe).call(this),c(this,se,"m",ye).call(this)},fe=function(){this.elements.input.addEventListener("change",(e=>{c(this,se,"m",qe).call(this,e)})),this.elements.input.addEventListener("keypress",c(this,se,"m",Me).bind(this)),this.elements.input.addEventListener("keyup",c(this,se,"m",ze).bind(this)),this.elements.input.addEventListener("beforeinput",c(this,se,"m",We).bind(this)),this.elements.input.addEventListener("input",(e=>{c(this,se,"m",Te).call(this,e)})),this.elements.input.addEventListener("focus",c(this,se,"m",Pe).bind(this)),this.elements.input.addEventListener("blur",c(this,se,"m",Ne).bind(this)),this.elements.arrowIcon.addEventListener("click",c(this,se,"m",Ve).bind(this)),this.addEventListener("select",c(this,se,"m",Be).bind(this)),this.addEventListener("jb-option-connected",c(this,se,"m",$e).bind(this)),this.elements.optionListSlot.addEventListener("slotchange",c(this,se,"m",je).bind(this))},we=function(){this.textValue="",this.value=this.getAttribute("value")||null},xe=function(e,t){switch(e){case"label":this.elements.label.text.innerHTML=t,null==t||null==t||""==t?this.elements.label.wrapper.classList.add("--hide"):this.elements.label.wrapper.classList.remove("--hide");break;case"message":this.elements.messageBox.innerHTML=t;break;case"value":c(this,se,"m",Ee).call(this,t);break;case"required":this.required=""===t||"true"==t||"True"==t;break;case"placeholder":this.placeholder=t;break;case"search-placeholder":this.searchPlaceholder=t;break;case"error":this.reportValidity()}},ye=function(){Array.from(c(this,ne,"f")).some((e=>0==e.hidden))?this.elements.emptyListPlaceholder.classList.remove("--show"):this.elements.emptyListPlaceholder.classList.add("--show")},je=function(e){c(this,se,"m",ke).call(this),c(this,se,"m",ye).call(this)},ke=function(){if(c(this,le,"f")){c(this,se,"m",Ee).call(this,c(this,le,"f"))&&h(this,le,null,"f")}else this.value&&c(this,se,"m",Ee).call(this,this.value)},Ee=function(e){if(null==e)return c(this,se,"m",Ce).call(this,null,null),!0;let t=null;return c(this,ne,"f").forEach((s=>{s.value==e&&(t=s)})),t?(c(this,se,"m",Ce).call(this,t.value,t),!0):(h(this,le,e,"f"),!1)},Le=function(e){c(this,ne,"f").forEach((e=>e.selected=!1)),e&&(e.selected=!0,h(this,ae,e,"f"))},Ce=function(e,t){h(this,le,null,"f"),h(this,ie,e,"f"),null==e?(this.textValue="",c(this,se,"m",Je).call(this,null),c(this,se,"m",Le).call(this,null),this.elements.componentWrapper.classList.remove("--has-value"),this.isMobileDevice&&this.isOpen||(this.elements.input.placeholder=this.placeholder)):(this.textValue="",c(this,se,"m",Le).call(this,t),c(this,se,"m",Je).call(this,e),this.elements.componentWrapper.classList.add("--has-value"),this.isMobileDevice&&this.isOpen||(this.elements.input.placeholder="")),c(this,se,"m",De).call(this,"")},Ve=function(){this.isOpen?this.blur():this.focus()},Me=function(e){const t={altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,composed:e.composed,ctrlKey:e.ctrlKey,detail:e.detail,isComposing:e.isComposing,key:e.key,location:e.location,metaKey:e.metaKey,view:e.view,repeat:e.repeat,shiftKey:e.shiftKey},s=new KeyboardEvent("keypress",t);this.dispatchEvent(s)},We=function(e){},Te=function(e){const t=e.target.value;this.textValue=t,c(this,se,"m",Oe).call(this,t),c(this,de,"f").checkValidity({showError:!1}),c(this,se,"m",Se).call(this,e),c(this,se,"m",ye).call(this)},Se=function(e){const t=new InputEvent("input",{bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed,data:e.data,dataTransfer:e.dataTransfer,detail:e.detail,inputType:e.inputType,isComposing:e.isComposing,targetRanges:e.getTargetRanges(),view:e.view});this.dispatchEvent(t)},ze=function(e){const t=e.target.value;"Backspace"!==e.key&&"Delete"!==e.key||c(this,se,"m",Oe).call(this,t),c(this,se,"m",Ae).call(this,e)},Oe=function(e){""!==e?this.elements.selectedValueWrapper.classList.add("--search-typed"):this.elements.selectedValueWrapper.classList.remove("--search-typed")},Ae=function(e){const t=new KeyboardEvent("keyup",{altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,ctrlKey:e.ctrlKey,detail:e.detail,key:e.key,shiftKey:e.shiftKey,charCode:e.charCode,location:e.location,composed:e.composed,isComposing:e.isComposing,metaKey:e.metaKey,repeat:e.repeat,keyCode:e.keyCode,view:e.view});this.dispatchEvent(t)},qe=function(e){const t=e.target.value;h(this,oe,t,"f")},Pe=function(){this.focus()},Ne=function(e){const t=e.relatedTarget;this.elements.optionListWrapper.contains(t)||this.elements.arrowIcon.contains(t)||this.blur()},Ke=function(){this.elements.optionListWrapper.classList.add("--show")},He=function(){this.elements.optionListWrapper.classList.remove("--show")},De=function(e){const t=new CustomEvent("filter-change",{detail:{filterText:e},bubbles:!1,cancelable:!1,composed:!1});this.dispatchEvent(t)},Be=function(e){const t=c(this,ie,"f"),s=c(this,ae,"f"),i=e.composedPath()[0];if(i instanceof L){const o=i.value;c(this,se,"m",Re).call(this,o,i),this.blur();c(this,se,"m",Fe).call(this).defaultPrevented&&(e.preventDefault(),c(this,se,"m",Re).call(this,t,s))}},$e=function(e){e.stopPropagation();const t=e.composedPath()[0];t.addEventListener("jb-option-disconnected",c(this,se,"m",Ie).bind(this),{once:!0,passive:!0}),t.setSelectElement(this),c(this,ne,"f").add(t),c(this,le,"f")&&c(this,se,"m",ke).call(this),c(this,se,"m",ye).call(this)},Ie=function(e){e.stopPropagation();const t=e.target;c(this,ne,"f").delete(t),c(this,se,"m",ye).call(this),t.value==c(this,ie,"f")&&c(this,se,"m",ke).call(this)},Re=function(e,t){c(this,se,"m",Ce).call(this,e,t),c(this,se,"m",Qe).call(this,!0)},Fe=function(){const e=new Event("change",{bubbles:!0,cancelable:!0});return this.dispatchEvent(e),e},Je=function(e){if(this.elements.selectedValueWrapper.innerHTML="",null!=e){const t=c(this,se,"m",_e).call(this,e);this.elements.selectedValueWrapper.appendChild(t)}},_e=function(e){return"function"==typeof this.callbacks.getSelectedValueDOM?this.callbacks.getSelectedValueDOM(e,c(this,ae,"f")):c(this,se,"m",Ze).call(this)},Ze=function(){let e=[];c(this,ae,"f")&&(e=c(this,ae,"f").optionContent);const t=document.createElement("div");return t.classList.add("selected-value"),t.append(...e.map((e=>e.cloneNode()))),t},Ge=function(){const e=[];if(null!==this.getAttribute("error")&&this.getAttribute("error").trim().length>0&&e.push({validator:void 0,message:this.getAttribute("error"),stateType:"customError"}),this.required){const t=`${this.getAttribute("label")||""} حتما باید انتخاب شود`;e.push({validator:({value:e})=>null!=e,message:t,stateType:"valueMissing"})}return e},Qe=function(e){if(!this.isAutoValidationDisabled)return c(this,de,"f").checkValidity({showError:e})},Ue=function(e){if(e.isAllValid)c(this,me,"f")?.setValidity({},"");else{const t={};let s="";e.validationList.forEach((e=>{e.isValid||(e.validation.stateType?t[e.validation.stateType]=!0:t.customError=!0,""==s&&(s=e.message))})),c(this,me,"f")?.setValidity(t,s)}};!customElements.get("jb-select")&&window.customElements.define("jb-select",Xe),exports.JBOptionListWebComponent=K,exports.JBOptionWebComponent=L,exports.JBSelectWebComponent=Xe;
 //# sourceMappingURL=index.cjs.js.map