@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-C4Loo2IH.js"),clsx=require("./clsx-CkZlkaek.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-Ci-xqnPO.js"),controllerIcon=require("./controller-icon-CAY0twi1.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),common=require("./common-Cd2qH809.js"),dev_utils=require("./dev.utils-L6CxXgBo.js"),controller$1=require("./controller-Q-LXBPh4.js"),multiple=require("./multiple-DRhU5nKU.js"),controller=require("./controller-01_8sWT5.js"),required=require("./required-CXU7vdyH.js"),rows=require("./rows-BUvz5j5U.js");require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./component-names-CuI-0Pbo.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./reuse-Cs36Ddzu.js"),require("./i18n-DNWGj4j8.js"),require("./InternalUnderlinedBadgeText-LsIWMiab.js"),require("./Alert-yK5O3Czw.js"),require("./bem-Bu0VYjZa.js"),require("./browser-D7A31aEp.js"),require("./Heading-CqQULYGY.js"),require("./Icon-B7eZlK-8.js"),require("./icons-D_PtPRwb.js"),require("./orientation-BGODo_Ua.js");const NativeOptionFc=e=>{var{baseClassName:t="kol-select",class:i,index:a,selectedValue:s,selected:l,value:o,label:r,disabled:n}=e,d=tslib_es6.__rest(e,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===s?s=[]:Array.isArray(s)||(s=[s]);const c=l||s.includes(o);return index.h("option",Object.assign({class:clsx.clsx(`${t}__option`,{[`${t}__option--selected`]:c,[`${t}__option--disabled`]:n},i),selected:c,disabled:n,value:a},d),r)},NativeOptionListFc=({baseClassName:e,preKey:t,options:i,disabled:a,value:s,OptionProps:l={},OptionGroupProps:o={}})=>(null==i?void 0:i.length)?index.h(index.Fragment,null,i.map((r,n)=>{const d=[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`]:a}),key:d},o,{label:null==t?void 0:t.toString(),disabled:a}),index.h(NativeOptionListFc,Object.assign({baseClassName:e,OptionGroupProps:o,OptionProps:l,value:s,preKey:d},n)))}return"value"in r?index.h(NativeOptionFc,Object.assign({key:d,baseClassName:e},l,{index:d,selectedValue:s},r)):null})):null,NativeSelectFc=e=>{const{class:t,msg:i,touched:a,disabled:s,required:l,options:o,value:r,OptionProps:n,OptionGroupProps:d,ariaDescribedBy:c,hideLabel:h,label:u}=e,p=tslib_es6.__rest(e,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),v=FormFieldStateWrapper.checkHasMsg(i,a),_="string"==typeof i?"error":null==i?void 0:i._type,b={"kol-select--disabled":Boolean(s),"kol-select--required":Boolean(l),"kol-select--touched":Boolean(a),[`kol-select--${_||"error"}`]:v},m=Object.assign(Object.assign({class:clsx.clsx("kol-select",b,t),required:l,disabled:s},FormFieldStateWrapper.getDefaultProps({ariaDescribedBy:c,hideLabel:h,label:u})),p);return index.h("select",Object.assign({},m),index.h(NativeOptionListFc,{baseClassName:"kol-select",options:o,value:r,OptionGroupProps:d,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,a)=>{"_value"===a&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.get("_value");void 0===i||Array.isArray(i)||t.set("_value",[i]);const a=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(a)&&a.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,a);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],a);!1===this.component._multiple&&0===i.length?t.set("_value",[a[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 kolFocus(){var e;null===(e=this.selectRef)||void 0===e||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:"149de6c2a2a155d9869e4d09118d7b511058b606"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"84abd564f808296ad32ea68165780862e7808fd0",state:this.state},index.h("form",{key:"3d143d2d857793ef6e744def1eada9346983f4d5",onSubmit:e=>{e.preventDefault(),controller$1.propagateSubmitEventToForm({form:this.host})}},index.h("input",{key:"4f654dceadd96f6074e22a56aefec34944ab2faa",type:"submit",hidden:!0}),index.h(SelectStateWrapper,Object.assign({key:"e576920b9756ed1f8fce70c13c070749d463e839"},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;