@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-BQlHOxik.js";import{a,_ as l}from"./tslib.es6-QNbPBOk5.js";import{c as o}from"./clsx-COFh-Vc8.js";import{g as r,i as n,c as h,a as d,F as c}from"./FormFieldStateWrapper-BWTMRKXT.js";import{I as p,a as u}from"./controller-icon-DekcIBGR.js";import{H as v}from"./common-Cx_AGO_M.js";import{c as m}from"./dev.utils-02Sl9bQo.js";import{b as f,e as b,c as y}from"./element-interaction-Bv-mPSBn.js";import{p as j}from"./controller-DRE7PRMK.js";import{v as _}from"./multiple-DqCQ-txe.js";import{f as g,v as O}from"./controller-DKPaX3Tu.js";import{v as k}from"./required-DFzRSWky.js";import{v as B}from"./rows-htbnIG9G.js";import"./access-and-short-key-D734WtlX.js";import"./disabled-gyBUQRnY.js";import"./hide-label-6Bx1MH20.js";import"./label-Fyi30H9j.js";import"./tooltip-align-mwhvx9nK.js";import"./align-DxZmRFcp.js";import"./variant-class-name-BCcQYpIV.js";import"./events-VVvk1win.js";import"./associated.controller-Bagx9pCw.js";import"./bootstrap-DPKvOz00.js";import"./component-names-Dy77vq43.js";import"./i18n-B2d_exHc.js";import"./_Uint8Array-kJHDjtoP.js";import"./isArray-CcrBs4JM.js";import"./variant-quote-y0Z1TRdz.js";import"./normalizers-m3s9sgmq.js";import"./component-Dh0cPCxF.js";import"./component-DvjvBJeK.js";import"./bem-registry-CWvl2xho.js";import"./component-DzaT2WlJ.js";import"./controller-Bdve6A-Q.js";import"./align-floating-elements-D5XJiLiU.js";import"./tooltip-open-tracking-D3tCiiGP.js";import"./label-KTv-zMW0.js";import"./base-controller-CXhqh4cR.js";import"./i18n-Br16IAnY.js";import"./Alert-BP_7bRZF.js";import"./Heading-q2Ue3Ixd.js";import"./icons-oAzMYWgV.js";import"./element-focus-CRwW4N4R.js";import"./orientation-CjNmUJp-.js";const P=t=>{var{baseClassName:s="kol-select",class:i,index:l,selectedValue:r,selected:n,value:h,label:d,disabled:c}=t,p=a(t,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);if(r===undefined){r=[]}else if(!Array.isArray(r)){r=[r]}const u=n||r.includes(h);return e("option",Object.assign({class:o(`${s}__option`,{[`${s}__option--selected`]:u,[`${s}__option--disabled`]:c},i),selected:u,disabled:c,value:l},p),d)};const w=({baseClassName:s,preKey:i,options:l,disabled:r,value:n,OptionProps:h={},OptionGroupProps:d={}})=>{if(!(l===null||l===void 0?void 0:l.length)){return null}return e(t,null,l.map(((t,c)=>{const p=[i,`-${c}`].join("");if("options"in t){if(!l.length){return null}const{label:i}=t,c=a(t,["label"]);return e("optgroup",Object.assign({class:o(`${s}__optgroup`,{[`${s}__optgroup--disabled`]:r}),key:p},d,{label:i===null||i===void 0?void 0:i.toString(),disabled:r}),e(w,Object.assign({baseClassName:s,OptionGroupProps:d,OptionProps:h,value:n,preKey:p},c)))}if("value"in t){return e(P,Object.assign({key:p,baseClassName:s},h,{index:p,selectedValue:n},t))}return null})))};const x=t=>{const{class:s,msg:i,touched:l,disabled:d,required:c,options:p,value:u,OptionProps:v,OptionGroupProps:m,ariaDescribedBy:f,hideLabel:b,label:y}=t,j=a(t,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]);const _={["kol-select--disabled"]:Boolean(d),["kol-select--required"]:Boolean(c),["kol-select--touched"]:Boolean(l),[`kol-select--${r(i)}`]:n(i,l)};const g=Object.assign(Object.assign({class:o("kol-select",_,s),required:c,disabled:d},h({ariaDescribedBy:f,hideLabel:b,label:y})),j);return e("select",Object.assign({},g),e(w,{baseClassName:"kol-select",options:p,value:u,OptionGroupProps:m,OptionProps:v}))};function A(e){const{ariaDescribedBy:t}=d(e);const 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};if("_shortKey"in e)s["aria-keyshortcuts"]=e._shortKey;return s}const C=t=>{var{state:s}=t,i=a(t,["state"]);return e(x,Object.assign({},A(s),i))};class D extends p{constructor(e,t,s){super(e,t,s);this.keyOptionMap=new Map;this.getOptionByKey=e=>this.keyOptionMap.get(e);this.isValueInOptions=(e,t)=>t.find((t=>typeof t.value==="string"?t.value===e:Array.isArray(t.options)?this.isValueInOptions(e,t.options):false))!==undefined;this.filterValuesInOptions=(e,t)=>e.filter((e=>this.isValueInOptions(e,t)!==undefined));this.afterPatchOptions=(e,t,s,i)=>{if(i==="_value"){this.setFormAssociatedValue(e)}};this.beforePatchOptions=(e,t)=>{const s=t.get("_value");if(s!==undefined&&!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();g(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value;const s=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);if(this.component._multiple===false&&s.length===0){t.set("_value",[i[0].value])}else if(Array.isArray(e)&&s.length<e.length){t.set("_value",s)}}};this.component=e}validateOptions(e){O(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(e===true);_(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){k(this.component,e)}validateRows(e){B(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e);v(this.component,"_value",(()=>true),e===undefined?[]:Array.isArray(e)?e:[e],undefined,{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);const s=this.component._multiple===true;if(s){if(e!==undefined&&!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(t!==undefined&&!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 M=class{async getValue(){if(this._multiple){return this.state._value}else{return Array.isArray(this.state._value)&&this.state._value.length>0?this.state._value[0]:this.state._value}}async focus(){}async click(){}getFormFieldProps(){return{state:this.state,class:o("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return(e=this.ctaRef.el)===null||e===void 0?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.ctaRef,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=true},onBlur:e=>{this.controller.onFacade.onBlur(e);this.inputHasFocus=false}})}render(){return e(c,Object.assign({key:"607b429939938960542769969e7089416567451b"},this.getFormFieldProps()),e(u,{key:"6c008bd220a118d84b1861ce0434b1163102334c",state:this.state},e("form",{key:"e5944ee645aafd0f7cbd40a0044b909af8908ec4",onSubmit:e=>{e.preventDefault();j({form:this.host})}},e("input",{key:"3137875efec2e47a44a414307e4a2d96a8225459",type:"submit",hidden:true}),e(C,Object.assign({key:"132a41cde87cf09a6e0f6f0260ef6c3088a3170a"},this.getSelectProps())))))}constructor(e){s(this,e);this.ctaRef=y();this._disabled=false;this._hideMsg=false;this._hideLabel=false;this._hint="";this._multiple=false;this._required=false;this._tooltipAlign="top";this._touched=false;this.state={_hasValue:false,_hideMsg:false,_id:m("select"),_label:"",_multiple:false,_options:[],_value:[]};this.inputHasFocus=false;this.controller=new D(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)}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)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._touched=this._touched===true;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(((t=this.ctaRef.el)===null||t===void 0?void 0:t.options)||[]).filter((e=>e.selected)).map((e=>{var t;return(t=this.controller.getOptionByKey(e.value))===null||t===void 0?void 0:t.value}));if(this._multiple){this._value=s;this.controller.onFacade.onInput(e,true,s)}else{const t=s.length>0?s[0]:undefined;this._value=t;this.controller.onFacade.onInput(e,true,t)}}onChange(e){if(this._multiple){this.controller.onFacade.onChange(e,this._value)}else{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"],_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"],_variant:["validateVariant"]}}};l([f("ctaRef")],M.prototype,"focus",null);l([b("ctaRef")],M.prototype,"click",null);export{M as kol_select_wc};
//# sourceMappingURL=kol-select-wc.entry.js.map