@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-Biu4X4Y_.js";import{c as a}from"./clsx-eK3rPvPS.js";import{d as l,c as o,g as r,F as d}from"./FormFieldStateWrapper-BJBSoSm4.js";import{I as n,a as h}from"./controller-icon-BO9NOQnm.js";import{_ as c}from"./tslib.es6-CxX45GIN.js";import{H as u}from"./common-Dd0zJQbD.js";import{n as p}from"./dev.utils-Dg5aYzVg.js";import{p as v}from"./controller-CM5wW8Ij.js";import{v as f}from"./multiple-Cj3JQafH.js";import{f as m,v as b}from"./controller-B6f-1ZRp.js";import{v as y}from"./required-CnTTpFCN.js";import{v as _}from"./rows-DtS-0sp9.js";import"./access-and-short-key-B37XLwy2.js";import"./disabled-BhpAFgSp.js";import"./hide-label-B9FhGrWP.js";import"./label-Dnmzb2S_.js";import"./tooltip-align-Cnin7S26.js";import"./align-D-ifSKu8.js";import"./events-9-skLO0f.js";import"./associated.controller-B9GDDaFL.js";import"./bootstrap-DcyDkVEo.js";import"./component-names-C3fyby67.js";import"./i18n-CfLoIZ8T.js";import"./isObject-DvSELytj.js";import"./reuse-CX4AQDkS.js";import"./i18n-LBpyQ66X.js";import"./InternalUnderlinedBadgeText-CZdqjm5O.js";import"./Alert-CTUp0cq0.js";import"./bem-C27SfH6w.js";import"./browser-DiRe0qUf.js";import"./Heading-CNBuBGfU.js";import"./Icon-BIONJyds.js";import"./icons-DNTuScEN.js";import"./orientation-eCMt8CD1.js";const j=t=>{var{baseClassName:i="kol-select",class:s,index:o,selectedValue:l,selected:r,value:n,label:d,disabled:h}=t,p=c(t,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===l?l=[]:Array.isArray(l)||(l=[l]);const u=r||l.includes(n);return e("option",Object.assign({class:a(`${i}__option`,{[`${i}__option--selected`]:u,[`${i}__option--disabled`]:h},s),selected:u,disabled:h,value:o},p),d)},g=({baseClassName:i,preKey:s,options:o,disabled:l,value:r,OptionProps:n={},OptionGroupProps:d={}})=>(null==o?void 0:o.length)?e(t,null,o.map((t,h)=>{const p=[s,`-${h}`].join("");if("options"in t){if(!o.length)return null;const{label:s}=t,h=c(t,["label"]);return e("optgroup",Object.assign({class:a(`${i}__optgroup`,{[`${i}__optgroup--disabled`]:l}),key:p},d,{label:null==s?void 0:s.toString(),disabled:l}),e(g,Object.assign({baseClassName:i,OptionGroupProps:d,OptionProps:n,value:r,preKey:p},h)))}return"value"in t?e(j,Object.assign({key:p,baseClassName:i},n,{index:p,selectedValue:r},t)):null})):null,O=t=>{const{class:i,msg:s,touched:r,disabled:n,required:d,options:h,value:p,OptionProps:u,OptionGroupProps:v,ariaDescribedBy:m,hideLabel:_,label:b}=t,f=c(t,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),y=o(s,r),O="string"==typeof s?"error":null==s?void 0:s._type,j={"kol-select--disabled":Boolean(n),"kol-select--required":Boolean(d),"kol-select--touched":Boolean(r),[`kol-select--${O||"error"}`]:y},A=Object.assign(Object.assign({class:a("kol-select",j,i),required:d,disabled:n},l({ariaDescribedBy:m,hideLabel:_,label:b})),f);return e("select",Object.assign({},A),e(g,{baseClassName:"kol-select",options:h,value:p,OptionGroupProps:v,OptionProps:u}))};function B(e){const{ariaDescribedBy:t}=r(e),a={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&&(a["aria-keyshortcuts"]=e._shortKey),a}const k=t=>{var{state:a}=t,i=c(t,["state"]);return e(O,Object.assign({},B(a),i))};class w extends n{constructor(e,t,a){super(e,t,a),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,a,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const a=t.get("_value");void 0===a||Array.isArray(a)||t.set("_value",[a]);const i=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),m(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);!1===this.component._multiple&&0===a.length?t.set("_value",[i[0].value]):Array.isArray(e)&&a.length<e.length&&t.set("_value",a)}},this.component=e}validateOptions(e){b(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),f(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){y(this.component,e)}validateRows(e){_(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),u(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 S=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 kolFocus(){var e;null===(e=this.selectRef)||void 0===e||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:"149de6c2a2a155d9869e4d09118d7b511058b606"},this.getFormFieldProps()),e(h,{key:"84abd564f808296ad32ea68165780862e7808fd0",state:this.state},e("form",{key:"3d143d2d857793ef6e744def1eada9346983f4d5",onSubmit:e=>{e.preventDefault(),v({form:this.host})}},e("input",{key:"4f654dceadd96f6074e22a56aefec34944ab2faa",type:"submit",hidden:!0}),e(k,Object.assign({key:"e576920b9756ed1f8fce70c13c070749d463e839"},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-${p()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new w(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 a=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=a,this.controller.onFacade.onInput(e,!0,a);else{const t=a.length>0?a[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{S as kol_select_wc};