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

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

/*!
 * KoliBri - The accessible HTML-Standard
 */
"use strict";var index=require("./index-C3uXtd6W.js"),clsx=require("./clsx-CkZlkaek.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-JRuyDpZT.js"),controllerIcon=require("./controller-icon-BVZaryXD.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),common=require("./common-1pTy2kta.js"),dev_utils=require("./dev.utils-C6VGVnPR.js"),controller$1=require("./controller-ElAO9BF5.js"),multiple=require("./multiple-BEeLswnf.js"),controller=require("./controller-DJARu4Su.js"),required=require("./required-CQRVrSKV.js"),rows=require("./rows-CHmhNWwq.js");require("./access-and-short-key-DwC1Fz3j.js"),require("./disabled-CaeFOFNv.js"),require("./hide-label-DJdjz8C9.js"),require("./label-6ELpV3zN.js"),require("./tooltip-align-Bmn7e65O.js"),require("./align-CZMTZlEl.js"),require("./events-Cd8febUV.js"),require("./associated.controller-bswFXTsy.js"),require("./bootstrap-tq3Puc5L.js"),require("./component-names-Bu9hV7OT.js"),require("./i18n-yHKQt1gl.js"),require("./isObject-DMA85Fq4.js"),require("./reuse-Cs36Ddzu.js"),require("./i18n-D4Klw_bZ.js"),require("./InternalUnderlinedBadgeText-B9ixH4sJ.js"),require("./Alert-CpYj4v7g.js"),require("./bem-DQRepkGo.js"),require("./browser-XJa5sCFp.js"),require("./Heading-CFrR8SYV.js"),require("./Icon-XibHb7vP.js"),require("./icons-DIWMA5U2.js"),require("./orientation-Dd8-hTEK.js");const NativeOptionFc=e=>{var{baseClassName:t="kol-select",class:i,index:s,selectedValue:a,selected:l,value:o,label:r,disabled:n}=e,c=tslib_es6.__rest(e,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===a?a=[]:Array.isArray(a)||(a=[a]);const d=l||a.includes(o);return index.h("option",Object.assign({class:clsx.clsx(`${t}__option`,{[`${t}__option--selected`]:d,[`${t}__option--disabled`]:n},i),selected:d,disabled:n,value:s},c),r)},NativeOptionListFc=({baseClassName:e,preKey:t,options:i,disabled:s,value:a,OptionProps:l={},OptionGroupProps:o={}})=>(null==i?void 0:i.length)?index.h(index.Fragment,null,i.map((r,n)=>{const c=[t,`-${n}`].join("");if("options"in r){if(!i.length)return null;const{label:t}=r,n=tslib_es6.__rest(r,["label"]);return index.h("optgroup",Object.assign({class:clsx.clsx(`${e}__optgroup`,{[`${e}__optgroup--disabled`]:s}),key:c},o,{label:null==t?void 0:t.toString(),disabled:s}),index.h(NativeOptionListFc,Object.assign({baseClassName:e,OptionGroupProps:o,OptionProps:l,value:a,preKey:c},n)))}return"value"in r?index.h(NativeOptionFc,Object.assign({key:c,baseClassName:e},l,{index:c,selectedValue:a},r)):null})):null,NativeSelectFc=e=>{const{class:t,msg:i,touched:s,disabled:a,required:l,options:o,value:r,OptionProps:n,OptionGroupProps:c,ariaDescribedBy:d,hideLabel:u,label:h}=e,p=tslib_es6.__rest(e,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),v={"kol-select--disabled":Boolean(a),"kol-select--required":Boolean(l),"kol-select--touched":Boolean(s),[`kol-select--${FormFieldStateWrapper.getMsgType(i)}`]:FormFieldStateWrapper.isMsgDefinedAndInputTouched(i,s)},_=Object.assign(Object.assign({class:clsx.clsx("kol-select",v,t),required:l,disabled:a},FormFieldStateWrapper.getDefaultProps({ariaDescribedBy:d,hideLabel:u,label:h})),p);return index.h("select",Object.assign({},_),index.h(NativeOptionListFc,{baseClassName:"kol-select",options:o,value:r,OptionGroupProps:c,OptionProps:n}))};function getSelectProps(e){const{ariaDescribedBy:t}=FormFieldStateWrapper.getRenderStates(e),i={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&&(i["aria-keyshortcuts"]=e._shortKey),i}const SelectStateWrapper=e=>{var{state:t}=e,i=tslib_es6.__rest(e,["state"]);return index.h(NativeSelectFc,Object.assign({},getSelectProps(t),i))};class SelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),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,i,s)=>{"_value"===s&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.get("_value");void 0===i||Array.isArray(i)||t.set("_value",[i]);const s=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(s)&&s.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,s);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],s);!1===this.component._multiple&&0===i.length?t.set("_value",[s[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){controller.validateOptionsWithOptgroup(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),multiple.validateMultiple(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){required.validateRequired(this.component,e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),common.watchJsonArrayString(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 KolSelectWc=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:clsx.clsx("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 index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"0dae16977914072f768715d0724d104681423011"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"f861a46e09370d1d9b0988583f21f3e7cb0ac95c",state:this.state},index.h("form",{key:"4018d6786323c59fc03a1e1808f2c294f538fd03",onSubmit:e=>{e.preventDefault(),controller$1.propagateSubmitEventToForm({form:this.host})}},index.h("input",{key:"4cf5976ab6f9e5936df90835f38d90075b47e0c6",type:"submit",hidden:!0}),index.h(SelectStateWrapper,Object.assign({key:"8f9f45475b6ea1c0c1e852896c4bc025bc0e5a4e"},this.getSelectProps())))))}constructor(e){index.registerInstance(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-${dev_utils.nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new SelectController(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 i=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=i,this.controller.onFacade.onInput(e,!0,i);else{const t=i.length>0?i[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 index.getElement(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"]}}};exports.kol_select_wc=KolSelectWc;