@rededor/cura 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/cura/{p-5466758a.entry.js → p-8433fec9.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as a,H as s,g as t}from"./p-312791fb.js";import{f as c}from"./p-f9b8f665.js";const i='@charset "UTF-8";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox,.indeterminate .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover,.indeterminate .checkbox:hover{border-color:var(--color-light) !important;background:var(--color-lighter)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}';const o=i;const n=class{constructor(a){e(this,a);this.onchange=r(this,"onchange",7);if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}this.isDarkBackground=()=>this.background==="dark";this.isDarkIconColor=()=>this.iconColor==="dark";this.handleClick=()=>{if(this.disabled)return;this.indeterminate=false;this.checked=!this.checked;this.internals.setFormValue(this.value);this.onchange.emit({value:this.value,checked:this.checked,indeterminate:this.indeterminate})};this.checked=false;this.indeterminate=false;this.status="default";this.disabled=false;this.required=false;this.label=undefined;this.ontabindex=0;this.position="left";this.value=undefined;this.name=undefined;this.size="medium";this.background="light";this.iconColor="dark";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size":`${c[this.size].size}px`,"--gap":`${c[this.size].gap}px`})}setColors(){const e=[{name:"--color-base",background:`${this.color}-base`},{name:"--color-lighter",background:`${this.color}-lighter`},{name:"--color-light",background:`${this.color}-light`},{name:"--color-dark",background:`${this.color}-dark`},{name:"--info-base",background:"info-base"},{name:"--error-base",background:"error-base"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--success-dark",background:"success-dark"},{name:"--error-lighter",background:"error-lighter"},{name:"--neutral-black",background:"neutral-black"},{name:"--primary-base-neutral-white",background:this.isDarkBackground()?"primary-base":"neutral-white"},{name:"--neutral-base-neutral-medium",background:this.isDarkBackground()?"neutral-base":"neutral-medium"},{name:"--neutral-black-neutral-purewhite",background:this.isDarkBackground()?"neutral-black":"neutral-purewhite"},{name:"--neutral-black-neutral-white",background:this.isDarkBackground()?"neutral-black":"neutral-white"},{name:"--neutral-darker-neutral-base",background:this.isDarkBackground()?"neutral-darker":"neutral-base"},{name:"--neutral-base-neutral-base",background:this.isDarkBackground()?"primary-base":"neutral-base"},{name:"--neutral-purewhite-neutral-dark",background:this.isDarkBackground()?"neutral-purewhite":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkBackground()?"primary-base":"neutral-medium"},{name:"--success-base-lighter",background:this.isDarkBackground()?"success-base":"success-lighter"},{name:"--success-dark-base",background:this.isDarkBackground()?"success-dark":"success-base"},{name:"--error-base-lighter",background:this.isDarkBackground()?"error-base":"error-lighter"},{name:"--error-dark-base",background:this.isDarkBackground()?"error-dark":"error-base"}];e.forEach((e=>{this.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.background)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}formAssociatedCallback(e){e.ariaLabel=this.label}formStateRestoreCallback(e){this.value=e.value;this.checked=e.checked;this.indeterminate=e.indeterminate;this.internals.setFormValue(this.value)}formResetCallback(){this.value="";this.checked=false;this.indeterminate=false;this.internals.setValidity({});this.internals.setFormValue(this.value)}formDisabledCallback(e){this.disabled=e}getClasses(){const e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e[this.background]=true;e["indeterminate"]=this.indeterminate;e["position"]=this.position==="right";e[this.status]=true;return e}assignColor(e){if(this.disabled)return this.isDarkBackground()?"neutral-dark":"neutral-dark";const r={success:{icon:"success-dark",label:this.isDarkBackground()?"success-lighter":"success-darker",message:this.isDarkBackground()?"success-base":"success-dark"},error:{icon:"error-dark",label:this.isDarkBackground()?"error-lighter":"neutral-darker",message:this.isDarkBackground()?"error-base":"error-dark"},default:{icon:this.isDarkIconColor()?"neutral-black":"neutral-purewhite",label:this.isDarkBackground()?"neutral-white":"neutral-black",message:this.isDarkBackground()?"primary-lighter":"neutral-dark"}};return r[this.status][e]}getIcon(){const e=this.indeterminate?"minus":"check";const r=this.assignColor("icon");const s=this.size==="large"?20:"micro";return a("cura-icon",{class:"icon",name:e,size:s,color:r})}render(){return a(s,{key:"9f96ab8f12502dc777ee00d02d8306ecd3ce9776"},a("div",{key:"4a782c31e4d97df0c7cc1d60a3c83125d01d31f6",class:this.getClasses(),style:this.styles,onClick:this.handleClick},a("div",{key:"c2de03821506646ffbe84cd7106ab91c1cdeba55",class:"info"},a("div",{key:"9a8985036acf8770541b69e35ff449572a6afb0e",class:"label-wrapper"},a("cura-label",{key:"a128e382aa3f25c849fbe488f3820aa9b3cdb775",class:"label",weight:"bold",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&a("cura-paragraph",{key:"84e4817990f7499f047af339ce1ed9efc0ed060c",lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),a("cura-label",{key:"33527a9347eb8971d869b7e5ec492c3a7057b123",color:this.assignColor("message"),size:"xsmall",class:"message"},a("slot",{key:"cda5d0d9eca328fd20663f941a41325eb1ad0e29"}))),a("div",{key:"588b04e6c9c74daf8406d0cca1e50bd39d1703c9",class:"checkbox",tabIndex:this.ontabindex},a("input",{key:"209fee01eb3051602e5a9633de4fdea59d986a53",type:"checkbox",name:this.name,value:this.value,disabled:this.disabled,required:this.required,checked:this.checked,indeterminate:this.indeterminate}),this.getIcon())))}static get formAssociated(){return true}get host(){return t(this)}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"],iconColor:["assignColor"]}}};n.style=o;export{n as cura_checkbox};
-//# sourceMappingURL=p-5466758a.entry.js.map
+import{r as e,c as r,h as a,H as s,g as t}from"./p-312791fb.js";import{f as c}from"./p-f9b8f665.js";const i='@charset "UTF-8";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox,.indeterminate .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover,.indeterminate .checkbox:hover{border-color:var(--color-light) !important;background:var(--color-lighter)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}';const o=i;const n=class{constructor(a){e(this,a);this.onchange=r(this,"onchange",7);if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}this.isDarkBackground=()=>this.background==="dark";this.isDarkIconColor=()=>this.iconColor==="dark";this.handleClick=()=>{if(this.disabled)return;this.indeterminate=false;this.checked=!this.checked;this.internals.setFormValue(this.value);this.onchange.emit({value:this.value,checked:this.checked,indeterminate:this.indeterminate})};this.checked=false;this.indeterminate=false;this.status="default";this.disabled=false;this.required=false;this.label=undefined;this.ontabindex=0;this.position="left";this.value=undefined;this.name=undefined;this.size="medium";this.background="light";this.iconColor="dark";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size":`${c[this.size].size}px`,"--gap":`${c[this.size].gap}px`})}setColors(){const e=[{name:"--color-base",background:`${this.color}-base`},{name:"--color-lighter",background:`${this.color}-lighter`},{name:"--color-light",background:`${this.color}-light`},{name:"--color-dark",background:`${this.color}-dark`},{name:"--info-base",background:"info-base"},{name:"--error-base",background:"error-base"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--success-dark",background:"success-dark"},{name:"--error-lighter",background:"error-lighter"},{name:"--neutral-black",background:"neutral-black"},{name:"--primary-base-neutral-white",background:this.isDarkBackground()?"primary-base":"neutral-white"},{name:"--neutral-base-neutral-medium",background:this.isDarkBackground()?"neutral-base":"neutral-medium"},{name:"--neutral-black-neutral-purewhite",background:this.isDarkBackground()?"neutral-black":"neutral-purewhite"},{name:"--neutral-black-neutral-white",background:this.isDarkBackground()?"neutral-black":"neutral-white"},{name:"--neutral-darker-neutral-base",background:this.isDarkBackground()?"neutral-darker":"neutral-base"},{name:"--neutral-base-neutral-base",background:this.isDarkBackground()?"primary-base":"neutral-base"},{name:"--neutral-purewhite-neutral-dark",background:this.isDarkBackground()?"neutral-purewhite":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkBackground()?"primary-base":"neutral-medium"},{name:"--success-base-lighter",background:this.isDarkBackground()?"success-base":"success-lighter"},{name:"--success-dark-base",background:this.isDarkBackground()?"success-dark":"success-base"},{name:"--error-base-lighter",background:this.isDarkBackground()?"error-base":"error-lighter"},{name:"--error-dark-base",background:this.isDarkBackground()?"error-dark":"error-base"}];e.forEach((e=>{this.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.background)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}formAssociatedCallback(e){e.ariaLabel=this.label}formStateRestoreCallback(e){this.value=e.value;this.checked=e.checked;this.indeterminate=e.indeterminate;this.internals.setFormValue(this.value)}formResetCallback(){this.value="";this.checked=false;this.indeterminate=false;this.internals.setValidity({});this.internals.setFormValue(this.value)}formDisabledCallback(e){this.disabled=e}getClasses(){const e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e[this.background]=true;e["indeterminate"]=this.indeterminate;e["position"]=this.position==="right";e[this.status]=true;return e}assignColor(e){if(this.disabled)return this.isDarkBackground()?"neutral-dark":"neutral-dark";const r={success:{icon:"success-dark",label:this.isDarkBackground()?"success-lighter":"success-darker",message:this.isDarkBackground()?"success-base":"success-dark"},error:{icon:"error-dark",label:this.isDarkBackground()?"error-lighter":"neutral-darker",message:this.isDarkBackground()?"error-base":"error-dark"},default:{icon:this.isDarkIconColor()?"neutral-black":"neutral-purewhite",label:this.isDarkBackground()?"neutral-white":"neutral-black",message:this.isDarkBackground()?"primary-lighter":"neutral-dark"}};return r[this.status][e]}getIcon(){const e=this.indeterminate?"minus":"check";const r=this.assignColor("icon");const s=this.size==="large"?20:"micro";return a("cura-icon",{class:"icon",name:e,size:s,color:r})}render(){return a(s,{key:"b74eebdbcaed952fa2157c3cbb3a84ce92bb9e6c"},a("div",{key:"e18e4e5aa12a3e298db65399ebf002aa991100f2",class:this.getClasses(),style:this.styles,onClick:this.handleClick},a("div",{key:"fdbcf3ec4b12bf9c6d80cded5ce9d17c4f5e2a39",class:"info"},a("div",{key:"cbe76b43956bed00ab638b953a44d941ffb748d5",class:"label-wrapper"},a("cura-label",{key:"259c5e5e63a6d36ed15845899eaf8c76b2b50273",class:"label",weight:"bold",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&a("cura-paragraph",{key:"42d8b2777d4790bd8f83a7ddc939c6ab584b5cf0",lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),a("cura-label",{key:"bcafaacf64c8967f78a3e9b7ecfe6d1412517ea3",color:this.assignColor("message"),size:"xsmall",class:"message"},a("slot",{key:"c9cc9e74cc9048ead8375a158253491e1aae4dfe"}))),a("div",{key:"e63ba7ef796c9d46cf4729facf1be985b8174028",class:"checkbox",tabIndex:this.ontabindex},a("input",{key:"2e7e2e302e577f26d8022fe4a0108f0e6727450f",type:"checkbox",name:this.name,value:this.value,disabled:this.disabled,required:this.required,checked:this.checked,indeterminate:this.indeterminate}),this.getIcon())))}static get formAssociated(){return true}get host(){return t(this)}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"],iconColor:["assignColor"]}}};n.style=o;export{n as cura_checkbox};
+//# sourceMappingURL=p-8433fec9.entry.js.map

package/dist/cura/p-a5e53dd4.entry.js

@@ -0,0 +1,2 @@
+import{r,c as e,h as t,H as i,g as a}from"./p-312791fb.js";const n=":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;user-select:none;text-align:left !important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .up-down-icon{order:3;padding-right:12px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field input{padding:0px 12px 0px 8px}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0 !important}.wrapper.transparent{background-color:transparent;padding:0px;max-height:80px}.wrapper.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.wrapper.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.wrapper.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.wrapper.transparent .helper-text{margin-top:0px}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within .cura-input-field input{color:var(--neutral-black) !important}.wrapper.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker) !important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.wrapper.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.wrapper.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker) !important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.wrapper.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.wrapper.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.disabled .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.disabled .cura-input-field .feedback-icon{padding-left:12px}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.wrapper.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:scroll;box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}.menu.open{border-radius:0 !important}";const o=n;const l=class{constructor(t){r(this,t);this.selected=e(this,"selected",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.styles={};this.theme=window.CuraAPI.theme;this.handleMutations=r=>{r.forEach((r=>{if(r.type==="attributes"){if(r.attributeName==="selected")this.updateSelectedOption();if(r.attributeName==="value")this.filterOptions()}}))};this.onOptiselected=r=>{const e=r.target;this.clearSelectedAttributes();e.setAttribute("selected","true")};this.handleKeyDown=r=>{var e;if(!this.isOpen)return;const{key:t}=r;if(t==="ArrowDown"){r.preventDefault();this.updateActiveIndex(1)}if(t==="ArrowUp"){r.preventDefault();this.updateActiveIndex(-1)}if(t==="Enter"){(e=this.options[this.activeIndex])===null||e===void 0?void 0:e.click()}};this.handleInputChange=r=>{this.value=r.target.value;this.isOpen=!!this.value.length;this.internals.setFormValue(this.value)};this.handleClick=r=>{if(this.disabled)return r.preventDefault();const e=r.target;if(e.tagName==="CURA-SELECT-OPTION")return this.onOptiselected(r);this.isOpen=!this.isOpen};this.label="";this.placeholder="";this.value="";this.mode="default";this.size="medium";this.status="default";this.disabled=false;this.required=false;this.isHovered=false;this.isFocused=false;this.isOpen=false;this.options=undefined;this.activeIndex=-1}formAssociatedCallback(r){r.ariaLabel=this.label}formStateRestoreCallback(r){this.value=r.value;this.updateSelectedOption()}formResetCallback(){this.value="";this.clearSelectedAttributes();this.internals.setFormValue(this.value);this.internals.setValidity({})}formDisabledCallback(r){this.disabled=r}componentWillLoad(){this.initializeOptions()}componentDidLoad(){this.setupMutationObserver()}connectedCallback(){this.applyStyles()}disconnectedCallback(){var r;(r=this.mutationObserver)===null||r===void 0?void 0:r.disconnect()}initializeOptions(){this.options=this.host.querySelectorAll("cura-select-option");this.options.forEach((r=>{r.setAttribute("size",this.size);r.setAttribute("selected","false")}))}applyStyles(){const{fonts:r,colors:e}=this.theme;const t=r.getWeights();this.styles=Object.assign(Object.assign({},this.styles),{"--font-weight-medium":t.medium,"--font-weight-bold":t.bold,"--font-weight-regular":t.regular,"--font-color":r.getColor(),"--font-family":r.getFamily(),"--font-size":r.getSize()});const i=["primary-base","neutral-purewhite","neutral-white","neutral-black","neutral-medium","neutral-light","neutral-base","neutral-dark","success-dark","success-darker","success-lighter","error-lighter","error-dark","error-darker","error-base","info-base"];i.forEach((r=>{this.styles[`--${r}`]=e.getColor(r)}))}setupMutationObserver(){this.mutationObserver=new MutationObserver(this.handleMutations);this.mutationObserver.observe(this.host,{attributes:true,subtree:true,attributeFilter:["selected","value"]})}updateSelectedOption(){const r=this.host.querySelector("cura-select-option[selected]");if(r){const e=r.textContent;if(this.value!==e){this.value=e;this.isOpen=false;this.internals.setFormValue(this.value);this.selected.emit({value:this.value,selected:true})}}}clearSelectedAttributes(){this.options.forEach((r=>r.removeAttribute("selected")))}filterOptions(){const r=this.value.toLowerCase();this.options.forEach((e=>{var t;const i=((t=e.textContent)===null||t===void 0?void 0:t.toLowerCase())||"";const a=this.isOpen?i.includes(r):true;e.style.display=a?"block":"none"}))}updateActiveIndex(r){if(this.options.length===0)return;this.activeIndex=(this.activeIndex+r+this.options.length)%this.options.length;this.updateOptionHighlights()}updateOptionHighlights(){this.options.forEach(((r,e)=>r.active=e===this.activeIndex))}getClasses(){return{wrapper:true,label:!!this.label,disabled:this.disabled,transparent:this.mode==="transparent",[this.size.toLowerCase()]:true,[this.status.toLowerCase()]:true}}getColor(r){if(this.disabled)return"neutral-medium";const e=this.status==="default";const t=this.isFocused||this.isHovered;if(r==="label"){if(!e||t)return"neutral-black";return"neutral-dark"}if(t&&e)return"neutral-black";if(this.status==="success")return"success-dark";if(this.status==="error")return"error-dark";return"neutral-dark"}renderIcon(){if(this.status==="default")return null;const r={success:"checkCircle",error:"alertCircle"}[this.status];return t("cura-icon",{class:"feedback-icon",name:r,iconset:"default",size:this.size==="large"?20:16,color:this.getColor("icon"),style:this.styles})}render(){return t(i,{key:"35fd5d99705c940578485552a50bcec54efe036e",style:this.styles},t("div",{key:"1903a7b03e32215678670a2d7d8b49643cc2086b",class:this.getClasses(),tabIndex:0,ref:r=>this.selectRef=r,onMouseEnter:()=>this.isHovered=true,onMouseLeave:()=>this.isHovered=false,onKeyDown:this.handleKeyDown,onClick:this.handleClick},this.label&&t("cura-label",{key:"99aeba22f4b6204d936b6a9dcf6affa29e9411a8",class:"label",weight:"bold",size:this.size==="large"?"small":"xsmall",color:this.getColor("label")},this.label," ",this.required&&t("span",{key:"7e335f6fdb0ee6d9e987fba8ec245006f02761b5",class:"required"},"* ")),t("div",{key:"c9ba61c15951f6689724025778fe8a933ab5b9bd",class:{"cura-input-field":true,open:this.isOpen}},this.renderIcon(),t("input",{key:"0c1369e661fc6e34c8bf75f5ef4b977e749dc0b5",tabIndex:0,type:"text",autocomplete:"off",onFocus:()=>this.isFocused=true,onBlur:()=>this.isFocused=false,"aria-required":String(this.required),"aria-disabled":String(this.disabled),"aria-invalid":String(this.status==="error"),onInput:this.handleInputChange,style:this.styles,placeholder:this.placeholder,disabled:this.disabled,required:this.required,value:this.value}),t("cura-icon",{key:"95b5105660bcfc0c1562955449a1fc737048e8c2",name:this.isOpen?"up":"down",class:"up-down-icon",color:this.disabled?"neutral-dark":"primary-base",size:16,iconset:"default"})),t("cura-label",{key:"b5565e686989fe0c1e62f6c01fef52b2829bf4f5",class:"helper-text",size:"xsmall",color:this.getColor("text"),weight:this.mode==="transparent"?"bold":"regular"},t("slot",{key:"4a265609d8742b7e736920d54525cb2405785ea6"})),this.isOpen&&t("div",{key:"8f0609c7c2e709506ea4bdeeebdb1aae8abde1df",class:{menu:true,open:this.isOpen}},t("slot",{key:"b6f84b885909ea1a9213cb3d590a02d736320228",name:"option"}))))}static get formAssociated(){return true}get host(){return a(this)}};l.style=o;const p=":host{display:block}.item{display:flex;padding:12px 8px;cursor:pointer;justify-content:space-between;align-items:center;box-sizing:border-box;background:var(--neutral-purewhite)}.item.selected{background-color:var(--primary-lighter-50);border-bottom:1px solid var(--primary-light)}.item:hover:not(.selected){background:var(--neutral-white);box-shadow:0 2px 0 0 var(--neutral-light)}.item.active{background:var(--neutral-white) !important}.item.selected.active{background-color:var(--primary-lighter-50) !important;box-shadow:none}";const s=p;const d=class{constructor(e){r(this,e);this.theme=window.CuraAPI.theme;this.value=undefined;this.selected=false;this.active=false;this.size="small";this.styles={}}connectedCallback(){const r=[{name:"--primary-lighter-50",theme:"primary-lighter",opacity:.5},{name:"--primary-light",theme:"primary-light"},{name:"--neutral-light",theme:"neutral-light"},{name:"--neutral-purewhite",theme:"neutral-purewhite"}];r.forEach((r=>this.styles=Object.assign(Object.assign({},this.styles),{[r.name]:this.theme.colors.getColor(r.theme,r===null||r===void 0?void 0:r.opacity)})))}getSize(r){const e={large:r==="label"?"medium":20,medium:r==="label"?"small":16,small:r==="label"?"xsmall":"micro"};return e[this.size]||e["medium"]}getClasses(){return{item:true,selected:this.selected,active:this.active}}render(){return t(i,{key:"231c03411af0a5639358ff232e4a81287a8571f0",slot:"option"},t("div",{key:"b5baa8f7c4a4e863b96ffda1454a8c339d4b2656",class:this.getClasses(),style:this.styles},t("cura-label",{key:"36d3381260263303242c443004f7e201c2683d4e",color:`${this.selected?"primary-base":"neutral-black"}`,size:this.getSize("label"),"margin-block":"0"},t("slot",{key:"cc72fed8c51592c8fd076d091272879c7572a181"})),this.selected&&t("cura-icon",{key:"e118108f84d49b3d6574a143f09b2c43d43d11a8",name:"check",size:this.getSize("icon"),color:"primary-base"})))}get host(){return a(this)}static get watchers(){return{size:["getSize"]}}};d.style=s;export{l as cura_select,d as cura_select_option};
+//# sourceMappingURL=p-a5e53dd4.entry.js.map

package/dist/cura/{p-ced36448.entry.js.map → p-a5e53dd4.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["curaSelectCss","CuraSelectStyle0","CuraSelect","this","styles","theme","window","CuraAPI","handleMutations","mutations","forEach","mutation","type","attributeName","updateSelectedOption","filterOptions","onOptiselected","event","selectedOption","target","clearSelectedAttributes","setAttribute","handleKeyDown","isOpen","key","preventDefault","updateActiveIndex","_a","options","activeIndex","click","handleInputChange","e","value","length","internals","setFormValue","handleClick","disabled","tagName","formAssociatedCallback","form","ariaLabel","label","formStateRestoreCallback","state","formResetCallback","setValidity","formDisabledCallback","componentWillLoad","initializeOptions","componentDidLoad","setupMutationObserver","connectedCallback","applyStyles","disconnectedCallback","mutationObserver","disconnect","host","querySelectorAll","option","size","fonts","colors","fontWeights","getWeights","Object","assign","medium","bold","regular","getColor","getFamily","getSize","colorKeys","MutationObserver","observe","attributes","subtree","attributeFilter","querySelector","selectedValue","textContent","selected","emit","removeAttribute","inputValue","toLowerCase","optionValue","isVisible","includes","style","display","direction","updateOptionHighlights","index","active","getClasses","wrapper","transparent","mode","status","item","isStatusDefault","isHoveredOrFocused","isFocused","isHovered","renderIcon","icon","success","error","h","class","name","iconset","color","render","Host","tabIndex","ref","el","selectRef","onMouseEnter","onMouseLeave","onKeyDown","onClick","weight","required","open","autocomplete","onFocus","onBlur","String","onInput","placeholder","menu","curaSelectOptionCss","CuraSelectOptionStyle0","CuraSelectOption","opacity","element","sizeMap","large","small","slot"],"sources":["src/components/forms/cura-select/cura-select.scss?tag=cura-select&encapsulation=shadow","src/components/forms/cura-select/cura-select.tsx","src/components/forms/cura-select-options/cura-select-option.scss?tag=cura-select-option&encapsulation=shadow","src/components/forms/cura-select-options/cura-select-option.tsx"],"sourcesContent":["@import \"../../../scss/mixins/forms.scss\";\n\n:host {\n  display: block;\n  position: relative;\n  font-family: var(--font-family);\n}\n\n.wrapper {\n  width: 100%;\n  user-select: none;\n  text-align: left !important;\n\n  @include cura-label();\n  @include helper-text();\n\n  @include cura-input-field() {\n    .up-down-icon {\n      order: 3;\n      padding-right: 12px;\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    input {\n      padding: 0px 12px 0px 8px;\n    }\n\n    &.open {\n      border-radius: 4px 4px 0 0 !important;\n    }\n\n\n  }\n\n  @include cura-input-transparent();\n\n  @include cura-forms-hover();\n  @include cura-forms-focused();\n\n\n  @include cura-forms-success();\n  @include cura-forms-error();\n  @include cura-forms-disabled();\n\n  @include cura-forms-small() {\n    &.label {.menu {top: 53px;} }\n    .menu { top: 33px; }\n  }\n\n  @include cura-forms-medium() {\n    &.label {.menu { top: 61px;} }\n    .menu { top: 40px; }\n  }\n\n  @include cura-forms-large() {\n    &.label {.menu { top: 69px } }\n    .menu {top: 47px; }\n  }\n}\n\n.required {\n  color: red;\n}\n\n.menu {\n  position: absolute;\n  left: 0;\n  right: -1px;\n  background: #fff;\n  border: 2px solid var(--neutral-light);\n  border-radius: 4px;\n  z-index: 1000;\n  max-height: 285px;\n  overflow: hidden;\n  border-top: transparent;\n  align-items: center;\n\n  scrollbar-color: var(--neutral-medium) var(--neutral-black-20);\n  overflow-y: scroll;\n  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n\n  &.open {\n    border-radius: 0 !important;\n  }\n}\n\n","import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select',\n  styleUrl: 'cura-select.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraSelect {\n  /**\n   * The label text for the select component.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) label: string = '';\n\n  /**\n   * Placeholder text for the input field.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) placeholder: string = '';\n\n  /**\n   * Current value of the select component.\n   * Reflects as an attribute in the DOM and is mutable.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Display mode of the select component.\n   * Can be 'default' or 'transparent'.\n   */\n  @Prop({ reflect: true }) mode: 'default' | 'transparent' = 'default';\n\n  /**\n   * Size of the select component.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Status of the select component.\n   * Can be 'success', 'error', or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'success' | 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the select component is required.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Internal state: Whether the input is hovered.\n   * Default: false\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Internal state: Whether the input is focused.\n   * Default: false\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Internal state: Whether the dropdown menu is open.\n   * Default: false\n   */\n  @State() isOpen: boolean = false;\n\n  /**\n   * Internal state: Collection of options for the select component.\n   */\n  @State() options: NodeListOf<HTMLElement>;\n\n\n  @State() activeIndex: number = -1\n\n  /**\n   * Reference to the host element of the component.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Event emitted when an option is selected.\n   */\n  @Event() selected: EventEmitter;\n\n  /**\n   * Reference to the select component element.\n   */\n  selectRef: HTMLElement;\n\n  /**\n   * MutationObserver to watch changes in the component.\n   */\n  mutationObserver: MutationObserver;\n\n  /**\n   * Styles to be applied to the component.\n   */\n  styles = {};\n\n  /**\n   * Theme object containing font and color information.\n   */\n  theme = window.CuraAPI.theme;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n * Callback for form association.\n */\n  formAssociatedCallback(form: { ariaLabel: string; }) {\n    form.ariaLabel = this.label;\n  }\n\n  /**\n * Callback to restore the switch state from the form.\n */\n  formStateRestoreCallback(state: { value: string }) {\n    this.value = state.value;\n    this.updateSelectedOption();\n  }\n\n  /**\n * Callback to reset the switch state when the form is reset.\n */\n  formResetCallback() {\n    this.value = '';\n    this.clearSelectedAttributes()\n    this.internals.setFormValue(this.value);\n    this.internals.setValidity({});\n  }\n\n  /**\n  * Callback to update the switch's disabled state when the form's disabled state changes.\n  */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Lifecycle method called before the component is rendered.\n   * Initializes the options for the select component.\n   */\n  componentWillLoad() {\n    this.initializeOptions();\n  }\n  /**\n   * Lifecycle method called after the component is rendered.\n   * Initializes select-related functionality.\n   */\n  componentDidLoad() {\n    this.setupMutationObserver();\n  }\n  /**\n   * Lifecycle method called when the component is connected to the DOM.\n   * Applies styles based on the theme.\n   */\n  connectedCallback() {\n    this.applyStyles();\n  }\n  /**\n   * Lifecycle method called when the component is disconnected from the DOM.\n   * Disconnects the MutationObserver if it exists.\n   */\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  initializeOptions() {\n    this.options = this.host.querySelectorAll('cura-select-option');\n    this.options.forEach(option => {\n      option.setAttribute('size', this.size);\n      option.setAttribute('selected', 'false');\n    });\n  }\n  /**\n   * Applies styles to the component based on the theme.\n   */\n  applyStyles() {\n    const { fonts, colors } = this.theme;\n    const fontWeights = fonts.getWeights();\n\n    this.styles = {\n      ...this.styles,\n      '--font-weight-medium': fontWeights.medium,\n      '--font-weight-bold': fontWeights.bold,\n      '--font-weight-regular': fontWeights.regular,\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-size': fonts.getSize(),\n    };\n\n    const colorKeys = [\n      'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',\n      'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',\n      'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'\n    ];\n\n    colorKeys.forEach(key => {\n      this.styles[`--${key}`] = colors.getColor(key);\n    });\n  }\n  /**\n   * Sets up a MutationObserver to watch for changes in the component.\n   */\n  setupMutationObserver() {\n    this.mutationObserver = new MutationObserver(this.handleMutations);\n    this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n  }\n  /**\n   * Handles mutations observed by the MutationObserver.\n   * Updates the selected option or filters options based on the mutation type.\n   */\n  handleMutations = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes') {\n        if (mutation.attributeName === 'selected') this.updateSelectedOption();\n        if (mutation.attributeName === 'value') this.filterOptions();\n      }\n    });\n  };\n  /**\n   * Handles the selection of an option.\n   */\n  onOptiselected = (event: Event) => {\n    const selectedOption = event.target as HTMLElement;\n    this.clearSelectedAttributes();\n    selectedOption.setAttribute('selected', 'true');\n  };\n\n  updateSelectedOption() {\n    const selectedOption = this.host.querySelector('cura-select-option[selected]');\n\n    if (selectedOption) {\n      const selectedValue = selectedOption.textContent;\n      if (this.value !== selectedValue) {\n        this.value = selectedValue ;\n        this.isOpen = false;\n        this.internals.setFormValue(this.value);\n        this.selected.emit({ value: this.value, selected: true });\n      }\n    }\n  }\n\n  /**\n   * Clears the 'selected' attribute from all options.\n   */\n  clearSelectedAttributes() {\n    this.options.forEach(option => option.removeAttribute('selected'));\n  }\n\n  /**\n   * Filters the options based on the current input value.\n   */\n  filterOptions() {\n    const inputValue = this.value.toLowerCase();\n\n    this.options.forEach(option => {\n      const optionValue = option.textContent?.toLowerCase() || '';\n      const isVisible = this.isOpen ? optionValue.includes(inputValue) : true;\n      option.style.display = isVisible ? 'block' : 'none';\n    });\n  }\n\n  handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.isOpen) return;\n    const { key } = event\n\n    if (key === 'ArrowDown') {\n      event.preventDefault();\n      this.updateActiveIndex(1);\n    }\n\n    if (key === 'ArrowUp') {\n      event.preventDefault();\n      this.updateActiveIndex(-1);\n    }\n\n    if (key === 'Enter') {\n      this.options[this.activeIndex]?.click();\n    }\n  }\n\n  updateActiveIndex(direction: number) {\n    if (this.options.length === 0) return;\n    this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n    this.updateOptionHighlights()\n  }\n\n  updateOptionHighlights() {\n    this.options.forEach((option, index) => (option as any).active = index === this.activeIndex);\n  }\n\n\n  handleInputChange = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.isOpen = !!this.value.length;\n    this.internals.setFormValue(this.value);\n  };\n\n\n  getClasses() {\n    return {\n      wrapper: true,\n      label: !!this.label,\n      disabled: this.disabled,\n      transparent: this.mode === 'transparent',\n      [this.size.toLowerCase()]: true,\n      [this.status.toLowerCase()]: true,\n    };\n  }\n\n  /**\n   * Determines the color based on the item type and component state.\n   */\n  getColor(item: 'label' | 'text' | 'icon') {\n    if (this.disabled) return 'neutral-medium';\n\n    const isStatusDefault = this.status === 'default';\n    const isHoveredOrFocused = this.isFocused || this.isHovered;\n\n    if (item === 'label') {\n      if (!isStatusDefault || isHoveredOrFocused) return 'neutral-black';\n      return 'neutral-dark';\n    }\n\n    if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n    if (this.status === 'success') return 'success-dark';\n    if (this.status === 'error') return 'error-dark';\n\n    return 'neutral-dark';\n  }\n\n  /**\n   * Renders the icon based on the component's status.\n   */\n  renderIcon() {\n    if (this.status === 'default') return null;\n    const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n    return (\n      <cura-icon\n        class='feedback-icon'\n        name={icon}\n        iconset='default'\n        size={this.size === 'large' ? 20 : 16}\n        color={this.getColor('icon')}\n        style={this.styles}\n      />\n    );\n  }\n\n  handleClick = (event: MouseEvent) => {\n    if (this.disabled) return event.preventDefault();\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n    this.isOpen = !this.isOpen;\n  };\n\n\n  render() {\n    return (\n      <Host style={this.styles}>\n        <div\n          class={this.getClasses()}\n          tabIndex={0}\n          ref={(el) => (this.selectRef = el as HTMLElement)}\n          onMouseEnter={() => (this.isHovered = true)}\n          onMouseLeave={() => (this.isHovered = false)}\n          onKeyDown={this.handleKeyDown}\n          onClick={this.handleClick}\n        >\n          {this.label && (\n            <cura-label\n              class='label'\n              weight='bold'\n              size={this.size === 'large' ? 'small' : 'xsmall'}\n              color={this.getColor('label')}\n            >\n              {this.label} {this.required && <span class='required'>* </span>}\n            </cura-label>\n          )}\n\n          <div class={{\n            'cura-input-field': true,\n            'open': this.isOpen\n          }}>\n            {this.renderIcon()}\n            <input\n              tabIndex={0}\n              type=\"text\"\n              autocomplete='off'\n              onFocus={() => (this.isFocused = true)}\n              onBlur={() => (this.isFocused = false)}\n              aria-required={String(this.required)}\n              aria-disabled={String(this.disabled)}\n              aria-invalid={String(this.status === 'error')}\n              onInput={this.handleInputChange}\n              style={this.styles}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              value={this.value}\n            />\n            <cura-icon\n              name={this.isOpen ? 'up' : 'down'}\n              class=\"up-down-icon\"\n              color={this.disabled ? 'neutral-dark' : 'primary-base'}\n              size={16}\n              iconset='default'\n            />\n          </div>\n          <cura-label\n            class=\"helper-text\"\n            size='xsmall'\n            color={this.getColor('text')}\n            weight={this.mode === 'transparent' ? 'bold' : 'regular'} >\n            <slot></slot>\n          </cura-label>\n          {this.isOpen && (\n            <div class={{\n              'menu': true,\n              'open': this.isOpen\n            }}>\n              <slot name='option'></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.item {\n  display: flex;\n  padding: 12px 8px;\n  cursor: pointer;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  background: var(--neutral-purewhite);\n\n  &.selected {\n    background-color: var(--primary-lighter-50);\n    border-bottom: 1px solid var(--primary-light);\n  }\n\n  &:hover:not(.selected) {\n    background: var(--neutral-white);\n    box-shadow: 0 2px 0 0 var(--neutral-light);\n  }\n\n  &.active {\n    background: var(--neutral-white) !important;\n  }\n\n  &.selected.active {\n    background-color: var(--primary-lighter-50) !important;\n    box-shadow: none;\n  }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select-option',\n  styleUrl: 'cura-select-option.scss',\n  shadow: true,\n})\nexport class CuraSelectOption {\n  @Prop({ reflect: true }) value: string;\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) active: boolean = false;\n  @Prop() size: 'xsmall' | 'small' | 'medium' | 'large' = 'small'\n  @State() styles = {};\n  @Element() host: HTMLElement;\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    const colors = [\n      { name: '--primary-lighter-50', theme: 'primary-lighter', opacity: 0.5 },\n      { name: '--primary-light', theme: 'primary-light' },\n      { name: '--neutral-light', theme: 'neutral-light' },\n      { name: '--neutral-purewhite', theme: 'neutral-purewhite' },\n    ];\n\n    colors.forEach(color => this.styles = { ...this.styles, [color.name]: this.theme.colors.getColor(color.theme, color?.opacity) });\n  }\n\n  @Watch('size')\n  getSize(element: string) {\n    const sizeMap = {\n      large: element === 'label' ? 'medium' : 20,\n      medium: element === 'label' ? 'small' : 16,\n      small: element === 'label' ? 'xsmall' : 'micro',\n    };\n\n    return sizeMap[this.size] || sizeMap['medium'];\n  }\n\n  getClasses() {\n    return {\n      'item': true,\n      'selected': this.selected,\n      'active':this.active\n    };\n  }\n\n  render() {\n    return (\n      <Host slot=\"option\">\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-label color={`${this.selected ? 'primary-base' : 'neutral-black'}`} size={this.getSize('label')} margin-block=\"0\">\n            <slot></slot>\n          </cura-label>\n          {this.selected && <cura-icon name='check' size={this.getSize('icon')} color=\"primary-base\"></cura-icon>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["curaSelectCss","CuraSelectStyle0","CuraSelect","this","styles","theme","window","CuraAPI","handleMutations","mutations","forEach","mutation","type","attributeName","updateSelectedOption","filterOptions","onOptiselected","event","selectedOption","target","clearSelectedAttributes","setAttribute","handleKeyDown","isOpen","key","preventDefault","updateActiveIndex","_a","options","activeIndex","click","handleInputChange","e","value","length","internals","setFormValue","handleClick","disabled","tagName","formAssociatedCallback","form","ariaLabel","label","formStateRestoreCallback","state","formResetCallback","setValidity","formDisabledCallback","componentWillLoad","initializeOptions","componentDidLoad","setupMutationObserver","connectedCallback","applyStyles","disconnectedCallback","mutationObserver","disconnect","host","querySelectorAll","option","size","fonts","colors","fontWeights","getWeights","Object","assign","medium","bold","regular","getColor","getFamily","getSize","colorKeys","MutationObserver","observe","attributes","subtree","attributeFilter","querySelector","selectedValue","textContent","selected","emit","removeAttribute","inputValue","toLowerCase","optionValue","isVisible","includes","style","display","direction","updateOptionHighlights","index","active","getClasses","wrapper","transparent","mode","status","item","isStatusDefault","isHoveredOrFocused","isFocused","isHovered","renderIcon","icon","success","error","h","class","name","iconset","color","render","Host","tabIndex","ref","el","selectRef","onMouseEnter","onMouseLeave","onKeyDown","onClick","weight","required","open","autocomplete","onFocus","onBlur","String","onInput","placeholder","menu","curaSelectOptionCss","CuraSelectOptionStyle0","CuraSelectOption","opacity","element","sizeMap","large","small","slot"],"sources":["src/components/forms/cura-select/cura-select.scss?tag=cura-select&encapsulation=shadow","src/components/forms/cura-select/cura-select.tsx","src/components/forms/cura-select-options/cura-select-option.scss?tag=cura-select-option&encapsulation=shadow","src/components/forms/cura-select-options/cura-select-option.tsx"],"sourcesContent":["@import \"../../../scss/mixins/forms.scss\";\n\n:host {\n  display: block;\n  position: relative;\n  font-family: var(--font-family);\n}\n\n.wrapper {\n  width: 100%;\n  user-select: none;\n  text-align: left !important;\n\n  @include cura-label();\n  @include helper-text();\n\n  @include cura-input-field() {\n    .up-down-icon {\n      order: 3;\n      padding-right: 12px;\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    input {\n      padding: 0px 12px 0px 8px;\n    }\n\n    &.open {\n      border-radius: 4px 4px 0 0 !important;\n    }\n\n\n  }\n\n  @include cura-input-transparent();\n\n  @include cura-forms-hover();\n  @include cura-forms-focused();\n\n\n  @include cura-forms-success();\n  @include cura-forms-error();\n  @include cura-forms-disabled();\n\n  @include cura-forms-small() {\n    &.label {.menu {top: 53px;} }\n    .menu { top: 33px; }\n  }\n\n  @include cura-forms-medium() {\n    &.label {.menu { top: 61px;} }\n    .menu { top: 40px; }\n  }\n\n  @include cura-forms-large() {\n    &.label {.menu { top: 69px } }\n    .menu {top: 47px; }\n  }\n}\n\n.required {\n  color: red;\n}\n\n.menu {\n  position: absolute;\n  left: 0;\n  right: -1px;\n  background: #fff;\n  border: 2px solid var(--neutral-light);\n  border-radius: 4px;\n  z-index: 1000;\n  max-height: 285px;\n  overflow: hidden;\n  border-top: transparent;\n  align-items: center;\n\n  scrollbar-color: var(--neutral-medium) var(--neutral-black-20);\n  overflow-y: scroll;\n  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n\n  &.open {\n    border-radius: 0 !important;\n  }\n}\n\n","import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select',\n  styleUrl: 'cura-select.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraSelect {\n  /**\n   * The label text for the select component.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) label: string = '';\n\n  /**\n   * Placeholder text for the input field.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) placeholder: string = '';\n\n  /**\n   * Current value of the select component.\n   * Reflects as an attribute in the DOM and is mutable.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Display mode of the select component.\n   * Can be 'default' or 'transparent'.\n   */\n  @Prop({ reflect: true }) mode: 'default' | 'transparent' = 'default';\n\n  /**\n   * Size of the select component.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Status of the select component.\n   * Can be 'success', 'error', or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'success' | 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the select component is required.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Internal state: Whether the input is hovered.\n   * Default: false\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Internal state: Whether the input is focused.\n   * Default: false\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Internal state: Whether the dropdown menu is open.\n   * Default: false\n   */\n  @State() isOpen: boolean = false;\n\n  /**\n   * Internal state: Collection of options for the select component.\n   */\n  @State() options: NodeListOf<HTMLElement>;\n\n\n  @State() activeIndex: number = -1\n\n  /**\n   * Reference to the host element of the component.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Event emitted when an option is selected.\n   */\n  @Event() selected: EventEmitter;\n\n  /**\n   * Reference to the select component element.\n   */\n  selectRef: HTMLElement;\n\n  /**\n   * MutationObserver to watch changes in the component.\n   */\n  mutationObserver: MutationObserver;\n\n  /**\n   * Styles to be applied to the component.\n   */\n  styles = {};\n\n  /**\n   * Theme object containing font and color information.\n   */\n  theme = window.CuraAPI.theme;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n * Callback for form association.\n */\n  formAssociatedCallback(form: { ariaLabel: string; }) {\n    form.ariaLabel = this.label;\n  }\n\n  /**\n * Callback to restore the switch state from the form.\n */\n  formStateRestoreCallback(state: { value: string }) {\n    this.value = state.value;\n    this.updateSelectedOption();\n  }\n\n  /**\n * Callback to reset the switch state when the form is reset.\n */\n  formResetCallback() {\n    this.value = '';\n    this.clearSelectedAttributes()\n    this.internals.setFormValue(this.value);\n    this.internals.setValidity({});\n  }\n\n  /**\n  * Callback to update the switch's disabled state when the form's disabled state changes.\n  */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Lifecycle method called before the component is rendered.\n   * Initializes the options for the select component.\n   */\n  componentWillLoad() {\n    this.initializeOptions();\n  }\n  /**\n   * Lifecycle method called after the component is rendered.\n   * Initializes select-related functionality.\n   */\n  componentDidLoad() {\n    this.setupMutationObserver();\n  }\n  /**\n   * Lifecycle method called when the component is connected to the DOM.\n   * Applies styles based on the theme.\n   */\n  connectedCallback() {\n    this.applyStyles();\n  }\n  /**\n   * Lifecycle method called when the component is disconnected from the DOM.\n   * Disconnects the MutationObserver if it exists.\n   */\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  initializeOptions() {\n    this.options = this.host.querySelectorAll('cura-select-option');\n    this.options.forEach(option => {\n      option.setAttribute('size', this.size);\n      option.setAttribute('selected', 'false');\n    });\n  }\n  /**\n   * Applies styles to the component based on the theme.\n   */\n  applyStyles() {\n    const { fonts, colors } = this.theme;\n    const fontWeights = fonts.getWeights();\n\n    this.styles = {\n      ...this.styles,\n      '--font-weight-medium': fontWeights.medium,\n      '--font-weight-bold': fontWeights.bold,\n      '--font-weight-regular': fontWeights.regular,\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-size': fonts.getSize(),\n    };\n\n    const colorKeys = [\n      'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',\n      'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',\n      'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'\n    ];\n\n    colorKeys.forEach(key => {\n      this.styles[`--${key}`] = colors.getColor(key);\n    });\n  }\n  /**\n   * Sets up a MutationObserver to watch for changes in the component.\n   */\n  setupMutationObserver() {\n    this.mutationObserver = new MutationObserver(this.handleMutations);\n    this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n  }\n  /**\n   * Handles mutations observed by the MutationObserver.\n   * Updates the selected option or filters options based on the mutation type.\n   */\n  handleMutations = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes') {\n        if (mutation.attributeName === 'selected') this.updateSelectedOption();\n        if (mutation.attributeName === 'value') this.filterOptions();\n      }\n    });\n  };\n  /**\n   * Handles the selection of an option.\n   */\n  onOptiselected = (event: Event) => {\n    const selectedOption = event.target as HTMLElement;\n    this.clearSelectedAttributes();\n    selectedOption.setAttribute('selected', 'true');\n  };\n\n  updateSelectedOption() {\n    const selectedOption = this.host.querySelector('cura-select-option[selected]');\n\n    if (selectedOption) {\n      const selectedValue = selectedOption.textContent;\n      if (this.value !== selectedValue) {\n        this.value = selectedValue ;\n        this.isOpen = false;\n        this.internals.setFormValue(this.value);\n        this.selected.emit({ value: this.value, selected: true });\n      }\n    }\n  }\n\n  /**\n   * Clears the 'selected' attribute from all options.\n   */\n  clearSelectedAttributes() {\n    this.options.forEach(option => option.removeAttribute('selected'));\n  }\n\n  /**\n   * Filters the options based on the current input value.\n   */\n  filterOptions() {\n    const inputValue = this.value.toLowerCase();\n\n    this.options.forEach(option => {\n      const optionValue = option.textContent?.toLowerCase() || '';\n      const isVisible = this.isOpen ? optionValue.includes(inputValue) : true;\n      option.style.display = isVisible ? 'block' : 'none';\n    });\n  }\n\n  handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.isOpen) return;\n    const { key } = event\n\n    if (key === 'ArrowDown') {\n      event.preventDefault();\n      this.updateActiveIndex(1);\n    }\n\n    if (key === 'ArrowUp') {\n      event.preventDefault();\n      this.updateActiveIndex(-1);\n    }\n\n    if (key === 'Enter') {\n      this.options[this.activeIndex]?.click();\n    }\n  }\n\n  updateActiveIndex(direction: number) {\n    if (this.options.length === 0) return;\n    this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n    this.updateOptionHighlights()\n  }\n\n  updateOptionHighlights() {\n    this.options.forEach((option, index) => (option as any).active = index === this.activeIndex);\n  }\n\n\n  handleInputChange = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.isOpen = !!this.value.length;\n    this.internals.setFormValue(this.value);\n  };\n\n\n  getClasses() {\n    return {\n      wrapper: true,\n      label: !!this.label,\n      disabled: this.disabled,\n      transparent: this.mode === 'transparent',\n      [this.size.toLowerCase()]: true,\n      [this.status.toLowerCase()]: true,\n    };\n  }\n\n  /**\n   * Determines the color based on the item type and component state.\n   */\n  getColor(item: 'label' | 'text' | 'icon') {\n    if (this.disabled) return 'neutral-medium';\n\n    const isStatusDefault = this.status === 'default';\n    const isHoveredOrFocused = this.isFocused || this.isHovered;\n\n    if (item === 'label') {\n      if (!isStatusDefault || isHoveredOrFocused) return 'neutral-black';\n      return 'neutral-dark';\n    }\n\n    if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n    if (this.status === 'success') return 'success-dark';\n    if (this.status === 'error') return 'error-dark';\n\n    return 'neutral-dark';\n  }\n\n  /**\n   * Renders the icon based on the component's status.\n   */\n  renderIcon() {\n    if (this.status === 'default') return null;\n    const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n    return (\n      <cura-icon\n        class='feedback-icon'\n        name={icon}\n        iconset='default'\n        size={this.size === 'large' ? 20 : 16}\n        color={this.getColor('icon')}\n        style={this.styles}\n      />\n    );\n  }\n\n  handleClick = (event: MouseEvent) => {\n    if (this.disabled) return event.preventDefault();\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n    this.isOpen = !this.isOpen;\n  };\n\n\n  render() {\n    return (\n      <Host style={this.styles}>\n        <div\n          class={this.getClasses()}\n          tabIndex={0}\n          ref={(el) => (this.selectRef = el as HTMLElement)}\n          onMouseEnter={() => (this.isHovered = true)}\n          onMouseLeave={() => (this.isHovered = false)}\n          onKeyDown={this.handleKeyDown}\n          onClick={this.handleClick}\n        >\n          {this.label && (\n            <cura-label\n              class='label'\n              weight='bold'\n              size={this.size === 'large' ? 'small' : 'xsmall'}\n              color={this.getColor('label')}\n            >\n              {this.label} {this.required && <span class='required'>* </span>}\n            </cura-label>\n          )}\n\n          <div class={{\n            'cura-input-field': true,\n            'open': this.isOpen\n          }}>\n            {this.renderIcon()}\n            <input\n              tabIndex={0}\n              type=\"text\"\n              autocomplete='off'\n              onFocus={() => (this.isFocused = true)}\n              onBlur={() => (this.isFocused = false)}\n              aria-required={String(this.required)}\n              aria-disabled={String(this.disabled)}\n              aria-invalid={String(this.status === 'error')}\n              onInput={this.handleInputChange}\n              style={this.styles}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              value={this.value}\n            />\n            <cura-icon\n              name={this.isOpen ? 'up' : 'down'}\n              class=\"up-down-icon\"\n              color={this.disabled ? 'neutral-dark' : 'primary-base'}\n              size={16}\n              iconset='default'\n            />\n          </div>\n          <cura-label\n            class=\"helper-text\"\n            size='xsmall'\n            color={this.getColor('text')}\n            weight={this.mode === 'transparent' ? 'bold' : 'regular'} >\n            <slot></slot>\n          </cura-label>\n          {this.isOpen && (\n            <div class={{\n              'menu': true,\n              'open': this.isOpen\n            }}>\n              <slot name='option'></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.item {\n  display: flex;\n  padding: 12px 8px;\n  cursor: pointer;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  background: var(--neutral-purewhite);\n\n  &.selected {\n    background-color: var(--primary-lighter-50);\n    border-bottom: 1px solid var(--primary-light);\n  }\n\n  &:hover:not(.selected) {\n    background: var(--neutral-white);\n    box-shadow: 0 2px 0 0 var(--neutral-light);\n  }\n\n  &.active {\n    background: var(--neutral-white) !important;\n  }\n\n  &.selected.active {\n    background-color: var(--primary-lighter-50) !important;\n    box-shadow: none;\n  }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select-option',\n  styleUrl: 'cura-select-option.scss',\n  shadow: true,\n})\nexport class CuraSelectOption {\n  @Prop({ reflect: true }) value: string;\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) active: boolean = false;\n  @Prop() size: 'xsmall' | 'small' | 'medium' | 'large' = 'small'\n  @State() styles = {};\n  @Element() host: HTMLElement;\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    const colors = [\n      { name: '--primary-lighter-50', theme: 'primary-lighter', opacity: 0.5 },\n      { name: '--primary-light', theme: 'primary-light' },\n      { name: '--neutral-light', theme: 'neutral-light' },\n      { name: '--neutral-purewhite', theme: 'neutral-purewhite' },\n    ];\n\n    colors.forEach(color => this.styles = { ...this.styles, [color.name]: this.theme.colors.getColor(color.theme, color?.opacity) });\n  }\n\n  @Watch('size')\n  getSize(element: string) {\n    const sizeMap = {\n      large: element === 'label' ? 'medium' : 20,\n      medium: element === 'label' ? 'small' : 16,\n      small: element === 'label' ? 'xsmall' : 'micro',\n    };\n\n    return sizeMap[this.size] || sizeMap['medium'];\n  }\n\n  getClasses() {\n    return {\n      'item': true,\n      'selected': this.selected,\n      'active':this.active\n    };\n  }\n\n  render() {\n    return (\n      <Host slot=\"option\">\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-label color={`${this.selected ? 'primary-base' : 'neutral-black'}`} size={this.getSize('label')} margin-block=\"0\">\n            <slot></slot>\n          </cura-label>\n          {this.selected && <cura-icon name='check' size={this.getSize('icon')} color=\"primary-base\"></cura-icon>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cura/{p-578c74a4.entry.js → p-a9dad622.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as a,h as t,H as r}from"./p-312791fb.js";import{f as i}from"./p-f9b8f665.js";const s='@charset "UTF-8";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap);text-align:left}.position{flex-direction:row}.label,.message{text-align:left}.control{width:fit-content}.track{background:var(--neutral-dark-base);border-radius:16px;transition:background-color 0.3s;align-items:flex-start;flex-shrink:0;box-sizing:border-box;width:var(--size-track);height:var(--size);position:relative}.thumb{background:var(--neutral-purewhite);border:2px solid var(--neutral-darker-medium);border-radius:50%;position:absolute;transition:transform 0.3s, outline 0.3s;display:inline-block;cursor:pointer;user-select:none;box-sizing:border-box;width:var(--size);height:var(--size);top:50%;transform:translateY(-50%)}.checked .thumb{border-color:var(--color-dark);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));background:var(--neutral-purewhite);transform:translateX(var(--size)) translateY(-50%)}.checked .thumb:hover{background:var(--neutral-pale) !important;border-color:var(--neutral-darker-medium) !important}.checked .thumb:active{border-color:var(--color-dark);background:var(--neutral-pale)}.checked .track{background:var(--color-base-light)}.disabled .track{background:var(--neutral-black-neutral-pale)}.disabled .thumb{background:var(--neutral-black-neutral-base) !important;border-color:var(--neutral-black-neutral-pale) !important;cursor:not-allowed}.disabled.checked .track{background:var(--neutral-black-neutral-pale)}.container.disabled .thumb:focus{outline:none !important;border-color:var(--neutral-black-neutral-pale) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark);background:var(--neutral-pale)}:not(.disabled):not(.checked) .thumb:active{border-color:var(--color-dark);background:var(--neutral-pale)}:not(.disabled) .thumb:focus{outline:2px solid var(--info-base) !important;border:2px solid var(--neutral-darker-medium);z-index:1}:not(.disabled) .checked .thumb:focus{outline:2px solid var(--info-base) !important;border-color:var(--color-dark)}';const l=s;const o=class{constructor(t){e(this,t);this.onchange=a(this,"onchange",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.sizes={large:{size:64},medium:{size:48},small:{size:40}};this.isDarkbackground=()=>this.background==="dark";this.toggleSwitch=()=>{if(this.disabled)return null;this.checked=!this.checked;this.internals.setFormValue(this.checked.toString());this.onchange.emit({checked:this.checked})};this.checked=false;this.disabled=false;this.label="";this.ontabindex=0;this.position="left";this.size="medium";this.background="light";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-track":`${this.sizes[this.size].size}px`,"--size":`${i[this.size].size}px`,"--gap":`${i[this.size].gap}px`})}setColors(){const e=[{name:"--info-base",background:"info-base"},{name:"--neutral-black-shadow",background:"neutral-black",opacity:.16},{name:"--neutral-purewhite",background:"neutral-purewhite"},{name:"--neutral-medium",background:"neutral-medium"},{name:"--neutral-pale",background:"neutral-pale"},{name:"--neutral-dark-base",background:`neutral-${this.isDarkbackground()?"dark":"base"}`},{name:"--neutral-darker-medium",background:`neutral-${this.isDarkbackground()?"darker":"medium"}`},{name:"--neutral-black-neutral-pale",background:`${this.isDarkbackground()?"neutral-black":"neutral-pale"}`},{name:"--neutral-black-neutral-base",background:`${this.isDarkbackground()?"neutral-dark":"neutral-base"}`},{name:"--color-base-light",background:`${this.color}-light`},{name:"--color-dark",background:`${this.color}-dark`}];e.forEach((e=>{this.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.background,e===null||e===void 0?void 0:e.opacity)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}formAssociatedCallback(e){e.ariaLabel=this.label}formStateRestoreCallback(e){this.checked=e.value==="true";this.internals.setFormValue(this.checked.toString())}formResetCallback(){this.checked=false;this.internals.setValidity({});this.internals.setFormValue(this.checked.toString())}formDisabledCallback(e){this.disabled=e}assignColor(e,a){if(this.disabled)return this.isDarkbackground()?"neutral-dark":"neutral-dark";return this.isDarkbackground()?e:a}getClasses(){const e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e["position"]=this.position==="right";return e}render(){return t(r,{key:"e0040434db080b1ccdb12a1389ca028f5c02f66a"},t("div",{key:"6008f7aef47e0519e965c2be573dc1eacc001b6c",class:this.getClasses(),style:this.styles},t("div",{key:"a954404dce1c7eafd79cb3236e8761a3dc29f86e",class:"info"},t("cura-label",{key:"6ff5cc1f26abad0f173c4e1330aaae43357b7737",style:{textAlign:this.position==="right"?"right":"left"},class:"label",weight:"bold",size:this.size==="large"?"medium":"xsmall",lineHeight:"125%",color:this.assignColor("neutral-white","neutral-black")},this.label),t("cura-label",{key:"b82e4cb25ef94481642e1d5a2180eb4e12b8eff8",style:{textAlign:this.position==="right"?"right":"left"},color:this.assignColor("primary-lighter","neutral-dark"),size:"xsmall",class:"message"},t("slot",{key:"243e906253614d9ce837e0c598b259ad7c87afb4"}))),t("div",{key:"36d0165722a6fae98ca829a5a2e89edef3694ff2",onClick:this.toggleSwitch,class:"control"},t("div",{key:"f9c0c7cbc84b655e37e7e8df1c2293c1260445ca",class:`track ${this.size.toLowerCase()}`},t("div",{key:"e5ca4006ad41a6cbf8d62ca612b52ef26fb7255f",class:`thumb ${this.size.toLowerCase()}`,tabIndex:this.ontabindex})))))}static get formAssociated(){return true}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors"]}}};o.style=l;export{o as cura_switch};
-//# sourceMappingURL=p-578c74a4.entry.js.map
+import{r as a,c as e,h as t,H as r}from"./p-312791fb.js";import{f as i}from"./p-f9b8f665.js";const s='@charset "UTF-8";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap);text-align:left}.position{flex-direction:row}.label,.message{text-align:left}.control{width:fit-content}.track{background:var(--neutral-dark-base);border-radius:16px;transition:background-color 0.3s;align-items:flex-start;flex-shrink:0;box-sizing:border-box;width:var(--size-track);height:var(--size);position:relative}.thumb{background:var(--neutral-purewhite);border:2px solid var(--neutral-darker-medium);border-radius:50%;position:absolute;transition:transform 0.3s, outline 0.3s;display:inline-block;cursor:pointer;user-select:none;box-sizing:border-box;width:var(--size);height:var(--size);top:50%;transform:translateY(-50%)}.checked .thumb{border-color:var(--color-dark);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));background:var(--neutral-purewhite);transform:translateX(var(--size)) translateY(-50%)}.checked .thumb:hover{background:var(--neutral-pale) !important;border-color:var(--neutral-darker-medium) !important}.checked .thumb:active{border-color:var(--color-dark);background:var(--neutral-pale)}.checked .track{background:var(--color-base-light)}.disabled .track{background:var(--neutral-black-neutral-pale)}.disabled .thumb{background:var(--neutral-black-neutral-base) !important;border-color:var(--neutral-black-neutral-pale) !important;cursor:not-allowed}.disabled.checked .track{background:var(--neutral-black-neutral-pale)}.container.disabled .thumb:focus{outline:none !important;border-color:var(--neutral-black-neutral-pale) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark);background:var(--neutral-pale)}:not(.disabled):not(.checked) .thumb:active{border-color:var(--color-dark);background:var(--neutral-pale)}:not(.disabled) .thumb:focus{outline:2px solid var(--info-base) !important;border:2px solid var(--neutral-darker-medium);z-index:1}:not(.disabled) .checked .thumb:focus{outline:2px solid var(--info-base) !important;border-color:var(--color-dark)}';const l=s;const o=class{constructor(t){a(this,t);this.onchange=e(this,"onchange",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.sizes={large:{size:64},medium:{size:48},small:{size:40}};this.isDarkbackground=()=>this.background==="dark";this.toggleSwitch=()=>{if(this.disabled)return null;this.checked=!this.checked;this.internals.setFormValue(this.checked.toString());this.onchange.emit({checked:this.checked})};this.checked=false;this.disabled=false;this.label="";this.ontabindex=0;this.position="left";this.size="medium";this.background="light";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-track":`${this.sizes[this.size].size}px`,"--size":`${i[this.size].size}px`,"--gap":`${i[this.size].gap}px`})}setColors(){const a=[{name:"--info-base",background:"info-base"},{name:"--neutral-black-shadow",background:"neutral-black",opacity:.16},{name:"--neutral-purewhite",background:"neutral-purewhite"},{name:"--neutral-medium",background:"neutral-medium"},{name:"--neutral-pale",background:"neutral-pale"},{name:"--neutral-dark-base",background:`neutral-${this.isDarkbackground()?"dark":"base"}`},{name:"--neutral-darker-medium",background:`neutral-${this.isDarkbackground()?"darker":"medium"}`},{name:"--neutral-black-neutral-pale",background:`${this.isDarkbackground()?"neutral-black":"neutral-pale"}`},{name:"--neutral-black-neutral-base",background:`${this.isDarkbackground()?"neutral-dark":"neutral-base"}`},{name:"--color-base-light",background:`${this.color}-light`},{name:"--color-dark",background:`${this.color}-dark`}];a.forEach((a=>{this.styles[a.name]=window.CuraAPI.theme.colors.getColor(a.background,a===null||a===void 0?void 0:a.opacity)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}formAssociatedCallback(a){a.ariaLabel=this.label}formStateRestoreCallback(a){this.checked=a.value==="true";this.internals.setFormValue(this.checked.toString())}formResetCallback(){this.checked=false;this.internals.setValidity({});this.internals.setFormValue(this.checked.toString())}formDisabledCallback(a){this.disabled=a}assignColor(a,e){if(this.disabled)return this.isDarkbackground()?"neutral-dark":"neutral-dark";return this.isDarkbackground()?a:e}getClasses(){const a={};a["container"]=true;a["checked"]=this.checked;a["disabled"]=this.disabled;a["position"]=this.position==="right";return a}render(){return t(r,{key:"2ccbfc3c5aae5ec8be3f879541b7cbcf203b62a9"},t("div",{key:"2acacb0bab31f8736155dc764a6e3d57508f7a48",class:this.getClasses(),style:this.styles},t("div",{key:"16c7cfedbd029d4e481cb2c3268690d594962ff3",class:"info"},t("cura-label",{key:"24ed0fd9a9c0ebacc52407319b16a202f2defc96",style:{textAlign:this.position==="right"?"right":"left"},class:"label",weight:"bold",size:this.size==="large"?"medium":"xsmall",lineHeight:"125%",color:this.assignColor("neutral-white","neutral-black")},this.label),t("cura-label",{key:"4a84fb18a2fd43c623cb9aa9e9573482a22f6372",style:{textAlign:this.position==="right"?"right":"left"},color:this.assignColor("primary-lighter","neutral-dark"),size:"xsmall",class:"message"},t("slot",{key:"0ec0427dee691d224daa58db943c07d906d08dd0"}))),t("div",{key:"5b4a04200b4880474b693e605ba3e8671a3bd980",onClick:this.toggleSwitch,class:"control"},t("div",{key:"2e3e764a87d57edc520f9d56b980d80d455d8d74",class:`track ${this.size.toLowerCase()}`},t("div",{key:"36b9da57ea3b95e419d7bb0b5ad4f24d7acd1b63",class:`thumb ${this.size.toLowerCase()}`,tabIndex:this.ontabindex})))))}static get formAssociated(){return true}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors"]}}};o.style=l;export{o as cura_switch};
+//# sourceMappingURL=p-a9dad622.entry.js.map

package/dist/cura/p-af2036a7.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as a,H as r}from"./p-312791fb.js";const c=":host{display:block;box-sizing:border-box;width:100%}cura-label{padding:12px 0px;border-bottom:1px solid var(--neutral-light)}";const e=c;const t=class{constructor(a){o(this,a)}render(){return a(r,{key:"d27a47a6d61497f488c449188b2c6036529350cc",slot:"dropdown-search-option"},a("cura-label",{key:"ba63e9fce7392087551ccc7fb46a83cffa6785c9",color:"neutral-dark",size:"xsmall",lineHeight:"16px",marginBlock:"0"},a("slot",{key:"f14d41a3ed995f6f9a946e7d96e5c0b0208310ad"})))}};t.style=e;export{t as cura_dropdown_search_option_title};
+//# sourceMappingURL=p-af2036a7.entry.js.map

package/dist/cura/p-b1148bb2.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,H as o,g as s}from"./p-312791fb.js";const r=":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:0;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:100%;max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";const n=r;const d=class{constructor(e){t(this,e);this.valueChanged=i(this,"valueChanged",7);this.onselect=i(this,"onselect",7);this.overlayElement=null;this.handleSlotChange=()=>{this.options=Array.from(this.host.querySelectorAll("cura-dropdown-search-option"));this.addClickListenersToOptions();this.updateHoveredIndex()};this.handleInputChange=t=>{const i=t.target;this.value=i.value;this.onValueChange(this.value)};this.handleKeyDown=t=>{if(t.key==="ArrowDown"){t.preventDefault();this.moveHighlight(1)}else if(t.key==="ArrowUp"){t.preventDefault();this.moveHighlight(-1)}else if(t.key==="Enter"){t.preventDefault();if(this.hoveredIndex>-1){this.handleOnBlur();this.onSelectedOption(this.hoveredIndex)}}};this.handleResize=()=>{this.isMobile=window.innerWidth<768;if(this.isDropdownOpen){if(this.isMobile){this.showOverlay()}else{this.removeOverlay()}}};this.status="default";this.name=undefined;this.required=false;this.selected=false;this.value="";this.placeholder="";this.label="";this.iconName="search";this.dropdownMaxHeight="630px";this.overlayVisible=false;this.isDropdownOpen=false;this.styles={};this.isMobile=window.innerWidth<768;this.mode="default";this.inputTextRef=undefined;this.isOnBlurInput=true;this.hoveredIndex=-1;this.options=[]}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--info-base"]=window.CuraAPI.theme.colors.getColor("info-base");this.styles["--neutral-purewhite"]=window.CuraAPI.theme.colors.getColor("neutral-purewhite");this.styles["--neutral-light"]=window.CuraAPI.theme.colors.getColor("neutral-light");this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor("neutral-dark");this.styles["--neutral-black-shadow"]=window.CuraAPI.theme.colors.getColor(`neutral-black`,.16);this.styles["--error-dark"]=window.CuraAPI.theme.colors.getColor("error-dark");this.styles["--error-lighter"]=window.CuraAPI.theme.colors.getColor("error-lighter");this.styles["--breakpoints"]=window.CuraAPI.theme.breakpoints.get();this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium}onValueChange(t){this.updateSelectedOption(t);this.valueChanged.emit(this.value)}componentWillLoad(){this.updateSelectedOption(this.value)}componentDidRender(){if(this.isDropdownOpen&&this.isMobile){this.showOverlay()}else{this.removeOverlay()}}componentDidLoad(){window.addEventListener("resize",this.handleResize)}disconnectedCallback(){window.removeEventListener("resize",this.handleResize)}showOverlay(){if(!this.overlayElement){this.overlayElement=document.createElement("div");this.overlayElement.className="dropdown-overlay";this.overlayElement.style.position="fixed";this.overlayElement.style.top="0";this.overlayElement.style.left="0";this.overlayElement.style.width="100%";this.overlayElement.style.height="100%";this.overlayElement.style.zIndex="9999";this.overlayElement.style.backgroundColor="white";document.body.appendChild(this.overlayElement)}}removeOverlay(){if(this.overlayElement&&this.overlayElement.parentNode===document.body){document.body.removeChild(this.overlayElement);this.overlayElement=null}}addClickListenersToOptions(){this.options.forEach(((t,i)=>{t.addEventListener("click",(()=>this.onSelectedOption(i)))}))}updateSelectedOption(t){const i=this.options.findIndex((i=>i.getAttribute("value")===t));this.hoveredIndex=i;this.updateOptionAttribute("hovered",this.hoveredIndex);this.updateOptionAttribute("selected",this.hoveredIndex);this.scrollIntoView()}onSelectedOption(t){const i=this.options[t];if(i.selectable){const t=i.getAttribute("value")||i.textContent;this.value=t||"";this.updateSelectedOption(this.value);this.isDropdownOpen=false;this.isOnBlurInput=true;this.removeOverlay()}}moveHighlight(t){const i=this.options;const e=(this.hoveredIndex+t+i.length)%i.length;this.hoveredIndex=e;this.updateOptionAttribute("hovered",this.hoveredIndex);this.scrollIntoView()}updateOptionAttribute(t,i){this.options.forEach(((e,o)=>{e[t]=o===i}))}updateHoveredIndex(){const t=this.options;const i=this.value;this.hoveredIndex=t.findIndex((t=>t.getAttribute("value")===i))}scrollIntoView(){var t;const i=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".dropdown-search-list");const e=this.options[this.hoveredIndex];if(i&&e){const t=e.getBoundingClientRect();const o=i.getBoundingClientRect();if(t.bottom>o.bottom){i.scrollTop+=t.bottom-o.bottom}if(t.top<o.top){i.scrollTop-=o.top-t.top}}}handleOnBlur(){if(this.isOnBlurInput===true){setTimeout((()=>{this.isDropdownOpen=false;this.removeOverlay()}),200)}}getClasses(){return{"dropdown-input-search":true,"dropdown-open":this.isDropdownOpen,[this.status]:true}}getDropdownClasses(){return{"dropdown-search-list":true,visible:this.options.length&&this.isDropdownOpen?true:false}}hostCSSProperties(){return{"--dropdown-max-height":this.dropdownMaxHeight}}render(){const t=this.isMobile&&this.isDropdownOpen;return e(o,{key:"993da099b8256bfb9ee7b3ebabd4860e9019d097",style:this.hostCSSProperties(),class:"dropdown-overlay"},e("div",{key:"883246cc7a1020ba83a4eda4fb1f6483519314cf",class:`dropdown ${t?"dropdown-mobile":""}`,style:this.styles},e("div",{key:"5189508f35c5fc62883820a8c378bce8a3e67b7d",class:this.getClasses()},this.isMobile&&this.isDropdownOpen&&e("cura-button-transparent",{key:"cbedd224556935a715380168c1be22d3127e920c",fontColor:"dark",onClick:()=>this.isMobile=false,iconName:"arrowLeft",size:"medium",iconOnly:true,color:"primary"}),e("cura-input-text",{key:"a8dd2fe42d5bc64683ba56e7bad6b6d08ce92fca",label:this.label,part:"cura-input-field",mode:t?"transparent":"default",required:this.required,hideErrorIcon:this.status==="error",iconName:this.iconName||"search",value:this.value,status:this.status,onValueChange:t=>this.onValueChange(t.target.value),onInput:t=>this.handleInputChange(t),onFocus:()=>this.isDropdownOpen=true,onClick:()=>window.innerWidth<768?this.isMobile=true:null,onBlur:()=>{this.handleOnBlur()},placeholder:this.placeholder,size:"large",onKeyDown:this.handleKeyDown},e("slot",{key:"9991e5cfd78b73b9b2da92ae217fad3ae109a2c9",name:"helperText"}))),e("div",{key:"664abccc90e95b83aa3192282453d199ae2a0c5f",id:"dropdown-search-list",class:this.getDropdownClasses()},e("slot",{key:"2eca99c0ec684020000edc46ebbc5f8097e78200",name:"dropdown-search-option",onSlotchange:this.handleSlotChange}))))}get host(){return s(this)}static get watchers(){return{value:["onValueChange"]}}};d.style=n;export{d as cura_dropdown_search};
+//# sourceMappingURL=p-b1148bb2.entry.js.map

package/dist/cura/p-b1148bb2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["curaDropdownSearchCss","CuraDropdownSearchStyle0","CuraDropdownSearch","this","overlayElement","handleSlotChange","options","Array","from","host","querySelectorAll","addClickListenersToOptions","updateHoveredIndex","handleInputChange","event","input","target","value","onValueChange","handleKeyDown","key","preventDefault","moveHighlight","hoveredIndex","handleOnBlur","onSelectedOption","handleResize","isMobile","window","innerWidth","isDropdownOpen","showOverlay","removeOverlay","connectedCallback","weights","CuraAPI","theme","fonts","getWeights","styles","colors","getColor","breakpoints","get","getSize","getFamily","medium","newValue","updateSelectedOption","valueChanged","emit","componentWillLoad","componentDidRender","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","document","createElement","className","style","position","top","left","width","height","zIndex","backgroundColor","body","appendChild","parentNode","removeChild","forEach","option","index","selectedOptionIndex","findIndex","getAttribute","updateOptionAttribute","scrollIntoView","selectedOption","selectable","selectedValue","textContent","isOnBlurInput","direction","visibleOptions","newIndex","length","attribute","indexToUpdate","currentValue","container","_a","shadowRoot","querySelector","hoveredOption","optionRect","getBoundingClientRect","containerRect","bottom","scrollTop","setTimeout","getClasses","status","getDropdownClasses","visible","hostCSSProperties","dropdownMaxHeight","render","isMobileDropdown","h","Host","class","fontColor","onClick","iconName","size","iconOnly","color","label","part","mode","required","hideErrorIcon","e","onInput","onFocus","onBlur","placeholder","onKeyDown","name","id","onSlotchange"],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.dropdown {\n  display: flex;\n  position: relative;\n\n  flex-direction: column;\n  width: inherit;\n\n  &-input-search {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n\n\n    &.dropdown-open {\n      ::part(cura-input-field) {\n        border-radius: 4px 4px 0px 0px;\n      }\n      ::slotted([slot='helperText']) {\n        display: none;\n      }\n\n      cura-input-text {\n        ::slotted([slot='helperText']) {\n          display: none;\n        }\n      }\n    }\n  }\n\n  &-search-list {\n    position: absolute;\n    top:  calc(100% - 8px);\n    width: 100%;\n    max-height: var(--dropdown-max-height);\n    padding: 12px 12px;\n    margin: 0;\n    box-sizing: border-box;\n    @include shadow-level3(--neutral-black-shadow);\n    border-radius: 0px 0px 4px 4px;\n    border-top: 0 var(--neutral-light);\n    border-right: 2px solid var(--neutral-light);\n    border-bottom: 2px solid var(--neutral-light);\n    border-left: 2px solid var(--neutral-light);\n    background-color: var(--neutral-purewhite);\n    list-style: none;\n    overflow-y: auto;\n    display: none;\n\n    &.visible {\n      display: block;\n    }\n\n    &-input-search {\n      width: inherit;\n\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 16px 8px;\n      border-bottom: 2px solid var(--info-base);\n      background-color: var(--neutral-purewhite);\n\n      cura-input-text {\n        width: inherit;\n      }\n\n      &.error {\n        background-color: var(--error-lighter);\n        border-bottom: 2px solid var(--error-dark);\n      }\n    }\n  }\n\n  &-mobile {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n\n    z-index: 10000;\n    .dropdown-input-search {\n      display: flex;\n      gap: 4px;\n      padding: 12px 8px;\n      background-color: var(--neutral-purewhite);\n      border-bottom: 2px solid var(--info-base);\n      z-index: 10000;\n      cura-button-transparent {\n        display: flex;\n      }\n      &.error {\n        background-color: var(--error-lighter);\n        border-bottom: 2px solid var(--error-dark);\n      }\n      &.dropdown-open {\n        display: flex;\n\n        ::slotted([slot='helperText']) {\n          display: block;\n        }\n      }\n    }\n    .dropdown-search-list {\n      position: static;\n      width: 100%;\n      height: 100%;\n      max-height: none;\n      padding: 12px 12px;\n      margin: 0;\n      box-sizing: border-box;\n      box-shadow: none;\n      border: none;\n      background-color: var(--neutral-purewhite);\n      list-style: none;\n      overflow-y: auto;\n      z-index: 10000;\n    }\n  }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search',\n  styleUrl: 'cura-dropdown-search.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearch {\n  /**\n   * Define the status of the dropdown search.\n   */\n  @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\n\n  /**\n   * The name of the dropdown search component.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Indicates if the dropdown search is required.\n   */\n  @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n  /**\n   * Indicates if the dropdown search is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /**\n   * The value of the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * The placeholder text for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n  /**\n   * The label for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) label: string = '';\n\n  /**\n   * Custom icon name. Default: search.\n   */\n  @Prop({reflect: true}) iconName = 'search';\n\n  /**\n   * CSS max-height property for dropdown item.\n   * Default to 630px\n   */\n  @Prop({reflect: true}) dropdownMaxHeight = '630px';\n\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Indicates if the overlay is visible.\n   */\n  @State() overlayVisible: boolean = false;\n\n  /**\n   * Event emitted when the value changes.\n   */\n  @Event() valueChanged: EventEmitter<string>;\n\n  /**\n   * Indicates if the dropdown is open.\n   */\n  @State() isDropdownOpen: boolean = false;\n\n  /**\n * Styles for the component.\n\n */\n  @State() styles = {};\n\n  /**\n   * Indicates if the component is being viewed on a mobile device.\n   */\n  @State() isMobile: boolean = window.innerWidth < 768;\n\n  /**\n   * The mode of the dropdown search.\n   */\n  @State() mode: 'default' | 'transparent' = 'default';\n\n  @Event() onselect: EventEmitter;\n\n  @State() inputTextRef!: HTMLCuraInputTextElement;\n\n  /**\n   * Indicates if the input is on blur.\n   */\n  @State() isOnBlurInput: boolean = true;\n\n  /**\n   * The index of the currently hovered option.\n   */\n  @State() hoveredIndex: number = -1;\n\n  /**\n   * The options for the dropdown search.\n   * @type {HTMLCuraDropdownSearchOptionElement[]}\n   */\n\n  weights;\n\n  private overlayElement: HTMLDivElement | null = null;\n\n  @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n    this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n    this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n    this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n    this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n  }\n\n  @Watch('value')\n  onValueChange(newValue: string) {\n    this.updateSelectedOption(newValue);\n    this.valueChanged.emit(this.value);\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption(this.value);\n  }\n\n  componentDidRender() {\n    if (this.isDropdownOpen && this.isMobile) {\n      this.showOverlay();\n    } else {\n      this.removeOverlay();\n    }\n  }\n  componentDidLoad() {\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize);\n  }\n\n  private showOverlay() {\n    if (!this.overlayElement) {\n      this.overlayElement = document.createElement('div');\n      this.overlayElement.className = 'dropdown-overlay';\n      this.overlayElement.style.position = 'fixed';\n      this.overlayElement.style.top = '0';\n      this.overlayElement.style.left = '0';\n      this.overlayElement.style.width = '100%';\n      this.overlayElement.style.height = '100%';\n      this.overlayElement.style.zIndex = '9999';\n      this.overlayElement.style.backgroundColor = 'white';\n      document.body.appendChild(this.overlayElement);\n    }\n  }\n\n  private removeOverlay() {\n    if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n      document.body.removeChild(this.overlayElement);\n      this.overlayElement = null;\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n    this.addClickListenersToOptions();\n    this.updateHoveredIndex();\n  };\n\n  private addClickListenersToOptions() {\n    this.options.forEach((option, index) => {\n      option.addEventListener('click', () => this.onSelectedOption(index));\n    });\n  }\n\n  private updateSelectedOption(value: string) {\n    const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n    this.hoveredIndex = selectedOptionIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.updateOptionAttribute('selected', this.hoveredIndex);\n\n    this.scrollIntoView();\n  }\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.onValueChange(this.value);\n    // this.valueChanged.emit(this.value);\n  };\n\n  private onSelectedOption(index: number) {\n    const selectedOption = this.options[index];\n    if(selectedOption.selectable) {\n      const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;\n\n      this.value = selectedValue || '';\n      this.updateSelectedOption(this.value);\n\n      this.isDropdownOpen = false;\n      this.isOnBlurInput = true;\n      this.removeOverlay();\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.moveHighlight(1);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.moveHighlight(-1);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      if (this.hoveredIndex > -1) {\n        this.handleOnBlur();\n        this.onSelectedOption(this.hoveredIndex);\n      }\n    }\n  };\n\n  private moveHighlight(direction: number) {\n    const visibleOptions = this.options;\n    const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n    this.hoveredIndex = newIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.scrollIntoView();\n  }\n\n  private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n    this.options.forEach((option, index) => {\n      (option as any)[attribute] = index === indexToUpdate;\n    });\n  }\n\n  private updateHoveredIndex() {\n    const visibleOptions = this.options;\n    const currentValue = this.value;\n    this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n  }\n\n  private scrollIntoView() {\n    const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n    const hoveredOption = this.options[this.hoveredIndex];\n\n    if (container && hoveredOption) {\n      const optionRect = hoveredOption.getBoundingClientRect();\n      const containerRect = container.getBoundingClientRect();\n\n      if (optionRect.bottom > containerRect.bottom) {\n        container.scrollTop += optionRect.bottom - containerRect.bottom;\n      }\n\n      if (optionRect.top < containerRect.top) {\n        container.scrollTop -= containerRect.top - optionRect.top;\n      }\n    }\n  }\n\n  private handleResize = () => {\n    this.isMobile = window.innerWidth < 768;\n    if (this.isDropdownOpen) {\n      if (this.isMobile) {\n        this.showOverlay();\n      } else {\n        this.removeOverlay();\n      }\n    }\n  };\n\n  handleOnBlur() {\n    if (this.isOnBlurInput === true) {\n      setTimeout(() => {\n        this.isDropdownOpen = false;\n        this.removeOverlay();\n      }, 200);\n    }\n  }\n  getClasses() {\n    return {\n      'dropdown-input-search': true,\n      'dropdown-open': this.isDropdownOpen,\n      [this.status]: true,\n    };\n  }\n\n  getDropdownClasses() {\n    return {\n      'dropdown-search-list': true,\n      'visible': this.options.length && this.isDropdownOpen ? true : false\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--dropdown-max-height': this.dropdownMaxHeight,\n    };\n  }\n\n  render() {\n    const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n    return (\n      <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n        <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n          <div class={this.getClasses()}>\n            {this.isMobile && this.isDropdownOpen && (\n              <cura-button-transparent\n                fontColor=\"dark\"\n                onClick={() => (this.isMobile = false)}\n                iconName=\"arrowLeft\"\n                size=\"medium\"\n                iconOnly\n                color=\"primary\"\n              ></cura-button-transparent>\n            )}\n            <cura-input-text\n              label={this.label}\n              part=\"cura-input-field\"\n              mode={isMobileDropdown ? 'transparent' : 'default'}\n              required={this.required}\n              hideErrorIcon={this.status === 'error'}\n              iconName={this.iconName || 'search'}\n              value={this.value}\n              status={this.status}\n              onValueChange={e => this.onValueChange(e.target.value as string)}\n              onInput={e => this.handleInputChange(e)}\n              onFocus={() => (this.isDropdownOpen = true)}\n              onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n              onBlur={() => {\n                this.handleOnBlur();\n              }}\n              placeholder={this.placeholder}\n              size=\"large\"\n              onKeyDown={this.handleKeyDown}\n            >\n              <slot name=\"helperText\"></slot>\n            </cura-input-text>\n          </div>\n          <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n            <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/cura-accordion_9.entry.js

@@ -296,7 +296,7 @@ const CuraHeading = class {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '456cd35fd9ad4389ceb13d3b89d05f70e2423068', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: '55016d81f72ce0b506a7e2f2fbca3aa92448d581', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -403,7 +403,7 @@ const CuraLabel = class {
         };
     }
     render() {
-        return (h(Host, { key: '42662869e7cc4cd7cc8ff29ef37209514eaea0ac', style: this.hostCSSProperties() }, h("p", { key: 'cf6be4faf13ab24e0ae65edea48b528763072a7b', style: this.styles, class: this.getClasses() }, h("slot", { key: '45ee41cdc15f0c73672e4b3047df4508dbb870e3' }))));
+        return (h(Host, { key: '34d418859c8067e879a089240d36b58f5e91c8fc', style: this.hostCSSProperties() }, h("p", { key: '4a28171e079f80d8e61ebe840b858d65dd6d62c3', style: this.styles, class: this.getClasses() }, h("slot", { key: '0796484498caddf7935ff3458e13cfab47759a4b' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -437,7 +437,7 @@ const CuraLoaderCircle = class {
         };
     }
     render() {
-        return (h(Host, { key: '8b2b73c6aefffd1a4350618ed52038a414cebb48', style: this.getStyles() }, h("svg", { key: '4478c39440bc66adcb3bcf1d947ae12cd5c3c721', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '3c01be9c541a634c504a2b8f72296426b8cebe28' }, h("circle", { key: '153102890325235a989b91badcadd00f852ccc3e', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '5fd7be471c351a46154fa96b459a99be297dfb5e', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '89ce06231240879c222d93fc4efc44d963bbd167' }, h("linearGradient", { key: '0999b93ff91ef7d31b9bfc70cfb08190838197e9', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'd7adf5104e03f40f4c757d218c0fc786e9f8ef2c' }), h("stop", { key: '8aaddbffb82d660aa8d62b2147efb74409218f41', offset: "1" }))))));
+        return (h(Host, { key: 'dd0c9e5b82f8f3b41511d31333af00e46435e9db', style: this.getStyles() }, h("svg", { key: '2a6a1edab6501c7788bebed93bbc87143d10fbaf', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '8dd113e23ffc4f5df091738a878eee76e030c904' }, h("circle", { key: 'a6e06aad2260ffb8cec65aed59ef8f09459765a1', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '88ac6f03cac1030593e06e6062d8d9947474aa62', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '6bae1e73907f3f8a17560ef055290c4ac41959e7' }, h("linearGradient", { key: 'c2510effd844984927f4b32fbb7f770ebcb09a3c', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '477e90e9eadf1385a8b897917886e1fe352c41d0' }), h("stop", { key: '135e22c3a11916fa1ce4bc5870774ecf37512e6f', offset: "1" }))))));
     }
 };
 CuraLoaderCircle.style = CuraLoaderCircleStyle0;
@@ -517,7 +517,7 @@ const CuraParagraph = class {
         };
     }
     render() {
-        return (h(Host, { key: '5b219ac846a02c36df1db1ff5be6f0c5c833c2c1', style: this.hostCSSProperties() }, h("p", { key: 'e53f25d18b0b5d54548879872c0f234d3782b4f0', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'be875e98ec8c19682f972d0e4bb0bb07e9ee4224' }))));
+        return (h(Host, { key: '2c9903f885ae8346efdbb1569264fc078aee9224', style: this.hostCSSProperties() }, h("p", { key: '287c656408d2e9876497f70784ae7ce166417272', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'dde5f8d46c384a76605c1ef33b73c8f442c7a48b' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/cura-checkbox.entry.js

@@ -160,7 +160,7 @@ const CuraCheckbox = class {
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: '9f96ab8f12502dc777ee00d02d8306ecd3ce9776' }, h("div", { key: '4a782c31e4d97df0c7cc1d60a3c83125d01d31f6', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'c2de03821506646ffbe84cd7106ab91c1cdeba55', class: "info" }, h("div", { key: '9a8985036acf8770541b69e35ff449572a6afb0e', class: "label-wrapper" }, h("cura-label", { key: 'a128e382aa3f25c849fbe488f3820aa9b3cdb775', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '84e4817990f7499f047af339ce1ed9efc0ed060c', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '33527a9347eb8971d869b7e5ec492c3a7057b123', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'cda5d0d9eca328fd20663f941a41325eb1ad0e29' }))), h("div", { key: '588b04e6c9c74daf8406d0cca1e50bd39d1703c9', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '209fee01eb3051602e5a9633de4fdea59d986a53', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: 'b74eebdbcaed952fa2157c3cbb3a84ce92bb9e6c' }, h("div", { key: 'e18e4e5aa12a3e298db65399ebf002aa991100f2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'fdbcf3ec4b12bf9c6d80cded5ce9d17c4f5e2a39', class: "info" }, h("div", { key: 'cbe76b43956bed00ab638b953a44d941ffb748d5', class: "label-wrapper" }, h("cura-label", { key: '259c5e5e63a6d36ed15845899eaf8c76b2b50273', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '42d8b2777d4790bd8f83a7ddc939c6ab584b5cf0', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'bcafaacf64c8967f78a3e9b7ecfe6d1412517ea3', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'c9cc9e74cc9048ead8375a158253491e1aae4dfe' }))), h("div", { key: 'e63ba7ef796c9d46cf4729facf1be985b8174028', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '2e7e2e302e577f26d8022fe4a0108f0e6727450f', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

package/dist/esm/cura-display.entry.js

@@ -56,7 +56,7 @@ const CuraDisplay = class {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: 'd81f995e2da8e19498b2839319033cc5d93db1ea', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: '89df8c001192a7526e6976d9b43099562d65809d', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/cura-dropdown-search-option-title.entry.js

@@ -8,7 +8,7 @@ const CuraDropdownSearchOptionTitle = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '6e2312e0bf01db89fe6c85fbe525c02ed2dff7ec', slot: "dropdown-search-option" }, h("cura-label", { key: '551017409617799c76a6119b4e61596a4188f5ad', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '4e0b3b588dec8603df342358840bc0a2d8ab3c4c' }))));
+        return (h(Host, { key: 'd27a47a6d61497f488c449188b2c6036529350cc', slot: "dropdown-search-option" }, h("cura-label", { key: 'ba63e9fce7392087551ccc7fb46a83cffa6785c9', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'f14d41a3ed995f6f9a946e7d96e5c0b0208310ad' }))));
     }
 };
 CuraDropdownSearchOptionTitle.style = CuraDropdownSearchOptionTitleStyle0;

package/dist/esm/cura-dropdown-search-option.entry.js

@@ -1,19 +1,26 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1ad98520.js';
 
-const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}ul{list-style:none;width:100%;margin:0;padding:0}li{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:8px;padding:8px 4px;flex-direction:row;background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light);box-sizing:border-box;cursor:pointer}li.hovered{background-color:var(--neutral-white)}li cura-heading{width:100%;margin-block:0px}li ::slotted(div[slot=image]){min-width:32px;display:flex;justify-content:center;align-items:center}li ::slotted(div[slot=action]){display:flex;justify-content:end}li.selected{background-color:var(--primary-lighter)}li:hover{background-color:var(--neutral-white)}";
+const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}ul{list-style:none;width:100%;margin:0;padding:0}li{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:8px;padding:8px 4px;flex-direction:row;background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light);box-sizing:border-box;cursor:pointer}li.disabled{cursor:default}li.hovered{background-color:var(--neutral-white)}li cura-heading{width:100%;margin-block:0px}li ::slotted(div[slot=image]){min-width:32px;display:flex;justify-content:center;align-items:center}li ::slotted(div[slot=action]){display:flex;justify-content:end}li.selected{background-color:var(--primary-lighter)}li:hover:not(.disabled){background-color:var(--neutral-white)}";
 const CuraDropdownSearchOptionStyle0 = curaDropdownSearchOptionCss;
 
 const CuraDropdownSearchOption = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.optionSelected = createEvent(this, "optionSelected", 7);
-        this.handleOptionClick = () => {
-            this.selected = !this.selected;
-            this.optionSelected.emit(this.value);
-            this.updateIconColor();
+        this.handleOptionClick = (e) => {
+            if (this.selectable) {
+                this.selected = !this.selected;
+                this.optionSelected.emit(this.value);
+                this.updateIconColor();
+            }
+            else {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            }
         };
         this.value = undefined;
         this.selected = false;
+        this.selectable = true;
         this.hovered = false;
         this.styles = {};
     }
@@ -34,10 +41,11 @@ const CuraDropdownSearchOption = class {
         }
     }
     render() {
-        return (h(Host, { key: 'd045683759a6be8de6ba6e1e7c3ffb3c7e64c928', style: this.styles, slot: "dropdown-search-option" }, h("ul", { key: '6fe79f291239629e214bcda850891413c307e120' }, h("li", { key: 'b62dcc68f2c14da18894fbcdd5e68d5a417ce053', onClick: this.handleOptionClick, value: this.value, class: {
-                hovered: this.hovered,
+        return (h(Host, { key: 'aa4b585c3f67a74d1371430200ad309f74015af6', style: this.styles, slot: "dropdown-search-option" }, h("ul", { key: '5413964e5e10e68e4ff2ac30f68f6e22cff6dcc1' }, h("li", { key: '3aab9b7d5e3904e57a7310addc4b15a51453d31d', onClick: (e) => this.handleOptionClick(e), value: this.value, class: {
+                hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
-            } }, h("slot", { key: '8883c51c5789d57b8a6b4567f5faeaacd5d52bff', name: "image" }), h("cura-heading", { key: 'f701d19b2e707a78be62d3df5a768bf83959ecaa', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'ffe7d83f45a1757df017061a71b950cc50ce52d5' })), h("slot", { key: '4d0f901f5b5e1b7c8ebe5e1148118a2645c6eddd', name: "action" })))));
+                disabled: !this.selectable
+            } }, h("slot", { key: '030c06f2e9bcfd0169b8d94c8976cd4b1e25b834', name: "image" }), h("cura-heading", { key: 'f5bd16d815a853a41d98aac09517359a5e1b432d', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: '878d1db64dc98c57530adf947cbc216ac1ce1be0' })), h("slot", { key: '81c92fcb864bc8f2324cc353574123705fc386a8', name: "action" })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/cura-dropdown-search-option.entry.js.map

@@ -1 +1 @@
-{"file":"cura-dropdown-search-option.entry.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,6sBAA6sB,CAAC;AAClvB,uCAAe,2BAA2B;;MCM7B,wBAAwB;;;;QAmC3B,sBAAiB,GAAG;YAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB,CAAC;;wBA9B0D,KAAK;uBAKN,KAAK;sBAE9C,EAAE;;IAWpB,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAC/F,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;KAChG;IAQD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGO,eAAe;QACrB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC/E,IAAI,WAAW,EAAE;YACf,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,cAAc,CAAC,CAAC;SAC/E;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,wBAAwB,IACrD,6DACE,2DACE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,qEAAc,IAAI,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,IACjG,8DAAa,CACA,EACf,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACxB,CACF,CACA,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.scss?tag=cura-dropdown-search-option&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n}\n\nul {\n  list-style: none;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n}\nli {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 8px 4px;\n  flex-direction: row;\n  background-color: var(--neutral-purewhite);\n  border-bottom: 1px solid var(--neutral-light);\n  box-sizing: border-box;\n  cursor: pointer;\n\n  &.hovered {\n    background-color: var(--neutral-white);\n  }\n\n  cura-heading {\n    width: 100%;\n    margin-block: 0px;\n  }\n\n  ::slotted(div[slot='image']) {\n    min-width: 32px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  ::slotted(div[slot='action']) {\n    display: flex;\n    justify-content: end;\n  }\n\n  &.selected {\n    background-color: var(--primary-lighter);\n  }\n\n  &:hover {\n    background-color: var(--neutral-white);\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-option',\n  styleUrl: 'cura-dropdown-search-option.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchOption {\n  /**\n   * The value of the dropdown search option.\n   */\n  @Prop({ reflect: true }) value: string;\n\n  /**\n   * Indicates if the dropdown search option is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /**\n   * Indicates if the dropdown search option is hovered.\n   */\n  @Prop({ reflect: true, mutable: true }) hovered: boolean = false;\n\n  @State() styles = {};\n\n  /**\n   * Event emitted when the option is selected.\n   */\n  @Event() optionSelected: EventEmitter<string>;\n\n  @Element() hostElement: HTMLElement;\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`, 50);\n  }\n\n  private handleOptionClick = () => {\n    this.selected = !this.selected;\n    this.optionSelected.emit(this.value);\n    this.updateIconColor();\n  };\n\n  componentDidLoad() {\n    this.updateIconColor();\n  }\n\n  @Watch('selected')\n  private updateIconColor() {\n    const iconElement = this.hostElement.querySelector('[slot=\"image\"] cura-icon');\n    if (iconElement) {\n      iconElement.setAttribute('color', this.selected ? 'primary' : 'neutral-dark');\n    }\n  }\n\n  render() {\n    return (\n      <Host style={this.styles} slot=\"dropdown-search-option\">\n        <ul>\n          <li\n            onClick={this.handleOptionClick}\n            value={this.value}\n            class={{\n              hovered: this.hovered,\n              selected: this.selected,\n            }}\n          >\n            <slot name=\"image\"></slot>\n            <cura-heading size=\"xsmall\" lineHeight=\"16px\" marginBlock=\"0px\" weight=\"bold\" color=\"neutral-black\">\n              <slot></slot>\n            </cura-heading>\n            <slot name=\"action\"></slot>\n          </li>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-dropdown-search-option.entry.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,uvBAAuvB,CAAC;AAC5xB,uCAAe,2BAA2B;;MCM7B,wBAAwB;;;;QAwC3B,sBAAiB,GAAG,CAAC,CAAQ;YACnC,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACrC,IAAI,CAAC,eAAe,EAAE,CAAC;aACxB;iBAAM;gBACL,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,wBAAwB,EAAE,CAAC;aAC9B;SACF,CAAC;;wBAxC0D,KAAK;0BAKlB,IAAI;uBAKQ,KAAK;sBAE9C,EAAE;;IAWpB,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAC/F,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;KAChG;IAaD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGO,eAAe;QACrB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC/E,IAAI,WAAW,EAAE;YACf,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,cAAc,CAAC,CAAC;SAC/E;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,wBAAwB,IACrD,6DACE,2DACE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EACzC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,GAAG,KAAK;gBAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;aAC3B,IAED,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,qEAAc,IAAI,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,IACjG,8DAAa,CACA,EACf,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACxB,CACF,CACA,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.scss?tag=cura-dropdown-search-option&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n}\n\nul {\n  list-style: none;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n}\nli {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 8px 4px;\n  flex-direction: row;\n  background-color: var(--neutral-purewhite);\n  border-bottom: 1px solid var(--neutral-light);\n  box-sizing: border-box;\n  cursor: pointer;\n\n  &.disabled {\n    cursor: default;\n  }\n\n  &.hovered {\n    background-color: var(--neutral-white);\n  }\n\n  cura-heading {\n    width: 100%;\n    margin-block: 0px;\n  }\n\n  ::slotted(div[slot='image']) {\n    min-width: 32px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  ::slotted(div[slot='action']) {\n    display: flex;\n    justify-content: end;\n  }\n\n  &.selected {\n    background-color: var(--primary-lighter);\n  }\n\n  &:hover:not(.disabled) {\n    background-color: var(--neutral-white);\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-option',\n  styleUrl: 'cura-dropdown-search-option.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchOption {\n  /**\n   * The value of the dropdown search option.\n   */\n  @Prop({ reflect: true }) value: string;\n\n  /**\n   * Indicates if the dropdown search option is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /**\n   * Indicates if the dropdown search is selectable.\n   */\n  @Prop({ reflect: true }) selectable: boolean = true;\n\n  /**\n   * Indicates if the dropdown search option is hovered.\n   */\n  @Prop({ reflect: true, mutable: true }) hovered: boolean = false;\n\n  @State() styles = {};\n\n  /**\n   * Event emitted when the option is selected.\n   */\n  @Event() optionSelected: EventEmitter<string>;\n\n  @Element() hostElement: HTMLElement;\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`, 50);\n  }\n\n  private handleOptionClick = (e: Event) => {\n    if (this.selectable) {\n      this.selected = !this.selected;\n      this.optionSelected.emit(this.value);\n      this.updateIconColor();\n    } else {\n      e.preventDefault();\n      e.stopImmediatePropagation();\n    }\n  };\n\n  componentDidLoad() {\n    this.updateIconColor();\n  }\n\n  @Watch('selected')\n  private updateIconColor() {\n    const iconElement = this.hostElement.querySelector('[slot=\"image\"] cura-icon');\n    if (iconElement) {\n      iconElement.setAttribute('color', this.selected ? 'primary' : 'neutral-dark');\n    }\n  }\n\n  render() {\n    return (\n      <Host style={this.styles} slot=\"dropdown-search-option\">\n        <ul>\n          <li\n            onClick={(e) => this.handleOptionClick(e)}\n            value={this.value}\n            class={{\n              hovered: this.selectable ? this.hovered : false,\n              selected: this.selected,\n              disabled: !this.selectable\n            }}\n          >\n            <slot name=\"image\"></slot>\n            <cura-heading size=\"xsmall\" lineHeight=\"16px\" marginBlock=\"0px\" weight=\"bold\" color=\"neutral-black\">\n              <slot></slot>\n            </cura-heading>\n            <slot name=\"action\"></slot>\n          </li>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}