@public-ui/components 1.7.19 → 1.7.21

package/dist/kolibri/kol-select.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as e,g as s}from"./index-a051748e.js";import{n as a}from"./dev.utils-f829063f.js";import{s as l,t as n}from"./events-fa760b68.js";import{S as o,s as r,a as h}from"./reuse-d79ab469.js";import{g as d}from"./controller-d9f61e71.js";import{f as p,v as c}from"./controller-4693379a.js";import{v as u}from"./rows-4627c8c8.js";import{d as f,a as v,c as b}from"./prop.validators-3017e14b.js";import{I as y}from"./controller-icon-7d98b00e.js";import{m}from"./component-names-fed305c7.js";import"./hide-label-000c16f6.js";import"./label-bce4f328.js";import"./a11y.tipps-798efb1a.js";import"./tab-index-22839788.js";import"./associated.controller-367d4241.js";import"./index-117bd1aa.js";import"./icons-82e358f3.js";class _ extends y{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.afterPatchOptions=(t,e,i,a)=>{"_value"===a&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),p(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHeight(t){f(this.component,"_height",t)}validateOptions(t){c(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(t){v(this.component,"_multiple",t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){v(this.component,"_required",t)}validateRows(t){u(this.component,t)}validateValue(t){b(this.component,"_value",(()=>!0),t,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(o)}))}},this.validateHeight(this.component._height),this.validateOptions(this.component._options||this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows||this.component._size),this.validateValue(this.component._value)}}const g=':host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.required label>span::after,.required legend>span::after{content:"*"}:host{display:block}input,textarea{cursor:text}input[type=checkbox],input[type=color],input[type=file],input[type=radio],input[type=range],label,option,select{cursor:pointer}input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,select[multiple] option,textarea{font-size:calc(16rem / var(--kolibri-root-font-size, 16));width:100%}input[type=file]{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em}.kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}.kol-input{display:grid}.kol-input .input-slot{flex-grow:1}input:not([type=checkbox],[type=radio]),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>.kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}.kol-input.required .input-tooltip .span-label::after{content:"*"}',k=g,w=(t,e)=>Array.isArray(t)&&t.includes(e),x=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const s=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,s):t("option",{disabled:e.disabled,key:s,selected:w(this.state._value,e.value),value:s},e.label)})))}render(){const{ariaDescribedBy:e}=d(this.state),a=r(this.state._label);return t(i,{key:"2a29b7776ff32a9ce033bcf43512cbc80c648de7",class:{"kol-select":!0,"has-value":this.state._hasValue}},t(m,{key:"e09b17ca3e301bb6c7a257705767c66ca202c995",class:{"hide-label":!!this.state._hideLabel,select:!0},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"34b47aa617fb07653e7596cd059301086350b6d5",slot:"label"},a?t("slot",null):this.state._label),t("div",{key:"c06b756042b03781fedde5eca8c9a4eb36ec78bd",slot:"input"},t("select",Object.assign({key:"e799df570651eaf272b6b25d6c1385fc68a2d1ba",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false",style:{height:this.state._height}},this.controller.onFacade,{onChange:this.onChange}),this.state._options.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:e.disabled,key:a,selected:w(this.state._value,e.value),value:a},e.label)}))))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,h(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),l(t),n("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._height=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._rows=void 0,this._size=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_hideError:!1,_id:`id-${a()}`,_label:"…",_multiple:!1,_options:[],_value:[]},this.controller=new _(this,"select",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateOptions(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSize(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_size:["validateSize"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:k};export{x as kol_select};
+import{h as t,H as i,r as e,g as s}from"./index-dfb131c4.js";import{n as a}from"./dev.utils-1e8dd4a9.js";import{t as l,s as n}from"./events-fa760b68.js";import{S as o,s as r,a as h}from"./reuse-d79ab469.js";import{g as d}from"./controller-144e628b.js";import{f as p,v as u}from"./controller-01043b6c.js";import{v as c}from"./rows-4f0d764d.js";import{d as f,a as v,c as b}from"./prop.validators-a62aac63.js";import{I as y}from"./controller-icon-d8edaf27.js";import{m}from"./component-names-fed305c7.js";import"./hide-label-16c3f288.js";import"./label-48b51f80.js";import"./a11y.tipps-477c41d6.js";import"./tab-index-6065fa94.js";import"./associated.controller-8a07ed2c.js";import"./index-117bd1aa.js";import"./icons-c8b28f01.js";class _ extends y{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.afterPatchOptions=(t,e,i,a)=>{"_value"===a&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),p(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHeight(t){f(this.component,"_height",t)}validateOptions(t){u(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(t){v(this.component,"_multiple",t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){v(this.component,"_required",t)}validateRows(t){c(this.component,t)}validateValue(t){b(this.component,"_value",(()=>!0),t,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(o)}))}},this.validateHeight(this.component._height),this.validateOptions(this.component._options||this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows||this.component._size),this.validateValue(this.component._value)}}const g=':host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.required label>span::after,.required legend>span::after{content:"*"}:host{display:block}input,textarea{cursor:text}input[type=checkbox],input[type=color],input[type=file],input[type=radio],input[type=range],label,option,select{cursor:pointer}input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,select[multiple] option,textarea{font-size:calc(16rem / var(--kolibri-root-font-size, 16));width:100%}input[type=file]{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em}.kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}.kol-input{display:grid}.kol-input .input-slot{flex-grow:1}input:not([type=checkbox],[type=radio]),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>.kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}.kol-input.required .input-tooltip .span-label::after{content:"*"}',k=g,w=(t,e)=>Array.isArray(t)&&t.includes(e),x=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const s=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,s):t("option",{disabled:e.disabled,key:s,selected:w(this.state._value,e.value),value:s},e.label)})))}render(){const{ariaDescribedBy:e}=d(this.state),a=r(this.state._label);return t(i,{key:"afe610ddf1a160aa0aa3b77828e244e6c05b0ec2",class:{"kol-select":!0,"has-value":this.state._hasValue}},t(m,{key:"6ceb377e2ac975571790359839a3a78285da6b84",class:{"hide-label":!!this.state._hideLabel,select:!0},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"31b0c398fc384a5e3b3a7d56a668a56349beda03",slot:"label"},a?t("slot",null):this.state._label),t("div",{key:"118eb6618d333bcd5d1c5c10428f26e8a5a55092",slot:"input"},t("select",Object.assign({key:"f9e0f6acefb6a5d8b021073313f616a7d4ab5a29",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false",style:{height:this.state._height}},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this)}),this.state._options.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:e.disabled,key:a,selected:w(this.state._value,e.value),value:a},e.label)}))))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,h(this.host,this.ref)},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._height=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._rows=void 0,this._size=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_hideError:!1,_id:`id-${a()}`,_label:"…",_multiple:!1,_options:[],_value:[]},this.controller=new _(this,"select",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateOptions(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSize(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange.bind(this)),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}onInput(t){var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),l("input",this.host,this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onInput)&&this.state._on.onInput(t,this._value)}onChange(t){var e;n(t),l("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,this._value)}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_size:["validateSize"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:k};export{x as kol_select};

package/dist/kolibri/kol-select.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","options","find","option","Array","isArray","undefined","filterValuesInOptions","values","filter","afterPatchOptions","_state","_component","setFormAssociatedValue","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateOptions","validateOptionsWithOptgroup","hooks","afterPatch","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_list","_required","_rows","_size","defaultStyleCss","KolSelectDefaultStyle0","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","disabled","label","_a","map","index","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","Host","class","_hasValue","KolInputTag","_hideLabel","select","_disabled","_error","_hideError","_hint","_icons","_id","_tooltipAlign","_touched","onClick","ref","focus","role","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","hostRef","propagateFocus","event","from","stopPropagation","tryToDispatchKoliBriEvent","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateIcon","validateIcons","validateId","validateLabel","validateList","validateName","validateOn","validateSize","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["src/components/select/controller.ts","src/components/select/style.scss?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { OptionsWithOptgroupPropType, validateOptionsWithOptgroup } from '../../types/props/options';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t\t: false,\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprivate readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[],\n\t\t\t);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\toptions[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateOptions(this.component._options || this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows || this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { OptionsWithOptgroupPropType } from '../../types/props/options';\nimport { RowsPropType } from '../../types/props/rows';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { API, States } from './types';\nimport { KolInputTag } from '../../core/component-names';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements API {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'kol-select': true, 'has-value': this.state._hasValue }}>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Deprecated: Defines an individual height.\n\t *\n\t * @deprecated Use _rows instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Options the user can choose from, also supporting Optgroup.\n\t * @deprecated use _options\n\t */\n\t@Prop() public _list?: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options?: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '…', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._value = Array.from(this.ref?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":";;;8tBAaaA,UAAyBC,EAKrC,WAAAC,CAAmBC,EAA8CC,EAAcC,GAC9EC,MAAMH,EAAWC,EAAMC,GAHPE,KAAAC,aAAe,IAAIC,IAOpBF,KAAAG,eAAkBC,GAAmDJ,KAAKC,aAAaI,IAAID,GAE1FJ,KAAAM,iBAAmB,CAACC,EAAeC,IAElDA,EAAQC,MAAMC,UACLA,EAAiCH,QAAU,SAC/CG,EAAiCH,QAAUA,EAC5CI,MAAMC,QAASF,EAA4BF,SAC1CR,KAAKM,iBAAiBC,EAAQG,EAA4BF,SAC1D,UACCK,UAISb,KAAAc,sBAAwB,CAACC,EAAkBP,IACpDO,EAAOC,QAAQT,GAAUP,KAAKM,iBAAiBC,EAAOC,KAAaK,YAGxDb,KAAAiB,kBAAoB,CAACV,EAAgBW,EAAiCC,EAAuCf,KAC/H,GAAIA,IAAQ,SAAU,CACrBJ,KAAKoB,uBAAuBb,E,GAIbP,KAAAqB,mBAAqB,CAACC,EAAiBC,KACvD,MAAMf,EAAUe,EAAUC,IAAI,YAAcD,EAAUlB,IAAI,YAAcL,KAAKJ,UAAU6B,MAAMC,SAC7F,GAAIf,MAAMC,QAAQJ,IAAYA,EAAQmB,OAAS,EAAG,CACjD3B,KAAKC,aAAa2B,QAClBC,EAAiB7B,KAAKC,aAAcO,GACpC,MAAMD,EAAQgB,EAAUC,IAAI,UAAYD,EAAUlB,IAAI,UAAYL,KAAKJ,UAAU6B,MAAMH,OACvF,MAAMQ,EAAW9B,KAAKc,sBACrBH,MAAMC,QAAQL,IAAUA,EAAMoB,OAAS,EAAKpB,EAAqB,GACjEC,GAED,GAAIR,KAAKJ,UAAUmC,YAAc,OAASD,EAASH,SAAW,EAAG,CAChEJ,EAAUS,IAAI,SAAU,CAEtBxB,EAAQ,GAGPD,QAEHP,KAAKiC,e,MACC,GAAItB,MAAMC,QAAQL,IAAUuB,EAASH,OAASpB,EAAMoB,OAAQ,CAClEJ,EAAUS,IAAI,SAAUF,GACxB9B,KAAKiC,e,IAhDPjC,KAAKJ,UAAYA,C,CAyDX,cAAAsC,CAAe3B,GACrB4B,EAAYnC,KAAKJ,UAAW,UAAWW,E,CAGjC,eAAA6B,CAAgB7B,GACtB8B,EAA4BrC,KAAKJ,UAAWW,EAAO,CAClD+B,MAAO,CACNC,WAAYvC,KAAKiB,kBACjBuB,YAAaxC,KAAKqB,qB,CAKd,gBAAAoB,CAAiBlC,GACvBmC,EAAa1C,KAAKJ,UAAW,YAAaW,EAAO,CAChD+B,MAAO,CACNC,WAAYvC,KAAKiB,kBACjBuB,YAAaxC,KAAKqB,qB,CAWd,gBAAAsB,CAAiBpC,GACvBmC,EAAa1C,KAAKJ,UAAW,YAAaW,E,CAGpC,YAAAqC,CAAarC,GACnBqC,EAAa5C,KAAKJ,UAAWW,E,CAGvB,aAAAsC,CAActC,GACpBuC,EAAqB9C,KAAKJ,UAAW,UAAU,IAAM,MAAMW,EAAOM,UAAW,CAC5EyB,MAAO,CACNC,WAAYvC,KAAKiB,kBACjBuB,YAAaxC,KAAKqB,qB,CAKd,iBAAA0B,CAAkBC,GACxBjD,MAAMgD,oBAEN/C,KAAKiC,cAAgB,KACpB,UAAWe,IAAa,WAAY,CACnC,MAAMC,EAAUC,YAAW,KAC1BC,aAAaF,GACbD,EAASI,EAAmB,G,GAK/BpD,KAAKkC,eAAelC,KAAKJ,UAAUyD,SACnCrD,KAAKoC,gBAAgBpC,KAAKJ,UAAU8B,UAAY1B,KAAKJ,UAAU0D,OAC/DtD,KAAKyC,iBAAiBzC,KAAKJ,UAAUmC,WACrC/B,KAAK2C,iBAAiB3C,KAAKJ,UAAU2D,WACrCvD,KAAK4C,aAAa5C,KAAKJ,UAAU4D,OAASxD,KAAKJ,UAAU6D,OACzDzD,KAAK6C,cAAc7C,KAAKJ,UAAU0B,O,EC3IpC,MAAMoC,EAAkB,iqEACxB,MAAAC,EAAeD,ECqBf,MAAME,EAAa,CAACC,EAA6BC,IACzCnD,MAAMC,QAAQiD,IAAcA,EAAUE,SAASD,G,MAa1CE,EAAS,MASb,cAAAC,CAAeC,EAA4BC,G,MAClD,OACCC,EAAA,YAAUC,SAAUH,EAASG,SAAUC,MAAOJ,EAASI,QACrDC,EAAAL,EAAS1D,WAAO,MAAA+D,SAAA,SAAAA,EAAEC,KAAI,CAAC9D,EAAqC+D,KAC5D,MAAMrE,EAAM,GAAG+D,KAAUM,IACzB,GAAI9D,MAAMC,QAASF,EAA4BF,SAAU,CACxD,OAAOR,KAAKiE,eAAevD,EAA4BN,E,KACjD,CACN,OACCgE,EAAA,UACCC,SAAU3D,EAAO2D,SACjBjE,IAAKA,EAEL0B,SAAU8B,EAAW5D,KAAKyB,MAAMH,OAASZ,EAAiCH,OAC1EA,MAAOH,GAENM,EAAO4D,M,MASR,MAAAI,GACN,MAAMC,gBAAEA,GAAoBC,EAAgB5E,KAAKyB,OACjD,MAAMoD,EAAgBC,EAAe9E,KAAKyB,MAAMsD,QAEhD,OACCX,EAACY,EAAI,CAAA5E,IAAA,2CAAC6E,MAAO,CAAE,aAAc,KAAM,YAAajF,KAAKyB,MAAMyD,YAC1Dd,EAACe,EAAW,CAAA/E,IAAA,2CACX6E,MAAO,CACN,eAAgBjF,KAAKyB,MAAM2D,WAC3BC,OAAQ,MAETC,UAAWtF,KAAKyB,MAAM6D,UACtBC,OAAQvF,KAAKyB,MAAM8D,OACnBC,WAAYxF,KAAKyB,MAAM+D,WACvBJ,WAAYpF,KAAKyB,MAAM2D,WACvBK,MAAOzF,KAAKyB,MAAMgE,MAClBC,OAAQ1F,KAAKyB,MAAMiE,OACnBC,IAAK3F,KAAKyB,MAAMkE,IAChBZ,OAAQ/E,KAAKyB,MAAMsD,OACnBxB,UAAWvD,KAAKyB,MAAM8B,UACtBqC,cAAe5F,KAAK4F,cACpBC,SAAU7F,KAAKyB,MAAMoE,SACrBC,QAAS,SAAAvB,EAAM,OAAAA,EAAAvE,KAAK+F,OAAG,MAAAxB,SAAA,SAAAA,EAAEyB,OAAO,EAChCC,KAAM,gBAGN7B,EAAA,QAAAhE,IAAA,2CAAM8F,KAAK,SAASrB,EAAgBT,EAAA,aAAgBpE,KAAKyB,MAAMsD,QAC/DX,EAAA,OAAAhE,IAAA,2CAAK8F,KAAK,SACT9B,EAAA,SAAA+B,OAAAC,OAAA,CAAAhG,IAAA,2CACC2F,IAAK/F,KAAKqG,SACVC,MAAM,GACNC,UAAWvG,KAAKyB,MAAM+E,WAAU,mBACd7B,EAAgBhD,OAAS,EAAIgD,EAAgB8B,KAAK,KAAO5F,UAAS,aACxEb,KAAKyB,MAAM2D,mBAAqBpF,KAAKyB,MAAMsD,SAAW,SAAW/E,KAAKyB,MAAMsD,OAASlE,UACjG6F,eAAe,MACfC,YAAY,MACZtC,SAAUrE,KAAKyB,MAAM6D,UACrBsB,GAAI5G,KAAKyB,MAAMkE,IACfkB,SAAU7G,KAAKyB,MAAMM,UACrBlC,KAAMG,KAAKyB,MAAMqF,MACjBC,SAAU/G,KAAKyB,MAAM8B,UACrByD,KAAMhH,KAAKyB,MAAM+B,MACjByD,WAAW,QACXC,MAAO,CACNC,OAAQnH,KAAKyB,MAAM4B,UAEhBrD,KAAKoH,WAAWC,SAAQ,CAC5BrE,SAAUhD,KAAKgD,WAEdhD,KAAKyB,MAAMC,SAAS8C,KAAI,CAAC9D,EAAQ+D,KAMjC,MAAMrE,EAAM,IAAIqE,IAChB,GAAI9D,MAAMC,QAASF,EAAuCF,SAAU,CACnE,OAAOR,KAAKiE,eAAevD,EAAuCN,E,KAC5D,CACN,OACCgE,EAAA,UACCC,SAAU3D,EAAO2D,SACjBjE,IAAKA,EAEL0B,SAAU8B,EAAW5D,KAAKyB,MAAMH,OAASZ,EAA4CH,OACrFA,MAAOH,GAENM,EAAO4D,M,SAiKlB,WAAA3E,CAAA2H,G,UAlQiBtH,KAAAqG,SAAYN,IAC5B/F,KAAK+F,IAAMA,EACXwB,EAAevH,KAAKF,KAAME,KAAK+F,IAAI,EAqY5B/F,KAAAgD,SAAYwE,I,QACnBxH,KAAKsB,OAASX,MAAM8G,OAAKlD,EAAAvE,KAAK+F,OAAG,MAAAxB,SAAA,SAAAA,EAAE/D,UAAW,IAC5CQ,QAAQN,GAAWA,EAAOoB,WAAa,OACvC0C,KAAK9D,IAAM,IAAA6D,EAAK,OAAAA,EAAAvE,KAAKoH,WAAWjH,eAAeO,EAAOH,UAAM,MAAAgE,SAAA,SAAAA,EAAEhE,KAAe,IAG/EmH,EAAgBF,GAChBG,EAA0B,SAAU3H,KAAKF,KAAME,KAAKsB,QAGpDtB,KAAKoH,WAAWhG,uBAAuBpB,KAAKsB,QAG5C,WAAWsG,EAAA5H,KAAKyB,MAAMoG,OAAG,MAAAD,SAAA,SAAAA,EAAE5E,YAAa,WAAY,CACnDhD,KAAKyB,MAAMoG,IAAI7E,SAASwE,EAAOxH,KAAKsB,O,yCA9R4B,K,eAM7B,M,6DAkBiC,M,gBAOhC,M,WAKN,G,wHAgCK,M,+EAqBA,M,0HA0BiB,M,cAMc,M,iCAOpC,CAC/B4D,UAAW,MACX7B,QAAS,GACTmC,WAAY,MACZG,IAAK,MAAMmC,MACX/C,OAAQ,IACRhD,UAAW,MACXL,SAAU,GACVJ,OAAQ,IAIRtB,KAAKoH,WAAa,IAAI3H,EAAiBO,KAAM,SAAUA,KAAKF,K,CAItD,iBAAAiI,CAAkBxH,GACxBP,KAAKoH,WAAWW,kBAAkBxH,E,CAI5B,aAAAyH,CAAczH,GACpBP,KAAKoH,WAAWY,cAAczH,E,CAIxB,gBAAA0H,CAAiB1H,GACvBP,KAAKoH,WAAWa,iBAAiB1H,E,CAI3B,aAAA2H,CAAc3H,GACpBP,KAAKoH,WAAWc,cAAc3H,E,CAIxB,cAAA2B,CAAe3B,GACrBP,KAAKoH,WAAWlF,eAAe3B,E,CAIzB,iBAAA4H,CAAkB5H,GACxBP,KAAKoH,WAAWe,kBAAkB5H,E,CAI5B,iBAAA6H,CAAkB7H,GACxBP,KAAKoH,WAAWgB,kBAAkB7H,E,CAI5B,YAAA8H,CAAa9H,GACnBP,KAAKoH,WAAWiB,aAAa9H,E,CAIvB,YAAA+H,CAAa/H,GACnBP,KAAKuI,cAAchI,E,CAIb,aAAAgI,CAAchI,GACpBP,KAAKoH,WAAWmB,cAAchI,E,CAIxB,UAAAiI,CAAWjI,GACjBP,KAAKoH,WAAWoB,WAAWjI,E,CAIrB,aAAAkI,CAAclI,GACpBP,KAAKoH,WAAWqB,cAAclI,E,CAIxB,YAAAmI,CAAanI,GACnBP,KAAKoC,gBAAgB7B,E,CAIf,gBAAAkC,CAAiBlC,GACvBP,KAAKoH,WAAW3E,iBAAiBlC,E,CAI3B,YAAAoI,CAAapI,GACnBP,KAAKoH,WAAWuB,aAAapI,E,CAIvB,UAAAqI,CAAWrI,GACjBP,KAAKoH,WAAWwB,WAAWrI,E,CAIrB,eAAA6B,CAAgB7B,GACtBP,KAAKoH,WAAWhF,gBAAgB7B,E,CAI1B,gBAAAoC,CAAiBpC,GACvBP,KAAKoH,WAAWzE,iBAAiBpC,E,CAI3B,YAAAqC,CAAarC,GACnBP,KAAKoH,WAAWxE,aAAarC,E,CAIvB,YAAAsI,CAAatI,GACnBP,KAAKoH,WAAWxE,aAAarC,E,CAIvB,2BAAAuI,CAA4BvI,GAClCP,KAAKoH,WAAW0B,4BAA4BvI,E,CAItC,gBAAAwI,CAAiBxI,GACvBP,KAAKoH,WAAW2B,iBAAiBxI,E,CAI3B,eAAAyI,CAAgBzI,GACtBP,KAAKoH,WAAW4B,gBAAgBzI,E,CAI1B,aAAAsC,CAActC,GACpBP,KAAKoH,WAAWvE,cAActC,E,CAGxB,iBAAAwC,GACN/C,KAAKiJ,OAASjJ,KAAKiJ,SAAW,KAC9BjJ,KAAK6F,SAAW7F,KAAK6F,WAAa,KAClC7F,KAAKoH,WAAWrE,kBAAkB/C,KAAKgD,UAEvChD,KAAKyB,MAAMyD,YAAclF,KAAKyB,MAAMH,OACpCtB,KAAKoH,WAAW8B,wBAAwBC,GAAOnJ,KAAKyB,MAAMyD,YAAciE,G"}
+{"version":3,"names":["SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","options","find","option","Array","isArray","undefined","filterValuesInOptions","values","filter","afterPatchOptions","_state","_component","setFormAssociatedValue","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateOptions","validateOptionsWithOptgroup","hooks","afterPatch","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_list","_required","_rows","_size","defaultStyleCss","KolSelectDefaultStyle0","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","disabled","label","_a","map","index","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","Host","class","_hasValue","KolInputTag","_hideLabel","select","_disabled","_error","_hideError","_hint","_icons","_id","_tooltipAlign","_touched","onClick","ref","focus","role","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","onInput","bind","hostRef","propagateFocus","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateIcon","validateIcons","validateId","validateLabel","validateList","validateName","validateOn","validateSize","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v","event","from","tryToDispatchKoliBriEvent","_b","_on","stopPropagation"],"sources":["src/components/select/controller.ts","src/components/select/style.scss?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { OptionsWithOptgroupPropType, validateOptionsWithOptgroup } from '../../types/props/options';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t\t: false,\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprivate readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[],\n\t\t\t);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\toptions[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateOptions(this.component._options || this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows || this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { OptionsWithOptgroupPropType } from '../../types/props/options';\nimport { RowsPropType } from '../../types/props/rows';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { API, States } from './types';\nimport { KolInputTag } from '../../core/component-names';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements API {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'kol-select': true, 'has-value': this.state._hasValue }}>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Deprecated: Defines an individual height.\n\t *\n\t * @deprecated Use _rows instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Options the user can choose from, also supporting Optgroup.\n\t * @deprecated use _options\n\t */\n\t@Prop() public _list?: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options?: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '…', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange.bind(this));\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onInput(event: Event): void {\n\t\tthis._value = Array.from(this.ref?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\t// Event handling\n\t\ttryToDispatchKoliBriEvent('input', this.host, this._value);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onInput === 'function') {\n\t\t\tthis.state._on.onInput(event, this._value);\n\t\t}\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t}\n}\n"],"mappings":"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"}

package/dist/kolibri/kol-skip-nav.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as e,H as a}from"./index-a051748e.js";import{v as t}from"./label-bce4f328.js";import{r as n,a as s}from"./unique-nav-labels-62d9802d.js";import{w as o}from"./validation-8785c967.js";import{n as l}from"./component-names-fed305c7.js";import"./a11y.tipps-798efb1a.js";import"./dev.utils-f829063f.js";import"./reuse-d79ab469.js";import"./prop.validators-3017e14b.js";import"./index-117bd1aa.js";const r=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}ul{display:grid;list-style:none;place-items:center}ul li{height:0}.kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",d=r,p=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return e(a,{key:"6bac1f8fc61116e7aa70c932bb6ecf73db61e709",class:"kol-skip-nav"},e("nav",{key:"7cc0e73452f3c84a2bcf077d2031e4a255653b33","aria-label":this.state._label},e("ul",{key:"3be87f3e954fe9caa7a5c3b5237fa4ef53343a98"},this.state._links.map(((i,a)=>e("li",{key:a},e(l,Object.assign({},i))))))))}validateAriaLabel(i){this.validateLabel(i)}validateLabel(i,a,e=!1){e||n(this.state._label),t(this,i,{required:!0}),s(this.state._label)}validateLinks(i){o("KolSkipNav",this,i)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){n(this.state._label)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};p.style={default:d};export{p as kol_skip_nav};
+import{r as i,h as e,H as t}from"./index-dfb131c4.js";import{v as a}from"./label-48b51f80.js";import{r as n,a as s}from"./unique-nav-labels-62d9802d.js";import{w as o}from"./validation-13009299.js";import{n as l}from"./component-names-fed305c7.js";import"./a11y.tipps-477c41d6.js";import"./dev.utils-1e8dd4a9.js";import"./reuse-d79ab469.js";import"./prop.validators-a62aac63.js";import"./index-117bd1aa.js";const r=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}ul{display:grid;list-style:none;place-items:center}ul li{height:0}.kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",d=r,p=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return e(t,{key:"0e6d86d9542b0b61bcf2b1f16aa6e06cb6857b9a",class:"kol-skip-nav"},e("nav",{key:"66f4d2a10303d500b2f103017fcf80ecd34a80ef","aria-label":this.state._label},e("ul",{key:"1e32a6232952c0bd6b723c37833c382e9e84013e"},this.state._links.map(((i,a)=>e("li",{key:a},e(l,Object.assign({},i))))))))}validateAriaLabel(i){this.validateLabel(i)}validateLabel(i,e,t=!1){t||n(this.state._label),a(this,i,{required:!0}),s(this.state._label)}validateLinks(i){o("KolSkipNav",this,i)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){n(this.state._label)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};p.style={default:d};export{p as kol_skip_nav};