@public-ui/components 2.0.0-rc.4 → 2.0.0-rc.6

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as n,g as i}from"./index-9c30809b.js";import{n as s}from"./dev.utils-a3434f6d.js";import{s as a,t as l}from"./events-2bb1065b.js";import{S as o,a as r,s as h}from"./reuse-b3566e4c.js";import{v as d,g as p}from"./controller-fcc8cf56.js";import{f as u,v as c}from"./controller-f3d24f60.js";import{v as f}from"./rows-b171bdf6.js";import{a as m}from"./a11y.tipps-7abac3bc.js";import{a as v,c as b}from"./prop.validators-0c664b0b.js";import{I as y}from"./controller-icon-12bd4deb.js";import"./hide-label-9aa03e52.js";import"./label-ba8d055d.js";import"./tab-index-59a834d8.js";import"./associated.controller-4d9bd1af.js";import"./icons-01b98419.js";class g extends y{constructor(t,e,n){super(t,e,n),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.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),u(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?(e.set("_value",[n[0].value]),this.onStateChange()):Array.isArray(t)&&i.length<t.length&&(e.set("_value",i),this.onStateChange())}},this.component=t}validateHideError(t){d(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&m("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateOptions(t){c(this.component,t,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(t){v(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(t){v(this.component,"_required",t)}validateRows(t){f(this.component,t)}validateValue(t){b(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(o)}))}},this.validateHideError(this.component._hideError),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const _="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n",k=(t,e)=>Array.isArray(t)&&t.includes(e),x=class{renderOptgroup(e,n){var i;return t("optgroup",{disabled:e.disabled,label:e.label},null===(i=e.options)||void 0===i?void 0:i.map(((e,i)=>{const a=`${n}-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:e.disabled,key:a,selected:k(this.state._value,e.value),value:a},e.label)})))}render(){const{ariaDescribedBy:n}=p(this.state),i=h(this.state._label);return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{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()}},t("span",{slot:"label"},i?t("slot",{name:"expert"}):this.state._label),t("div",{slot:"input"},t("select",{ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":n.length>0?n.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",onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus,onChange:this.onChange},this.state._options.map(((e,n)=>{const i=`-${n}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):t("option",{disabled:e.disabled,key:i,selected:k(this.state._value,e.value),value:i},e.label)}))))))}constructor(t){n(this,t),this.catchRef=t=>{this.ref=t,r(this.host,this.ref)},this.onChange=t=>{var e,n;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})),a(t),l("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=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._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new g(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)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(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)}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 i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:_};export{x as kol_select};
+import{h as t,F as e,H as n,r as i,g as s}from"./index-9c30809b.js";import{n as a}from"./dev.utils-075f4e7b.js";import{s as l,t as o}from"./events-2bb1065b.js";import{S as r,a as h,s as d}from"./reuse-b3566e4c.js";import{v as p,g as u}from"./controller-6a175634.js";import{I as c}from"./InternalUnderlinedAccessKey-f593c389.js";import{f,v as m}from"./controller-98501396.js";import{v as y}from"./rows-1eebe49e.js";import{a as v}from"./a11y.tipps-06cd7c77.js";import{a as b,c as g}from"./prop.validators-3d53ddab.js";import{I as _}from"./controller-icon-ffe0af69.js";import"./hide-label-3381f0cc.js";import"./label-5c173d60.js";import"./tab-index-d2d0d9db.js";import"./associated.controller-1124284d.js";import"./icons-062ba29d.js";class k extends _{constructor(t,e,n){super(t,e,n),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.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),f(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?(e.set("_value",[n[0].value]),this.onStateChange()):Array.isArray(t)&&i.length<t.length&&(e.set("_value",i),this.onStateChange())}},this.component=t}validateHideError(t){p(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&v("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateOptions(t){m(this.component,t,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(t){b(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(t){b(this.component,"_required",t)}validateRows(t){y(this.component,t)}validateValue(t){g(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(r)}))}},this.validateHideError(this.component._hideError),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const x="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n",w=(t,e)=>Array.isArray(t)&&t.includes(e),z=class{renderOptgroup(e,n){var i;return t("optgroup",{disabled:e.disabled,label:e.label},null===(i=e.options)||void 0===i?void 0:i.map(((e,i)=>{const a=`${n}-${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)})))}render(){const{ariaDescribedBy:i}=u(this.state),a=d(this.state._label);return t(n,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_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()}},t("span",{slot:"label"},a?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey?t(e,null,t(c,{accessKey:this.state._accessKey,label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):t("span",null,this.state._label)),t("div",{slot:"input"},t("select",{ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.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",onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus,onChange:this.onChange},this.state._options.map(((e,n)=>{const i=`-${n}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):t("option",{disabled:e.disabled,key:i,selected:w(this.state._value,e.value),value:i},e.label)}))))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,h(this.host,this.ref)},this.onChange=t=>{var e,n;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),o("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=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._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${a()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new k(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)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(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)}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"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};z.style={default:x};export{z 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","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHideError","hooks","afterPatch","_hideError","a11yHint","validateOptions","validateOptionsWithOptgroup","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_required","_rows","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","disabled","label","_a","map","index","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","Host","class","_hasValue","_hideLabel","select","_disabled","_error","_hint","_icons","_id","_tooltipAlign","_touched","onClick","ref","focus","slot","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","controller","onFacade","onBlur","onFocus","hostRef","propagateFocus","event","from","stopPropagation","tryToDispatchKoliBriEvent","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["src/components/select/controller.ts","src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { HideErrorPropType, validateHideError } from '../../types/props/hide-error';\nimport { OptionsWithOptgroupPropType, validateOptionsWithOptgroup } from '../../types/props/options';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { a11yHint } from '../../utils/a11y.tipps';\nimport { watchBoolean, watchJsonArrayString } 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? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\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\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\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tvalidateHideError(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideError) {\n\t\t\t\t\t\ta11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\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\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\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\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.validateHideError(this.component._hideError);\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\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';\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.css',\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={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\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>\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot name=\"expert\"></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\t{...{\n\t\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t\t}}\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</kol-input>\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 * 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 * 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 * 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 * 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_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\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('_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('_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('_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('_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":";;;iqBAeaA,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,SAC3CR,KAAKM,iBAAiBC,EAAQG,EAA4BF,SAC1D,UACEK,UAISb,KAAAc,sBAAwB,CAACC,EAAkBP,IACpDO,EAAOC,QAAQT,GAAUP,KAAKM,iBAAiBC,EAAOC,KAAaK,YAG1Db,KAAAiB,mBAAqB,CAACC,EAAiBC,KACvD,MAAMX,EAAUW,EAAUC,IAAI,YAAcD,EAAUd,IAAI,YAAcL,KAAKJ,UAAUyB,MAAMC,SAC7F,GAAIX,MAAMC,QAAQJ,IAAYA,EAAQe,OAAS,EAAG,CACjDvB,KAAKC,aAAauB,QAClBC,EAAiBzB,KAAKC,aAAcO,GACpC,MAAMD,EAAQY,EAAUC,IAAI,UAAYD,EAAUd,IAAI,UAAYL,KAAKJ,UAAUyB,MAAMH,OACvF,MAAMQ,EAAW1B,KAAKc,sBACrBH,MAAMC,QAAQL,IAAUA,EAAMgB,OAAS,EAAKhB,EAAqB,GACjEC,GAED,GAAIR,KAAKJ,UAAU+B,YAAc,OAASD,EAASH,SAAW,EAAG,CAChEJ,EAAUS,IAAI,SAAU,CAEtBpB,EAAQ,GAGPD,QAEHP,KAAK6B,e,MACC,GAAIlB,MAAMC,QAAQL,IAAUmB,EAASH,OAAShB,EAAMgB,OAAQ,CAClEJ,EAAUS,IAAI,SAAUF,GACxB1B,KAAK6B,e,IA1CP7B,KAAKJ,UAAYA,C,CA+CX,iBAAAkC,CAAkBvB,GACxBuB,EAAkB9B,KAAKJ,UAAWW,EAAO,CACxCwB,MAAO,CACNC,WAAY,KACX,GAAIhC,KAAKJ,UAAUyB,MAAMY,WAAY,CACpCC,EAAS,2G,MAOP,eAAAC,CAAgB5B,GACtB6B,EAA4BpC,KAAKJ,UAAWW,EAAO,CAClDwB,MAAO,CACNM,YAAarC,KAAKiB,qB,CAKd,gBAAAqB,CAAiB/B,GACvBgC,EAAavC,KAAKJ,UAAW,YAAaW,EAAO,CAChDwB,MAAO,CACNM,YAAarC,KAAKiB,qB,CAWd,gBAAAuB,CAAiBjC,GACvBgC,EAAavC,KAAKJ,UAAW,YAAaW,E,CAGpC,YAAAkC,CAAalC,GACnBkC,EAAazC,KAAKJ,UAAWW,E,CAGvB,aAAAmC,CAAcnC,GACpBoC,EAAqB3C,KAAKJ,UAAW,UAAU,IAAM,MAAMW,EAAOM,UAAW,CAC5EkB,MAAO,CACNM,YAAarC,KAAKiB,sBAGpBjB,KAAK4C,uBAAuB5C,KAAKJ,UAAUsB,O,CAGrC,iBAAA2B,CAAkBC,GACxB/C,MAAM8C,oBAEN7C,KAAK6B,cAAgB,KACpB,UAAWiB,IAAa,WAAY,CACnC,MAAMC,EAAUC,YAAW,KAC1BC,aAAaF,GACbD,EAASI,EAAmB,G,GAK/BlD,KAAK8B,kBAAkB9B,KAAKJ,UAAUqC,YACtCjC,KAAKmC,gBAAgBnC,KAAKJ,UAAU0B,UACpCtB,KAAKsC,iBAAiBtC,KAAKJ,UAAU+B,WACrC3B,KAAKwC,iBAAiBxC,KAAKJ,UAAUuD,WACrCnD,KAAKyC,aAAazC,KAAKJ,UAAUwD,OACjCpD,KAAK0C,cAAc1C,KAAKJ,UAAUsB,O,ECzIpC,MAAMmC,EAAkB,m6JCqBxB,MAAMC,EAAa,CAACC,EAA6BC,IACzC7C,MAAMC,QAAQ2C,IAAcA,EAAUE,SAASD,G,MAa1CE,EAAS,MASb,cAAAC,CAAeC,EAA4BC,G,MAClD,OACCC,EAAA,YAAUC,SAAUH,EAASG,SAAUC,MAAOJ,EAASI,QACrDC,EAAAL,EAASpD,WAAO,MAAAyD,SAAA,SAAAA,EAAEC,KAAI,CAACxD,EAAqCyD,KAC5D,MAAM/D,EAAM,GAAGyD,KAAUM,IACzB,GAAIxD,MAAMC,QAASF,EAA4BF,SAAU,CACxD,OAAOR,KAAK2D,eAAejD,EAA4BN,E,KACjD,CACN,OACC0D,EAAA,UACCC,SAAUrD,EAAOqD,SACjB3D,IAAKA,EAELsB,SAAU4B,EAAWtD,KAAKqB,MAAMH,OAASR,EAAiCH,OAC1EA,MAAOH,GAENM,EAAOsD,M,MASR,MAAAI,GACN,MAAMC,gBAAEA,GAAoBC,EAAgBtE,KAAKqB,OACjD,MAAMkD,EAAgBC,EAAexE,KAAKqB,MAAMoD,QAEhD,OACCX,EAACY,EAAI,CAACC,MAAO,CAAE,YAAa3E,KAAKqB,MAAMuD,YACtCd,EAAA,aACCa,MAAO,CACN,eAAgB3E,KAAKqB,MAAMwD,WAC3BC,OAAQ,MAETC,UAAW/E,KAAKqB,MAAM0D,UACtBC,OAAQhF,KAAKqB,MAAM2D,OACnB/C,WAAYjC,KAAKqB,MAAMY,WACvB4C,WAAY7E,KAAKqB,MAAMwD,WACvBI,MAAOjF,KAAKqB,MAAM4D,MAClBC,OAAQlF,KAAKqB,MAAM6D,OACnBC,IAAKnF,KAAKqB,MAAM8D,IAChBV,OAAQzE,KAAKqB,MAAMoD,OACnBtB,UAAWnD,KAAKqB,MAAM8B,UACtBiC,cAAepF,KAAKoF,cACpBC,SAAUrF,KAAKqB,MAAMgE,SACrBC,QAAS,SAAArB,EAAM,OAAAA,EAAAjE,KAAKuF,OAAG,MAAAtB,SAAA,SAAAA,EAAEuB,OAAO,GAEhC1B,EAAA,QAAM2B,KAAK,SAASlB,EAAgBT,EAAA,QAAMjE,KAAK,WAAmBG,KAAKqB,MAAMoD,QAC7EX,EAAA,OAAK2B,KAAK,SACT3B,EAAA,UACCyB,IAAKvF,KAAK0F,SACVC,MAAM,GACNC,UAAW5F,KAAKqB,MAAMwE,WAAU,mBACdxB,EAAgB9C,OAAS,EAAI8C,EAAgByB,KAAK,KAAOjF,UAAS,aACxEb,KAAKqB,MAAMwD,mBAAqB7E,KAAKqB,MAAMoD,SAAW,SAAWzE,KAAKqB,MAAMoD,OAAS5D,UACjGkF,eAAe,MACfC,YAAY,MACZjC,SAAU/D,KAAKqB,MAAM0D,UACrBkB,GAAIjG,KAAKqB,MAAM8D,IACfe,SAAUlG,KAAKqB,MAAMM,UACrB9B,KAAMG,KAAKqB,MAAM8E,MACjBC,SAAUpG,KAAKqB,MAAM8B,UACrBkD,KAAMrG,KAAKqB,MAAM+B,MACjBkD,WAAW,QAEVhB,QAAStF,KAAKuG,WAAWC,SAASlB,QAClCmB,OAAQzG,KAAKuG,WAAWC,SAASC,OACjCC,QAAS1G,KAAKuG,WAAWC,SAASE,QAEnC5D,SAAU9C,KAAK8C,UAEd9C,KAAKqB,MAAMC,SAAS4C,KAAI,CAACxD,EAAQyD,KAMjC,MAAM/D,EAAM,IAAI+D,IAChB,GAAIxD,MAAMC,QAASF,EAAuCF,SAAU,CACnE,OAAOR,KAAK2D,eAAejD,EAAuCN,E,KAC5D,CACN,OACC0D,EAAA,UACCC,SAAUrD,EAAOqD,SACjB3D,IAAKA,EAELsB,SAAU4B,EAAWtD,KAAKqB,MAAMH,OAASR,EAA4CH,OACrFA,MAAOH,GAENM,EAAOsD,M,SAyIlB,WAAArE,CAAAgH,G,UAzOiB3G,KAAA0F,SAAYH,IAC5BvF,KAAKuF,IAAMA,EACXqB,EAAe5G,KAAKF,KAAME,KAAKuF,IAAI,EAwV5BvF,KAAA8C,SAAY+D,I,QACnB7G,KAAKkB,OAASP,MAAMmG,OAAK7C,EAAAjE,KAAKuF,OAAG,MAAAtB,SAAA,SAAAA,EAAEzD,UAAW,IAC5CQ,QAAQN,GAAWA,EAAOgB,WAAa,OACvCwC,KAAKxD,IAAM,IAAAuD,EAAK,OAAAA,EAAAjE,KAAKuG,WAAWpG,eAAeO,EAAOH,UAAM,MAAA0D,SAAA,SAAAA,EAAE1D,KAAe,IAG/EwG,EAAgBF,GAChBG,EAA0B,SAAUhH,KAAKF,KAAME,KAAKkB,QAGpDlB,KAAKuG,WAAW3D,uBAAuB5C,KAAKkB,QAG5C,WAAW+F,EAAAjH,KAAKqB,MAAM6F,OAAG,MAAAD,SAAA,SAAAA,EAAEnE,YAAa,WAAY,CACnD9C,KAAKqB,MAAM6F,IAAIpE,SAAS+D,EAAO7G,KAAKkB,O,yCAlP4B,K,eAM7B,M,sCAWiC,M,gBAOhC,M,WAKN,G,8EAqBK,M,+EAqBA,M,qGAqBiB,M,cAMc,M,iCAOpC,CAC/B0D,UAAW,MACX3C,WAAY,MACZkD,IAAK,MAAMgC,MACX1C,OAAQ,GACR9C,UAAW,MACXL,SAAU,GACVJ,OAAQ,IAIRlB,KAAKuG,WAAa,IAAI9G,EAAiBO,KAAM,SAAUA,KAAKF,K,CAItD,iBAAAsH,CAAkB7G,GACxBP,KAAKuG,WAAWa,kBAAkB7G,E,CAI5B,aAAA8G,CAAc9G,GACpBP,KAAKuG,WAAWc,cAAc9G,E,CAIxB,gBAAA+G,CAAiB/G,GACvBP,KAAKuG,WAAWe,iBAAiB/G,E,CAI3B,aAAAgH,CAAchH,GACpBP,KAAKuG,WAAWgB,cAAchH,E,CAIxB,iBAAAuB,CAAkBvB,GACxBP,KAAKuG,WAAWzE,kBAAkBvB,E,CAI5B,iBAAAiH,CAAkBjH,GACxBP,KAAKuG,WAAWiB,kBAAkBjH,E,CAI5B,YAAAkH,CAAalH,GACnBP,KAAKuG,WAAWkB,aAAalH,E,CAIvB,aAAAmH,CAAcnH,GACpBP,KAAKuG,WAAWmB,cAAcnH,E,CAIxB,UAAAoH,CAAWpH,GACjBP,KAAKuG,WAAWoB,WAAWpH,E,CAIrB,aAAAqH,CAAcrH,GACpBP,KAAKuG,WAAWqB,cAAcrH,E,CAIxB,gBAAA+B,CAAiB/B,GACvBP,KAAKuG,WAAWjE,iBAAiB/B,E,CAI3B,YAAAsH,CAAatH,GACnBP,KAAKuG,WAAWsB,aAAatH,E,CAIvB,UAAAuH,CAAWvH,GACjBP,KAAKuG,WAAWuB,WAAWvH,E,CAIrB,eAAA4B,CAAgB5B,GACtBP,KAAKuG,WAAWpE,gBAAgB5B,E,CAI1B,gBAAAiC,CAAiBjC,GACvBP,KAAKuG,WAAW/D,iBAAiBjC,E,CAI3B,YAAAkC,CAAalC,GACnBP,KAAKuG,WAAW9D,aAAalC,E,CAIvB,2BAAAwH,CAA4BxH,GAClCP,KAAKuG,WAAWwB,4BAA4BxH,E,CAItC,gBAAAyH,CAAiBzH,GACvBP,KAAKuG,WAAWyB,iBAAiBzH,E,CAI3B,eAAA0H,CAAgB1H,GACtBP,KAAKuG,WAAW0B,gBAAgB1H,E,CAI1B,aAAAmC,CAAcnC,GACpBP,KAAKuG,WAAW7D,cAAcnC,E,CAGxB,iBAAAsC,GACN7C,KAAKkI,OAASlI,KAAKkI,SAAW,KAC9BlI,KAAKqF,SAAWrF,KAAKqF,WAAa,KAClCrF,KAAKuG,WAAW1D,kBAAkB7C,KAAK8C,UAEvC9C,KAAKqB,MAAMuD,YAAc5E,KAAKqB,MAAMH,OACpClB,KAAKuG,WAAW4B,wBAAwBC,GAAOpI,KAAKqB,MAAMuD,YAAcwD,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","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHideError","hooks","afterPatch","_hideError","a11yHint","validateOptions","validateOptionsWithOptgroup","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_required","_rows","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","disabled","label","_a","map","index","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","Host","class","_hasValue","_hideLabel","select","_accessKey","_disabled","_error","_hint","_icons","_id","_tooltipAlign","_touched","onClick","ref","focus","slot","Fragment","InternalUnderlinedAccessKey","accessKey","catchRef","title","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","controller","onFacade","onBlur","onFocus","hostRef","propagateFocus","event","from","stopPropagation","tryToDispatchKoliBriEvent","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["src/components/select/controller.ts","src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { HideErrorPropType, validateHideError } from '../../types/props/hide-error';\nimport { OptionsWithOptgroupPropType, validateOptionsWithOptgroup } from '../../types/props/options';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { a11yHint } from '../../utils/a11y.tipps';\nimport { watchBoolean, watchJsonArrayString } 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? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\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\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\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tvalidateHideError(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideError) {\n\t\t\t\t\t\ta11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\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\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\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\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.validateHideError(this.component._hideError);\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n","import { Component, Element, Fragment, 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 { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\nimport { SelectController } from './controller';\nimport { API, States } from './types';\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.css',\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={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\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_accessKey={this.state._accessKey}\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>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</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\t{...{\n\t\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t\t}}\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</kol-input>\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 * 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 * 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 * 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 * 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_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\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('_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('_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('_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('_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":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n}from"./index-9c30809b.js";import{v as e}from"./label-ba8d055d.js";import{r as i,a}from"./unique-nav-labels-c6750f60.js";import{w as l}from"./validation-640284d3.js";import"./a11y.tipps-7abac3bc.js";import"./dev.utils-a3434f6d.js";import"./reuse-b3566e4c.js";import"./prop.validators-0c664b0b.js";const o="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n",s=class{constructor(n){t(this,n),this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return n("nav",{"aria-label":this.state._label},n("ul",null,this.state._links.map(((t,e)=>n("li",{key:e},n("kol-link-wc",Object.assign({},t)))))))}validateLabel(t,n,l=!1){l||i(this.state._label),e(this,t),a(this.state._label)}validateLinks(t){l("KolSkipNav",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};s.style={default:o};export{s as kol_skip_nav};
+import{r as t,h as n}from"./index-9c30809b.js";import{v as e}from"./label-5c173d60.js";import{r as i,a as l}from"./unique-nav-labels-c6750f60.js";import{w as a}from"./validation-68e14b6f.js";import"./a11y.tipps-06cd7c77.js";import"./dev.utils-075f4e7b.js";import"./reuse-b3566e4c.js";import"./prop.validators-3d53ddab.js";const o="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n",s=class{constructor(n){t(this,n),this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return n("nav",{"aria-label":this.state._label},n("ul",null,this.state._links.map(((t,e)=>n("li",{key:e},n("kol-link-wc",Object.assign({},t)))))))}validateLabel(t,n,a=!1){a||i(this.state._label),e(this,t),l(this.state._label)}validateLinks(t){a("KolSkipNav",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};s.style={default:o};export{s as kol_skip_nav};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNav","_label","_links","render","h","this","state","map","link","index","key","Object","assign","validateLabel","value","_oldValue","initial","removeNavLabel","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;6TAAA,MAAMA,EAAkB,kyG,MCgBXC,EAAU,M,gFA2BU,CAC/BC,OAAQ,IACRC,OAAQ,G,CA5BF,MAAAC,GACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,QAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GACRL,EAAA,cAAAO,OAAAC,OAAA,GAAiBJ,Q,CAyBjB,aAAAK,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAeZ,KAAKC,MAAML,O,CAE3BY,EAAcR,KAAMS,GACpBI,EAAYb,KAAKC,MAAML,O,CAIjB,aAAAkB,CAAcL,GACpBM,EAAc,aAAcf,KAAMS,E,CAG5B,iBAAAO,GACNhB,KAAKQ,cAAcR,KAAKJ,OAAQqB,UAAW,MAC3CjB,KAAKc,cAAcd,KAAKH,O,CAGlB,oBAAAqB,GACNN,EAAeZ,KAAKC,MAAML,O"}
+{"version":3,"names":["defaultStyleCss","KolSkipNav","_label","_links","render","h","this","state","map","link","index","key","Object","assign","validateLabel","value","_oldValue","initial","removeNavLabel","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;kUAAA,MAAMA,EAAkB,kyG,MCgBXC,EAAU,M,gFA2BU,CAC/BC,OAAQ,IACRC,OAAQ,G,CA5BF,MAAAC,GACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,QAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GACRL,EAAA,cAAAO,OAAAC,OAAA,GAAiBJ,Q,CAyBjB,aAAAK,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAeZ,KAAKC,MAAML,O,CAE3BY,EAAcR,KAAMS,GACpBI,EAAYb,KAAKC,MAAML,O,CAIjB,aAAAkB,CAAcL,GACpBM,EAAc,aAAcf,KAAMS,E,CAG5B,iBAAAO,GACNhB,KAAKQ,cAAcR,KAAKJ,OAAQqB,UAAW,MAC3CjB,KAAKc,cAAcd,KAAKH,O,CAGlB,oBAAAqB,GACNN,EAAeZ,KAAKC,MAAML,O"}