@public-ui/components/dist/kolibri/kol-select-wc.entry.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{h as e,F as t,r as s,g as i}from"./index-DyUiyxj3.js";import{c as a}from"./clsx-eK3rPvPS.js";import{d as l,g as o,i as r,a as n,F as d}from"./FormFieldStateWrapper-COm9oJpc.js";import{I as h,a as c}from"./controller-icon-BSuMVX-J.js";import{_ as u}from"./tslib.es6-CxX45GIN.js";import{G as p}from"./common-BXXICkFX.js";import{n as v}from"./dev.utils-EtfHgKpk.js";import{p as f}from"./controller-D-keynM4.js";import{v as m}from"./multiple-BYEUdjyO.js";import{f as b,v as y}from"./controller-Cas3cNU_.js";import{v as _}from"./required-IJ-wNQGn.js";import{v as j}from"./rows-CaNxvJ4Y.js";import"./access-and-short-key-BlB0ZAri.js";import"./disabled-D0wfAqak.js";import"./hide-label-90DGA8H4.js";import"./label-Dkj9sxQK.js";import"./tooltip-align-P-7pyT1i.js";import"./align-C_bkzA-y.js";import"./events-DHTi_wtD.js";import"./associated.controller-ByKVIoVY.js";import"./bootstrap-bsjlQuLF.js";import"./component-names-B_kYyA8u.js";import"./i18n-B0tfVPMa.js";import"./isObject-DvSELytj.js";import"./reuse-CX4AQDkS.js";import"./i18n-CvQhdUrE.js";import"./InternalUnderlinedBadgeText-B9d8aD7h.js";import"./Alert-w-XRy_I0.js";import"./bem-De7JANRY.js";import"./browser-DaourpHc.js";import"./Heading-C1x8c7QT.js";import"./Icon-Dy7mcWMM.js";import"./icons-DpMX_jnF.js";import"./orientation-uIK98CL3.js";const g=t=>{var{baseClassName:s="kol-select",class:i,index:o,selectedValue:l,selected:r,value:n,label:d,disabled:c}=t,h=u(t,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===l?l=[]:Array.isArray(l)||(l=[l]);const p=r||l.includes(n);return e("option",Object.assign({class:a(`${s}__option`,{[`${s}__option--selected`]:p,[`${s}__option--disabled`]:c},i),selected:p,disabled:c,value:o},h),d)},O=({baseClassName:s,preKey:i,options:o,disabled:l,value:r,OptionProps:n={},OptionGroupProps:d={}})=>(null==o?void 0:o.length)?e(t,null,o.map((t,c)=>{const h=[i,`-${c}`].join("");if("options"in t){if(!o.length)return null;const{label:i}=t,c=u(t,["label"]);return e("optgroup",Object.assign({class:a(`${s}__optgroup`,{[`${s}__optgroup--disabled`]:l}),key:h},d,{label:null==i?void 0:i.toString(),disabled:l}),e(O,Object.assign({baseClassName:s,OptionGroupProps:d,OptionProps:n,value:r,preKey:h},c)))}return"value"in t?e(g,Object.assign({key:h,baseClassName:s},n,{index:h,selectedValue:r},t)):null})):null,k=t=>{const{class:s,msg:i,touched:n,disabled:d,required:c,options:h,value:p,OptionProps:v,OptionGroupProps:m,ariaDescribedBy:_,hideLabel:b,label:y}=t,f=u(t,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),g={"kol-select--disabled":Boolean(d),"kol-select--required":Boolean(c),"kol-select--touched":Boolean(n),[`kol-select--${o(i)}`]:r(i,n)},j=Object.assign(Object.assign({class:a("kol-select",g,s),required:c,disabled:d},l({ariaDescribedBy:_,hideLabel:b,label:y})),f);return e("select",Object.assign({},j),e(O,{baseClassName:"kol-select",options:h,value:p,OptionGroupProps:m,OptionProps:v}))};function w(e){const{ariaDescribedBy:t}=n(e),s={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:e._msg};return"_shortKey"in e&&(s["aria-keyshortcuts"]=e._shortKey),s}const A=t=>{var{state:s}=t,i=u(t,["state"]);return e(k,Object.assign({},w(s),i))};class B extends h{constructor(e,t,s){super(e,t,s),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find(t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options)),this.filterValuesInOptions=(e,t)=>e.filter(e=>void 0!==this.isValueInOptions(e,t)),this.afterPatchOptions=(e,t,s,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const s=t.get("_value");void 0===s||Array.isArray(s)||t.set("_value",[s]);const i=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),b(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value,s=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);!1===this.component._multiple&&0===s.length?t.set("_value",[i[0].value]):Array.isArray(e)&&s.length<e.length&&t.set("_value",s)}},this.component=e}validateOptions(e){y(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),m(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){_(this.component,e)}validateRows(e){j(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),p(this.component,"_value",()=>!0,void 0===e?[]:Array.isArray(e)?e:[e],void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),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)}assertValueMatchesMultiplicity(e){const t=Array.isArray(e);if(!0===this.component._multiple){if(void 0!==e&&!t)throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (received = ${JSON.stringify(e)})`)}else if(t)throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (received = ${JSON.stringify(e)})`)}assertComponentValueMatchesMultiplicity(e){const t=this.component._value;if(e){if(void 0!==t&&!Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (current = ${JSON.stringify(t)})`)}else if(Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (current = ${JSON.stringify(t)})`)}}const P=class{async getValue(){return this._multiple?this.state._value:Array.isArray(this.state._value)&&this.state._value.length>0?this.state._value[0]:this.state._value}async focus(){var e;return Promise.resolve(null===(e=this.selectRef)||void 0===e?void 0:e.focus())}getFormFieldProps(){return{state:this.state,class:a("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(d,Object.assign({key:"0dae16977914072f768715d0724d104681423011"},this.getFormFieldProps()),e(c,{key:"f861a46e09370d1d9b0988583f21f3e7cb0ac95c",state:this.state},e("form",{key:"4018d6786323c59fc03a1e1808f2c294f538fd03",onSubmit:e=>{e.preventDefault(),f({form:this.host})}},e("input",{key:"4cf5976ab6f9e5936df90835f38d90075b47e0c6",type:"submit",hidden:!0}),e(A,Object.assign({key:"8f9f45475b6ea1c0c1e852896c4bc025bc0e5a4e"},this.getSelectProps())))))}constructor(e){s(this,e),this.catchRef=e=>{this.selectRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${v()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new B(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}onInput(e){var t;const s=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter(e=>e.selected).map(e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value});if(this._multiple)this._value=s,this.controller.onFacade.onInput(e,!0,s);else{const t=s.length>0?s[0]:void 0;this._value=t,this.controller.onFacade.onInput(e,!0,t)}}onChange(e){this._multiple,this.controller.onFacade.onChange(e,this._value)}get host(){return i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};export{P as kol_select_wc};