@public-ui/components 3.1.0-rc.0 → 3.1.0

package/dist/cjs/kol-quote.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),common=require("./common-Cd2qH809.js"),reuse=require("./reuse-Cs36Ddzu.js"),label=require("./label-Nicf9N_T.js"),clsx=require("./clsx-CkZlkaek.js"),componentNames=require("./component-names-CuI-0Pbo.js");const validateQuote=(e,n)=>{common.watchString(e,"_quote",n,{required:!0})},quoteVariantOptions=["block","inline"],isQuoteVariantPropType=e=>"string"==typeof e&&quoteVariantOptions.includes(e),validateVariantQuote=(e,n)=>{common.watchValidator(e,"_variant",isQuoteVariantPropType,new Set(quoteVariantOptions),n)},defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuote=class{constructor(e){index.registerInstance(this,e),this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){label.validateLabel(this,e)}validateHref(e){common.watchString(this,"_href",e,{required:!0})}validateQuote(e){validateQuote(this,e)}validateVariant(e){validateVariantQuote(this,e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=reuse.showExpertSlot(this.state._quote);return index.h("figure",{key:"89eb937438883d4e402ad9d4285e03716e94eae3",class:clsx.clsx("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?index.h("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))):index.h("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&index.h("figcaption",{key:"5aacc4b9762041d369fa2431a7627f3ab2570be2",class:"kol-quote__figcaption"},index.h("cite",{key:"db499caec22dad59a4bae43358e67db193f03901",class:"kol-quote__cite"},index.h(componentNames.KolLinkTag,{key:"d399ff2f85058372a152b9020835d491fa0c4e59",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;
+"use strict";var index=require("./index-CUwAAV9q.js"),common=require("./common-Cd2qH809.js"),reuse=require("./reuse-Cs36Ddzu.js"),label=require("./label-Nicf9N_T.js"),clsx=require("./clsx-CkZlkaek.js"),componentNames=require("./component-names-CuI-0Pbo.js");const validateQuote=(e,t)=>{common.watchString(e,"_quote",t,{required:!0})},quoteVariantOptions=["block","inline"],isQuoteVariantPropType=e=>"string"==typeof e&&quoteVariantOptions.includes(e),validateVariantQuote=(e,t)=>{common.watchValidator(e,"_variant",isQuoteVariantPropType,new Set(quoteVariantOptions),t)},defaultStyleCss=()=>'@charset "UTF-8";   @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;  @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   .kol-quote {     display: inline;     margin: 0;     padding: 0;   }   .kol-quote--block .kol-quote__cite::before {     padding-right: 0.5em;   }   .kol-quote--inline .kol-quote__cite::before {     padding: 0.5em;   }   .kol-quote__cite::before {     content: "—";   }   .kol-quote--block .kol-quote__figcaption {     display: inline;     margin: 0;     padding: 0;   }   .kol-quote__blockquote::before {     content: open-quote;   }   .kol-quote__blockquote::after {     content: close-quote;   } }',KolQuote=class{constructor(e){index.registerInstance(this,e),this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){label.validateLabel(this,e)}validateHref(e){common.watchString(this,"_href",e,{required:!0})}validateQuote(e){validateQuote(this,e)}validateVariant(e){validateVariantQuote(this,e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=reuse.showExpertSlot(this.state._quote);return index.h("figure",{key:"89eb937438883d4e402ad9d4285e03716e94eae3",class:clsx.clsx("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?index.h("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))):index.h("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&index.h("figcaption",{key:"5aacc4b9762041d369fa2431a7627f3ab2570be2",class:"kol-quote__figcaption"},index.h("cite",{key:"db499caec22dad59a4bae43358e67db193f03901",class:"kol-quote__cite"},index.h(componentNames.KolLinkTag,{key:"d399ff2f85058372a152b9020835d491fa0c4e59",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:[{validateLabel:0}],_href:[{validateHref:0}],_quote:[{validateQuote:0}],_variant:[{validateVariant:0}]}}};KolQuote.style={default:defaultStyleCss()},exports.kol_quote=KolQuote;

package/dist/cjs/kol-select-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),clsx=require("./clsx-CkZlkaek.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-B2LPpMpo.js"),controllerIcon=require("./controller-icon-9udvsM5R.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),common=require("./common-Cd2qH809.js"),dev_utils=require("./dev.utils-fZEgoGGu.js"),controller$1=require("./controller-Q-LXBPh4.js"),multiple=require("./multiple-DRhU5nKU.js"),controller=require("./controller-LxYfXuho.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-uCh_T5VD.js"),require("./Alert-Bj1BTIEj.js"),require("./bem-Bu0VYjZa.js"),require("./browser-D7A31aEp.js"),require("./Heading-BZTrj6_i.js"),require("./Icon-B9T-4CsE.js"),require("./icons-D_PtPRwb.js"),require("./orientation-BGODo_Ua.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=FormFieldStateWrapper.checkHasMsg(i,s),_="string"==typeof i?"error":null==i?void 0:i._type,b={"kol-select--disabled":Boolean(a),"kol-select--required":Boolean(l),"kol-select--touched":Boolean(s),[`kol-select--${_||"error"}`]:v},m=Object.assign(Object.assign({class:clsx.clsx("kol-select",b,t),required:l,disabled:a},FormFieldStateWrapper.getDefaultProps({ariaDescribedBy:d,hideLabel:u,label:h})),p);return index.h("select",Object.assign({},m),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())}async kolFocus(){return this.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:"809e5c7953715be68d2b22a5ff1c5a031951c733"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"cf898096d4ff2695e4d6065828c9349b383a645b",state:this.state},index.h("form",{key:"a9c6f5786c3a62c2d4285c8087f1cc1131f178fe",onSubmit:e=>{e.preventDefault(),controller$1.propagateSubmitEventToForm({form:this.host})}},index.h("input",{key:"76d68fa0755e7770a5fea3dbfdcf22a244cd808d",type:"submit",hidden:!0}),index.h(SelectStateWrapper,Object.assign({key:"c81b30d32fbcecd2202511bd0e9834d9b7c5190d"},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;
+"use strict";var index=require("./index-CUwAAV9q.js"),clsx=require("./clsx-CkZlkaek.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-BFcysaVO.js"),controllerIcon=require("./controller-icon-oRdlfcl8.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),common=require("./common-Cd2qH809.js"),dev_utils=require("./dev.utils-7DjklDXI.js"),controller$1=require("./controller-Q-LXBPh4.js"),multiple=require("./multiple-DRhU5nKU.js"),controller=require("./controller-DT6QqMUx.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-BmcMXSlV.js"),require("./Alert-iB2nNldZ.js"),require("./bem-CWXmxX43.js"),require("./browser-D7A31aEp.js"),require("./Heading-CXo3APiB.js"),require("./Icon-CA2N7E-m.js"),require("./icons-D_PtPRwb.js"),require("./orientation-BGODo_Ua.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: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,s),_="string"==typeof i?"error":null==i?void 0:i._type,b={"kol-select--disabled":Boolean(a),"kol-select--required":Boolean(l),"kol-select--touched":Boolean(s),[`kol-select--${_||"error"}`]:v},m=Object.assign(Object.assign({class:clsx.clsx("kol-select",b,t),required:l,disabled:a},FormFieldStateWrapper.getDefaultProps({ariaDescribedBy:d,hideLabel:h,label:u})),p);return index.h("select",Object.assign({},m),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())}async kolFocus(){return this.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:"809e5c7953715be68d2b22a5ff1c5a031951c733"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"cf898096d4ff2695e4d6065828c9349b383a645b",state:this.state},index.h("form",{key:"a9c6f5786c3a62c2d4285c8087f1cc1131f178fe",onSubmit:e=>{e.preventDefault(),controller$1.propagateSubmitEventToForm({form:this.host})}},index.h("input",{key:"76d68fa0755e7770a5fea3dbfdcf22a244cd808d",type:"submit",hidden:!0}),index.h(SelectStateWrapper,Object.assign({key:"c81b30d32fbcecd2202511bd0e9834d9b7c5190d"},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:0}],_disabled:[{validateDisabled:0}],_hideMsg:[{validateHideMsg:0}],_hideLabel:[{validateHideLabel:0}],_hint:[{validateHint:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_label:[{validateLabel:0}],_msg:[{validateMsg:0}],_multiple:[{validateMultiple:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_options:[{validateOptions:0}],_required:[{validateRequired:0}],_rows:[{validateRows:0}],_shortKey:[{validateShortKey:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_tabIndex:[{validateTabIndex:0}],_touched:[{validateTouched:0}],_value:[{validateValue:0}]}}};exports.kol_select_wc=KolSelectWc;

package/dist/cjs/kol-select.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),componentNames=require("./component-names-CuI-0Pbo.js");require("./common-Cd2qH809.js");const defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n}',KolSelect=class{constructor(n){index.registerInstance(this,n),this.catchRef=n=>{this.selectWcRef=n},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1}async getValue(){var n;return null===(n=this.selectWcRef)||void 0===n?void 0:n.getValue()}async focus(){var n;return Promise.resolve(null===(n=this.selectWcRef)||void 0===n?void 0:n.focus())}async kolFocus(){return this.focus()}render(){return index.h(index.Host,{key:"79b2cc9bb971a19d28ad336fb0c2eabea48ee4b4",class:"kol-select"},index.h(componentNames.KolSelectWcTag,{key:"52bf10514527602adf6be51070c617be0f2079d3",ref:this.catchRef,_accessKey:this._accessKey,_disabled:this._disabled,_hideLabel:this._hideLabel,_hint:this._hint,_icons:this._icons,_id:this._id,_label:this._label,_msg:this._msg,_multiple:this._multiple,_name:this._name,_on:this._on,_options:this._options,_required:this._required,_rows:this._rows,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_touched:this._touched,_value:this._value},index.h("slot",{key:"1143357c41df4471403e29fd8d263ce765191455",name:"expert",slot:"expert"})))}};KolSelect.style={default:defaultStyleCss},exports.kol_select=KolSelect;
+"use strict";var index=require("./index-CUwAAV9q.js"),componentNames=require("./component-names-CuI-0Pbo.js");require("./common-Cd2qH809.js");const defaultStyleCss=()=>'@charset "UTF-8";  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-form-field {     display: grid;   }   .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {     cursor: pointer;   }   .kol-form-field--disabled .kol-form-field__label {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__label-text::after {     content: "*"/"";   }   .kol-form-field--disabled .kol-form-field__hint {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__tooltip .span-label::after {     content: "*"/"";   }   .kol-input-container {     background-color: transparent;     display: grid;     width: 100%;     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);     align-items: center;     grid-template-columns: 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--start) {     grid-template-columns: auto 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--end) {     grid-template-columns: 1fr auto;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr auto;   }   .kol-input-container__container {     position: relative;   }   .kol-input-container__adornment {     display: flex;     align-items: center;   }   .kol-input-container__adornment .kol-icon {     display: grid;     height: var(--a11y-min-size);     place-items: center;   }   .kol-select {     background-color: transparent;     width: 100%;   }   .kol-select:not(:disabled) {     cursor: pointer;   }   .kol-select:not([multiple], [size]) {     height: 2.75em;   }   .kol-select:focus {     outline: none;   }   .kol-select__option:checked::before {     content: "✓ ";   }   .kol-select {        }   .kol-select[multiple] option {     padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;   } }',KolSelect=class{constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.selectWcRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1}async getValue(){var e;return null===(e=this.selectWcRef)||void 0===e?void 0:e.getValue()}async focus(){var e;return Promise.resolve(null===(e=this.selectWcRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}render(){return index.h(index.Host,{key:"79b2cc9bb971a19d28ad336fb0c2eabea48ee4b4",class:"kol-select"},index.h(componentNames.KolSelectWcTag,{key:"52bf10514527602adf6be51070c617be0f2079d3",ref:this.catchRef,_accessKey:this._accessKey,_disabled:this._disabled,_hideLabel:this._hideLabel,_hint:this._hint,_icons:this._icons,_id:this._id,_label:this._label,_msg:this._msg,_multiple:this._multiple,_name:this._name,_on:this._on,_options:this._options,_required:this._required,_rows:this._rows,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_touched:this._touched,_value:this._value},index.h("slot",{key:"1143357c41df4471403e29fd8d263ce765191455",name:"expert",slot:"expert"})))}};KolSelect.style={default:defaultStyleCss()},exports.kol_select=KolSelect;

package/dist/cjs/kol-single-select.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),clsx=require("./clsx-CkZlkaek.js"),componentNames=require("./component-names-CuI-0Pbo.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-B2LPpMpo.js"),controllerIcon=require("./controller-icon-9udvsM5R.js"),InputStateWrapper=require("./InputStateWrapper-uvFi_BbH.js"),CustomSuggestionsOptionsGroup=require("./CustomSuggestionsOptionsGroup-cTHRZeAc.js"),i18n=require("./i18n-DNWGj4j8.js"),dev_utils=require("./dev.utils-fZEgoGGu.js"),common=require("./common-Cd2qH809.js"),controller=require("./controller-LxYfXuho.js"),placeholder=require("./placeholder-BncK-3gZ.js"),required=require("./required-CXU7vdyH.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("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./tslib.es6-7DbU_BSw.js"),require("./reuse-Cs36Ddzu.js"),require("./InternalUnderlinedBadgeText-uCh_T5VD.js"),require("./Alert-Bj1BTIEj.js"),require("./bem-Bu0VYjZa.js"),require("./browser-D7A31aEp.js"),require("./Heading-BZTrj6_i.js"),require("./Icon-B9T-4CsE.js"),require("./icons-D_PtPRwb.js"),require("./Input-BCYP3Fc4.js"),require("./orientation-BGODo_Ua.js");class SingleSelectController extends controllerIcon.InputIconController{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,n))},this.component=e}validateOptions(e){controller.validateOptions(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){required.validateRequired(this.component,e)}validateValue(e){common.watchValidator(this.component,"_value",e=>void 0!==e,new Set(["KoliBriUnknown"]),e)}validatePlaceholder(e){placeholder.validatePlaceholder(this.component,e)}validateHideClearButton(e){common.watchBoolean(this.component,"_hideClearButton",e)}validateRows(e){common.watchNumber(this.component,"_rows",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHideClearButton(this.component._hideClearButton),this.validateRows(this.component._rows)}}const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n    cursor: not-allowed;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-single-select__delete .kol-button {\n    cursor: pointer;\n  }\n  .kol-single-select__delete--disabled .kol-button {\n    cursor: not-allowed;\n  }\n  .kol-single-select__no-results-message {\n    display: flex;\n    min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-single-select .kol-custom-suggestions-options-group {\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n  }\n  .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-toggle--disabled {\n    opacity: 0.5;\n  }\n}',KolSingleSelect=class{async getValue(){return this._value}async focus(){var e;return Promise.resolve(null===(e=this.refInput)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}onBlur(){var e,t,n;const i=null===(e=this.state._options)||void 0===e?void 0:e.find(e=>{var t,n;return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase())===(null===(n=this._inputValue)||void 0===n?void 0:n.toLowerCase())});i?this.selectOption(i):(this._inputValue=null===(n=null===(t=this.state._options)||void 0===t?void 0:t.find(e=>e.value===this._value))||void 0===n?void 0:n.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}createEventWithTarget(e,t){const n=new CustomEvent(e,{bubbles:!0,detail:t});return this.refInput&&(Object.defineProperty(n,"target",{value:this.refInput}),Object.defineProperty(n,"currentTarget",{value:this.refInput})),n}clearSelection(){if(!(!0===this.state._disabled)){const e=null;this._focusedOptionIndex=-1,this._value=e,this._inputValue="",this._filteredOptions=[...this.state._options];const t=this.createEventWithTarget("input",{name:this.state._name,value:e}),n=this.createEventWithTarget("change",{name:this.state._name,value:e});this.controller.onFacade.onInput(t,!0,{value:e}),this.controller.onFacade.onChange(n,{value:e})}}selectOption(e){var t,n;if(e.value===this._value)return this._inputValue=e.label,void(this._filteredOptions=[...this.state._options]);this._value=e.value,this._inputValue=e.label;const i=this.createEventWithTarget("input",{name:null!==(t=this.state._name)&&void 0!==t?t:"",value:e.value}),o=this.createEventWithTarget("change",{name:null!==(n=this.state._name)&&void 0!==n?n:"",value:e.value});this.controller.onFacade.onInput(i,!1,e.value),this.controller.onFacade.onChange(o,e.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(e){const t=e.target;this._inputValue=t.value,this._isOpen=!0,this.setFilteredOptionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(e.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredOptionsByQuery(e){""===(null==e?void 0:e.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&e.length>0&&(this._filteredOptions=this.state._options.filter(t=>{var n,i;return null===(i=null===(n=t.label)||void 0===n?void 0:n.toLowerCase())||void 0===i?void 0:i.includes(null==e?void 0:e.toLowerCase())}))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e,n=0,i=!1;const o=this._filteredOptions.length;for(;n<o;){t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1);if(!this._filteredOptions[t].disabled){i=!0;break}t+=e,n++}i&&(this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex))}focusOption(e){if(this.refOptions){const t=this.refOptions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex(e=>e.label.toLowerCase().startsWith(t)&&!e.disabled);"number"==typeof n&&n>=0&&(this._focusedOptionIndex=n,this.focusOption(n))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=FormFieldStateWrapper.getRenderStates(this.state),t=!0===this.state._disabled;return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-keyshortcuts":this.state._shortKey,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:t,name:this.state._name,placeholder:this.state._placeholder,ref:this.catchRef,required:this.state._required,state:this.state,type:"text",value:this._inputValue},this.controller.onFacade),{onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onInput:this.onInput.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){var e;const t=!0===this.state._disabled;return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"a8f37dd81bcd050534fe3171b330483cc13914b5"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"a699579be7c019859cc6166169e1c9a801bb443c",state:this.state},index.h("div",{key:"c5340be07f80de622cf6fccdfc0f55d9bf232e27",class:"kol-single-select__group"},index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"8f9b7377e48d004661acbf5f0f2bbe36c9298fd7"},this.getInputProps())),this._inputValue&&!this.state._hideClearButton&&index.h(componentNames.KolButtonWcTag,{key:"cef3caacc0bb51c0b4760ac6f734ee44087b25d1",_icons:"codicon codicon-close",_label:this.translateDeleteSelection,_hideLabel:!0,_buttonVariant:"ghost",_disabled:t,"data-testid":"single-select-delete",class:clsx.clsx("kol-single-select__delete",{"kol-single-select__delete--disabled":t}),_on:{onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()}}}),index.h(componentNames.KolIconTag,{key:"4ca81413133d6ad53061ab833255ae48c37fd85a",_icons:"codicon codicon-triangle-down",_label:"",class:clsx.clsx("kol-custom-suggestions-toggle",{"kol-custom-suggestions-toggle--disabled":t}),onClick:this.toggleListbox.bind(this)})),this._isOpen&&!t&&index.h(CustomSuggestionsOptionsGroup.CustomSuggestionsOptionsGroupFc,{key:"410bb602f1a0c347f69dce17ce1b7b7e0f1ddc94",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this),style:{"--visible-options":`${null!==(e=this._rows)&&void 0!==e?e:5}`}},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map((e,t)=>index.h(CustomSuggestionsOptionsGroup.CustomSuggestionsOptionFc,{index:t,option:e.label,searchTerm:this._inputValue,ref:e=>{e&&(this.refOptions[t]=e)},selected:this._value===e.value,disabled:!!e.disabled,onClick:t=>{var n;e.disabled||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),this._isOpen=!1)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=t,this.focusOption(t))},onFocus:()=>{e.disabled||(this._focusedOptionIndex=t,this.focusOption(t))},onKeyDown:t=>{var n;e.disabled||"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),t.preventDefault())}})):index.h("li",{class:"kol-single-select__no-results-message"},this.translateNoResultsMessage," "))))}handleFocusOut(){setTimeout(()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()},0)}handleWindowBlur(){this.onBlur()}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._isOpen=!1,i(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),null===(n=this.refInput)||void 0===n||n.focus(),i(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e),this._isOpen=!1;break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))});break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))});break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(10))}}constructor(e){index.registerInstance(this,e),this.refOptions=[],this.translateDeleteSelection=i18n.translate("kol-delete-selection"),this.translateNoResultsMessage=i18n.translate("kol-no-results-message"),this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;null==e||e.preventDefault();if(!(!0===this.state._disabled))if(null===(t=this.refInput)||void 0===t||t.focus(),this._isOpen)this._isOpen=!1;else{this._isOpen=!0;const e=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex(e=>e.label===this._inputValue):-1;this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._required=!1,this._tooltipAlign="top",this._touched=!1,this._value=null,this._hideClearButton=!1,this.state={_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_options:[],_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new SingleSelectController(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}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)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e),this._filteredOptions=e,this.updateInputValue(this._value)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e,this.updateInputValue(e)}validateHideClearButton(e){this.controller.validateHideClearButton(e)}validateRows(e){this.controller.validateRows(e)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(e){if(Array.isArray(this._options)){const t=this._options.find(t=>t.value===e);this._inputValue=t?String(t.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(e){var t,n;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(n=this.refInput)||void 0===n?void 0:n.value),this._isOpen||this.controller.onFacade.onChange(e,this._value)}onClick(e){var t;this.toggleListbox(e),null===(t=this.refInput)||void 0===t||t.focus(),this.controller.onFacade.onClick(e)}get host(){return index.getElement(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],_hideClearButton:["validateHideClearButton"],_rows:["validateRows"]}}};KolSingleSelect.style={default:defaultStyleCss},exports.kol_single_select=KolSingleSelect;
+"use strict";var index=require("./index-CUwAAV9q.js"),clsx=require("./clsx-CkZlkaek.js"),componentNames=require("./component-names-CuI-0Pbo.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-BFcysaVO.js"),controllerIcon=require("./controller-icon-oRdlfcl8.js"),InputStateWrapper=require("./InputStateWrapper-Dc3UUVaW.js"),CustomSuggestionsOptionsGroup=require("./CustomSuggestionsOptionsGroup-BmxcG68L.js"),i18n=require("./i18n-DNWGj4j8.js"),dev_utils=require("./dev.utils-7DjklDXI.js"),common=require("./common-Cd2qH809.js"),controller=require("./controller-DT6QqMUx.js"),placeholder=require("./placeholder-BncK-3gZ.js"),required=require("./required-CXU7vdyH.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("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./tslib.es6-7DbU_BSw.js"),require("./reuse-Cs36Ddzu.js"),require("./InternalUnderlinedBadgeText-BmcMXSlV.js"),require("./Alert-iB2nNldZ.js"),require("./bem-CWXmxX43.js"),require("./browser-D7A31aEp.js"),require("./Heading-CXo3APiB.js"),require("./Icon-CA2N7E-m.js"),require("./icons-D_PtPRwb.js"),require("./Input-BG9SwAmi.js"),require("./orientation-BGODo_Ua.js");class SingleSelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,i,o)=>{"_value"===o&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(i)&&i.length>0&&(this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,i))},this.component=e}validateOptions(e){controller.validateOptions(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){required.validateRequired(this.component,e)}validateValue(e){common.watchValidator(this.component,"_value",e=>void 0!==e,new Set(["KoliBriUnknown"]),e)}validatePlaceholder(e){placeholder.validatePlaceholder(this.component,e)}validateHideClearButton(e){common.watchBoolean(this.component,"_hideClearButton",e)}validateRows(e){common.watchNumber(this.component,"_rows",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHideClearButton(this.component._hideClearButton),this.validateRows(this.component._rows)}}const defaultStyleCss=()=>' @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-custom-suggestions-option {     line-height: 1.5;     white-space: normal;     cursor: pointer;     overflow-wrap: break-word;   }   .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {     cursor: none !important;   }   .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {     cursor: not-allowed;   }   .kol-custom-suggestions-options-group {     background-color: white;     display: block;     position: absolute;     z-index: 2;     max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));     margin: 0;     padding: 0;     overflow-x: hidden;     overflow-y: auto;     list-style-type: none;   }   .kol-custom-suggestions-toggle {     display: flex;     width: var(--a11y-min-size);     height: var(--a11y-min-size);     align-items: center;     justify-content: center;     cursor: default;   }   .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {     cursor: not-allowed;   }   .kol-form-field {     display: grid;   }   .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {     cursor: pointer;   }   .kol-form-field--disabled .kol-form-field__label {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__label-text::after {     content: "*"/"";   }   .kol-form-field--disabled .kol-form-field__hint {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__tooltip .span-label::after {     content: "*"/"";   }   .kol-input-container {     background-color: transparent;     display: grid;     width: 100%;     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);     align-items: center;     grid-template-columns: 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--start) {     grid-template-columns: auto 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--end) {     grid-template-columns: 1fr auto;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr auto;   }   .kol-input-container__container {     position: relative;   }   .kol-input-container__adornment {     display: flex;     align-items: center;   }   .kol-input-container__adornment .kol-icon {     display: grid;     height: var(--a11y-min-size);     place-items: center;   }   .kol-input {     background-color: transparent;     width: 100%;     min-width: var(--a11y-min-size);   }   .kol-input:focus {     outline: none;   }   .kol-single-select__delete .kol-button {     cursor: pointer;   }   .kol-single-select__delete--disabled .kol-button {     cursor: not-allowed;   }   .kol-single-select__no-results-message {     display: flex;     min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));     align-items: center;     justify-content: center;     cursor: default;   }   .kol-single-select .kol-custom-suggestions-options-group {     max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;   }   .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {     cursor: pointer;   }   .kol-custom-suggestions-toggle--disabled {     opacity: 0.5;   } }',KolSingleSelect=class{async getValue(){return this._value}async focus(){var e;return Promise.resolve(null===(e=this.refInput)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}onBlur(){var e,t,i;const o=null===(e=this.state._options)||void 0===e?void 0:e.find(e=>{var t,i;return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase())===(null===(i=this._inputValue)||void 0===i?void 0:i.toLowerCase())});o?this.selectOption(o):(this._inputValue=null===(i=null===(t=this.state._options)||void 0===t?void 0:t.find(e=>e.value===this._value))||void 0===i?void 0:i.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}createEventWithTarget(e,t){const i=new CustomEvent(e,{bubbles:!0,detail:t});return this.refInput&&(Object.defineProperty(i,"target",{value:this.refInput}),Object.defineProperty(i,"currentTarget",{value:this.refInput})),i}clearSelection(){if(!(!0===this.state._disabled)){const e=null;this._focusedOptionIndex=-1,this._value=e,this._inputValue="",this._filteredOptions=[...this.state._options];const t=this.createEventWithTarget("input",{name:this.state._name,value:e}),i=this.createEventWithTarget("change",{name:this.state._name,value:e});this.controller.onFacade.onInput(t,!0,{value:e}),this.controller.onFacade.onChange(i,{value:e})}}selectOption(e){var t,i;if(e.value===this._value)return this._inputValue=e.label,void(this._filteredOptions=[...this.state._options]);this._value=e.value,this._inputValue=e.label;const o=this.createEventWithTarget("input",{name:null!==(t=this.state._name)&&void 0!==t?t:"",value:e.value}),s=this.createEventWithTarget("change",{name:null!==(i=this.state._name)&&void 0!==i?i:"",value:e.value});this.controller.onFacade.onInput(o,!1,e.value),this.controller.onFacade.onChange(s,e.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(e){const t=e.target;this._inputValue=t.value,this._isOpen=!0,this.setFilteredOptionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(e.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredOptionsByQuery(e){""===(null==e?void 0:e.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&e.length>0&&(this._filteredOptions=this.state._options.filter(t=>{var i,o;return null===(o=null===(i=t.label)||void 0===i?void 0:i.toLowerCase())||void 0===o?void 0:o.includes(null==e?void 0:e.toLowerCase())}))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e,i=0,o=!1;const s=this._filteredOptions.length;for(;i<s;){t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1);if(!this._filteredOptions[t].disabled){o=!0;break}t+=e,i++}o&&(this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex))}focusOption(e){if(this.refOptions){const t=this.refOptions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),i=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex(e=>e.label.toLowerCase().startsWith(t)&&!e.disabled);"number"==typeof i&&i>=0&&(this._focusedOptionIndex=i,this.focusOption(i))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=FormFieldStateWrapper.getRenderStates(this.state),t=!0===this.state._disabled;return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-keyshortcuts":this.state._shortKey,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:t,name:this.state._name,placeholder:this.state._placeholder,ref:this.catchRef,required:this.state._required,state:this.state,type:"text",value:this._inputValue},this.controller.onFacade),{onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onInput:this.onInput.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){var e;const t=!0===this.state._disabled;return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"a8f37dd81bcd050534fe3171b330483cc13914b5"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"a699579be7c019859cc6166169e1c9a801bb443c",state:this.state},index.h("div",{key:"c5340be07f80de622cf6fccdfc0f55d9bf232e27",class:"kol-single-select__group"},index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"8f9b7377e48d004661acbf5f0f2bbe36c9298fd7"},this.getInputProps())),this._inputValue&&!this.state._hideClearButton&&index.h(componentNames.KolButtonWcTag,{key:"cef3caacc0bb51c0b4760ac6f734ee44087b25d1",_icons:"codicon codicon-close",_label:this.translateDeleteSelection,_hideLabel:!0,_buttonVariant:"ghost",_disabled:t,"data-testid":"single-select-delete",class:clsx.clsx("kol-single-select__delete",{"kol-single-select__delete--disabled":t}),_on:{onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()}}}),index.h(componentNames.KolIconTag,{key:"4ca81413133d6ad53061ab833255ae48c37fd85a",_icons:"codicon codicon-triangle-down",_label:"",class:clsx.clsx("kol-custom-suggestions-toggle",{"kol-custom-suggestions-toggle--disabled":t}),onClick:this.toggleListbox.bind(this)})),this._isOpen&&!t&&index.h(CustomSuggestionsOptionsGroup.CustomSuggestionsOptionsGroupFc,{key:"410bb602f1a0c347f69dce17ce1b7b7e0f1ddc94",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this),style:{"--visible-options":`${null!==(e=this._rows)&&void 0!==e?e:5}`}},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map((e,t)=>index.h(CustomSuggestionsOptionsGroup.CustomSuggestionsOptionFc,{index:t,option:e.label,searchTerm:this._inputValue,ref:e=>{e&&(this.refOptions[t]=e)},selected:this._value===e.value,disabled:!!e.disabled,onClick:t=>{var i;e.disabled||(this.selectOption(e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t),this._isOpen=!1)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=t,this.focusOption(t))},onFocus:()=>{e.disabled||(this._focusedOptionIndex=t,this.focusOption(t))},onKeyDown:t=>{var i;e.disabled||"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t),t.preventDefault())}})):index.h("li",{class:"kol-single-select__no-results-message"},this.translateNoResultsMessage," "))))}handleFocusOut(){setTimeout(()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()},0)}handleWindowBlur(){this.onBlur()}handleKeyDown(e){var t,i;const o=(t,i)=>{var o;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(o=this.refInput)||void 0===o||o.focus()),null==i||i()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,o(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,o(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._isOpen=!1,o(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),null===(i=this.refInput)||void 0===i||i.focus(),o(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e),this._isOpen=!1;break;case"Home":this.blockSuggestionMouseOver=!0,o(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))});break;case"End":this.blockSuggestionMouseOver=!0,o(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))});break;case"PageUp":this.blockSuggestionMouseOver=!0,o(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,o(void 0,()=>this._isOpen&&this.moveFocus(10))}}constructor(e){index.registerInstance(this,e),this.refOptions=[],this.translateDeleteSelection=i18n.translate("kol-delete-selection"),this.translateNoResultsMessage=i18n.translate("kol-no-results-message"),this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;null==e||e.preventDefault();if(!(!0===this.state._disabled))if(null===(t=this.refInput)||void 0===t||t.focus(),this._isOpen)this._isOpen=!1;else{this._isOpen=!0;const e=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex(e=>e.label===this._inputValue):-1;this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._required=!1,this._tooltipAlign="top",this._touched=!1,this._value=null,this._hideClearButton=!1,this.state={_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_options:[],_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new SingleSelectController(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}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)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e),this._filteredOptions=e,this.updateInputValue(this._value)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e,this.updateInputValue(e)}validateHideClearButton(e){this.controller.validateHideClearButton(e)}validateRows(e){this.controller.validateRows(e)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(e){if(Array.isArray(this._options)){const t=this._options.find(t=>t.value===e);this._inputValue=t?String(t.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(e){var t,i;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(i=this.refInput)||void 0===i?void 0:i.value),this._isOpen||this.controller.onFacade.onChange(e,this._value)}onClick(e){var t;this.toggleListbox(e),null===(t=this.refInput)||void 0===t||t.focus(),this.controller.onFacade.onClick(e)}get host(){return index.getElement(this)}static get watchers(){return{_placeholder:[{validatePlaceholder:0}],_accessKey:[{validateAccessKey:0}],_disabled:[{validateDisabled:0}],_hideMsg:[{validateHideMsg:0}],_hideLabel:[{validateHideLabel:0}],_hint:[{validateHint:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_label:[{validateLabel:0}],_msg:[{validateMsg:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_options:[{validateOptions:0}],_required:[{validateRequired:0}],_shortKey:[{validateShortKey:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_touched:[{validateTouched:0}],_value:[{validateValue:0}],_hideClearButton:[{validateHideClearButton:0}],_rows:[{validateRows:0}]}}};KolSingleSelect.style={default:defaultStyleCss()},exports.kol_single_select=KolSingleSelect;

package/dist/cjs/kol-skip-nav.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js");require("./common-Cd2qH809.js");var label=require("./label-Nicf9N_T.js"),uniqueNavLabels=require("./unique-nav-labels-hzeBq0jr.js"),validation=require("./validation-BvY0ZgXp.js"),componentNames=require("./component-names-CuI-0Pbo.js");const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav__list {\n    display: grid;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    position: absolute;\n    left: calc(-99999 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n  }\n}",KolSkipNav=class{constructor(n){index.registerInstance(this,n),this.state={_label:"",_links:[]}}render(){return index.h("nav",{key:"b9adacaa5cb5b79456d375f35a4be7e18aa47a32",class:"kol-skip-nav","aria-label":this.state._label},index.h("ul",{key:"015db44ad9a7489ef6e5b000f1bebadb153ff2df",class:"kol-skip-nav__list"},this.state._links.map((n,e)=>index.h("li",{class:"kol-skip-nav__list-item",key:e},index.h(componentNames.KolLinkWcTag,Object.assign({},n,{ref:0===e?n=>this.firstLinkRef=n:void 0}))))))}async focus(){var n;return Promise.resolve(null===(n=this.firstLinkRef)||void 0===n?void 0:n.focus())}async kolFocus(){return this.focus()}validateLabel(n,e,t=!1){t||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,n,{required:!0}),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(n){validation.watchNavLinks("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};KolSkipNav.style={default:defaultStyleCss},exports.kol_skip_nav=KolSkipNav;
+"use strict";var index=require("./index-CUwAAV9q.js");require("./common-Cd2qH809.js");var label=require("./label-Nicf9N_T.js"),uniqueNavLabels=require("./unique-nav-labels-hzeBq0jr.js"),validation=require("./validation-BvY0ZgXp.js"),componentNames=require("./component-names-CuI-0Pbo.js");const defaultStyleCss=()=>"  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;  @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   .kol-skip-nav__list {     display: grid;     place-items: center;     list-style: none;   }   .kol-skip-nav__list-item {     height: 0;   }   .kol-skip-nav .kol-link {     position: absolute;     left: calc(-99999 * 1rem / var(--kolibri-root-font-size, 16));     z-index: 9999999;     line-height: 1;   }   .kol-skip-nav .kol-link:focus {     background-color: #fff;     position: unset;     left: unset;   } }",KolSkipNav=class{constructor(e){index.registerInstance(this,e),this.state={_label:"",_links:[]}}render(){return index.h("nav",{key:"b9adacaa5cb5b79456d375f35a4be7e18aa47a32",class:"kol-skip-nav","aria-label":this.state._label},index.h("ul",{key:"015db44ad9a7489ef6e5b000f1bebadb153ff2df",class:"kol-skip-nav__list"},this.state._links.map((e,a)=>index.h("li",{class:"kol-skip-nav__list-item",key:a},index.h(componentNames.KolLinkWcTag,Object.assign({},e,{ref:0===a?e=>this.firstLinkRef=e:void 0}))))))}async focus(){var e;return Promise.resolve(null===(e=this.firstLinkRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}validateLabel(e,a,i=!1){i||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,e,{required:!0}),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(e){validation.watchNavLinks("KolSkipNav",this,e)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_label:[{validateLabel:0}],_links:[{validateLinks:0}]}}};KolSkipNav.style={default:defaultStyleCss()},exports.kol_skip_nav=KolSkipNav;

package/dist/cjs/kol-spin.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),common=require("./common-Cd2qH809.js"),label=require("./label-Nicf9N_T.js"),show=require("./show-C0ZlevIe.js"),i18n=require("./i18n-DNWGj4j8.js"),clsx=require("./clsx-CkZlkaek.js");require("./i18n-BnIFsVIa.js");const spinVariantPropTypeOptions=["cycle","dot","none"],validateSpinVariant=(n,e)=>{common.watchValidator(n,"_variant",n=>"string"==typeof n&&spinVariantPropTypeOptions.includes(n),new Set(spinVariantPropTypeOptions),e)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__loader {\n      animation-duration: 4s;\n    }\n    .kol-spin__loader::before {\n      animation-duration: 6s;\n    }\n  }\n  .kol-spin__spinner--cycle {\n    width: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__loader {\n    border-radius: 50%;\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    animation: 2s linear infinite rotate;\n  }\n  .kol-spin__loader::before {\n    border-radius: 50%;\n    position: absolute;\n    inset: 0;\n    content: \"\";\n    animation: 3s linear infinite prixClipFix;\n    border: 5px solid #333;\n  }\n}\n@layer kol-component {\n  @keyframes spin1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes spin2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(calc(16 * 1rem / var(--kolibri-root-font-size, 16)), 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__spinner-element {\n      animation-duration: 2s;\n    }\n  }\n  .kol-spin__spinner--dot {\n    width: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element {\n    border-radius: 50%;\n    position: absolute;\n    top: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(12.8 * 1rem / var(--kolibri-root-font-size, 16));\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16)) solid #fff;\n  }\n  .kol-spin__spinner-element--1 {\n    background-color: #000;\n    left: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 0;\n    animation: 1s infinite spin1;\n  }\n  .kol-spin__spinner-element--2 {\n    background-color: #000;\n    left: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    animation: 1s infinite spin2;\n  }\n  .kol-spin__spinner-element--3 {\n    background-color: #000;\n    left: calc(17.6 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    animation: 1s infinite spin2;\n  }\n  .kol-spin__spinner-element--neutral {\n    background-color: #666;\n    left: calc(33.6 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 0;\n    animation: 1s infinite spin3;\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner {\n    display: block;\n    position: relative;\n    padding: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";function renderSpin(n){switch(n){case"cycle":return index.h("span",{class:"kol-spin__loader"});case"none":return index.h("slot",{name:"expert"});default:return index.h(index.Fragment,null,index.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),index.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),index.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),index.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const KolSpin=class{constructor(n){index.registerInstance(this,n),this.showToggled=!1,this.translateActionRunning=i18n.translate("kol-action-running"),this.translateActionDone=i18n.translate("kol-action-done"),this._show=!1,this._variant="dot",this.state={_variant:"dot",_label:void 0}}render(){var n,e;return index.h(index.Host,{key:"e9c150c633c0a718053c4aa1aeb737d88b7b4183",class:"kol-spin"},this.state._show?index.h(index.Fragment,null,index.h("span",{class:clsx.clsx("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`)},renderSpin(this.state._variant)),index.h("span",{"aria-busy":"true",class:"visually-hidden",role:"alert"},null!==(n=this.state._label)&&void 0!==n?n:this.translateActionRunning)):this.showToggled&&index.h("span",{"aria-busy":"false",class:"visually-hidden",role:"alert"},null!==(e=this.state._label)&&void 0!==e?e:this.translateActionDone))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,show.validateShow(this,n)}validateLabel(n){label.validateLabel(this,n)}validateVariant(n){validateSpinVariant(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant),this.validateLabel(this._label)}static get watchers(){return{_show:["validateShow"],_label:["validateLabel"],_variant:["validateVariant"]}}};KolSpin.style={default:defaultStyleCss},exports.kol_spin=KolSpin;
+"use strict";var index=require("./index-CUwAAV9q.js"),common=require("./common-Cd2qH809.js"),label=require("./label-Nicf9N_T.js"),show=require("./show-C0ZlevIe.js"),i18n=require("./i18n-DNWGj4j8.js"),clsx=require("./clsx-CkZlkaek.js");require("./i18n-BnIFsVIa.js");const spinVariantPropTypeOptions=["cycle","dot","none"],validateSpinVariant=(i,e)=>{common.watchValidator(i,"_variant",i=>"string"==typeof i&&spinVariantPropTypeOptions.includes(i),new Set(spinVariantPropTypeOptions),e)},defaultStyleCss=()=>'  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;  @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   @keyframes rotate {     100% {       transform: rotate(360deg);     }   }   @keyframes prixClipFix {     0% {       border-color: #fff;       clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);     }     25% {       border-color: #666;       clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);     }     50% {       border-color: #000;       clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);     }     75% {       border-color: #000;       clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);     }     100% {       border-color: #000;       clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);     }   }      @media (prefers-reduced-motion) {     .kol-spin__loader {       animation-duration: 4s;     }     .kol-spin__loader::before {       animation-duration: 6s;     }   }   .kol-spin__spinner--cycle {     width: calc(48 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(48 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-spin__loader {     border-radius: 50%;     display: block;     position: relative;     width: 100%;     height: 100%;     animation: 2s linear infinite rotate;   }   .kol-spin__loader::before {     border-radius: 50%;     position: absolute;     inset: 0;     content: "";     animation: 3s linear infinite prixClipFix;     border: 5px solid #333;   } } @layer kol-component {   @keyframes spin1 {     0% {       transform: scale(0);     }     100% {       transform: scale(1);     }   }   @keyframes spin2 {     0% {       transform: translate(0, 0);     }     100% {       transform: translate(calc(16 * 1rem / var(--kolibri-root-font-size, 16)), 0);     }   }   @keyframes spin3 {     0% {       transform: scale(1);     }     100% {       transform: scale(0);     }   }      @media (prefers-reduced-motion) {     .kol-spin__spinner-element {       animation-duration: 2s;     }   }   .kol-spin__spinner--dot {     width: calc(48 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-spin__spinner-element {     border-radius: 50%;     position: absolute;     top: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));     width: calc(12.8 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(12.8 * 1rem / var(--kolibri-root-font-size, 16));     animation-timing-function: cubic-bezier(0, 1, 1, 0);     border: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16)) solid #fff;   }   .kol-spin__spinner-element--1 {     background-color: #000;     left: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));     z-index: 0;     animation: 1s infinite spin1;   }   .kol-spin__spinner-element--2 {     background-color: #000;     left: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));     z-index: 1;     animation: 1s infinite spin2;   }   .kol-spin__spinner-element--3 {     background-color: #000;     left: calc(17.6 * 1rem / var(--kolibri-root-font-size, 16));     z-index: 1;     animation: 1s infinite spin2;   }   .kol-spin__spinner-element--neutral {     background-color: #666;     left: calc(33.6 * 1rem / var(--kolibri-root-font-size, 16));     z-index: 0;     animation: 1s infinite spin3;   } } @layer kol-component {   .kol-spin__spinner {     display: block;     position: relative;     padding: calc(2 * 1rem / var(--kolibri-root-font-size, 16));   } }';function renderSpin(i){switch(i){case"cycle":return index.h("span",{class:"kol-spin__loader"});case"none":return index.h("slot",{name:"expert"});default:return index.h(index.Fragment,null,index.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),index.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),index.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),index.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const KolSpin=class{constructor(i){index.registerInstance(this,i),this.showToggled=!1,this.translateActionRunning=i18n.translate("kol-action-running"),this.translateActionDone=i18n.translate("kol-action-done"),this._show=!1,this._variant="dot",this.state={_variant:"dot",_label:void 0}}render(){var i,e;return index.h(index.Host,{key:"e9c150c633c0a718053c4aa1aeb737d88b7b4183",class:"kol-spin"},this.state._show?index.h(index.Fragment,null,index.h("span",{class:clsx.clsx("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`)},renderSpin(this.state._variant)),index.h("span",{"aria-busy":"true",class:"visually-hidden",role:"alert"},null!==(i=this.state._label)&&void 0!==i?i:this.translateActionRunning)):this.showToggled&&index.h("span",{"aria-busy":"false",class:"visually-hidden",role:"alert"},null!==(e=this.state._label)&&void 0!==e?e:this.translateActionDone))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,show.validateShow(this,i)}validateLabel(i){label.validateLabel(this,i)}validateVariant(i){validateSpinVariant(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant),this.validateLabel(this._label)}static get watchers(){return{_show:[{validateShow:0}],_label:[{validateLabel:0}],_variant:[{validateVariant:0}]}}};KolSpin.style={default:defaultStyleCss()},exports.kol_spin=KolSpin;

package/dist/cjs/kol-split-button.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),clsx=require("./clsx-CkZlkaek.js"),componentNames=require("./component-names-CuI-0Pbo.js"),i18n=require("./i18n-DNWGj4j8.js");require("./common-Cd2qH809.js"),require("./i18n-BnIFsVIa.js");const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-popover {\n    position: absolute;\n    height: 0;\n  }\n  .kol-popover__content {\n    opacity: 0;\n    background-color: #fff;\n    position: absolute;\n    min-width: max-content;\n    min-height: max-content;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    rotate: 0.125turn;\n    background-color: inherit;\n    position: absolute;\n    z-index: -1;\n    width: var(--font-size);\n    height: var(--font-size);\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n    width: 100%;\n    align-items: stretch;\n  }\n  .kol-split-button__button {\n    min-width: 0;\n    flex: 1 1 auto;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover {\n    z-index: 1;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",KolSplitButton=class{constructor(n){index.registerInstance(this,n),this.catchPrimaryRef=n=>{this.primaryButtonWcRef=n},this.clickButtonHandler={onClick:n=>{var t,e;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)&&(null===(e=this._on)||void 0===e||e.onClick(n,this._value))}},this.clickToggleHandler={onClick:n=>{n.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._disabled=!1,this._hideLabel=!1,this._tooltipAlign="top",this._type="button",this._variant="normal",this.state={_show:!1}}async getValue(){return this._value}async focus(){var n;return Promise.resolve(null===(n=this.primaryButtonWcRef)||void 0===n?void 0:n.focus())}async kolFocus(){return this.focus()}render(){const n="kol-split-button-dropdown-label";return index.h("div",{key:"fd28aa257b89ec88249c2f7eb4f1178abd5b70f1",class:"kol-split-button"},index.h("div",{key:"7abb8684272b4cb0145124cfb74189f1f4d2e06c",class:"kol-split-button__root"},index.h(componentNames.KolButtonWcTag,{key:"808d218153cb14a95b7640fe0312f9386922168e",class:clsx.clsx("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),ref:this.catchPrimaryRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_id:this._id,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_buttonVariant:this._variant}),index.h("div",{key:"1f4dec3081093baf3435447615be0f466fa47890",class:"kol-split-button__horizontal-line"}),index.h(componentNames.KolButtonWcTag,{key:"e0545b6a2565cecb3e65e79635771ebcac12c1cc",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?i18n.translate(`${n}-close`):i18n.translate(`${n}-open`),_on:this.clickToggleHandler})),index.h(componentNames.KolPopoverWcTag,{key:"af16aee240137561a45847448a8144de33a100f5",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},index.h("slot",{key:"0c2ffbeaf67e040c2c101829332b90df397200fa"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}};KolSplitButton.style={default:defaultStyleCss},exports.kol_split_button=KolSplitButton;
+"use strict";var index=require("./index-CUwAAV9q.js"),clsx=require("./clsx-CkZlkaek.js"),componentNames=require("./component-names-CuI-0Pbo.js"),i18n=require("./i18n-DNWGj4j8.js");require("./common-Cd2qH809.js"),require("./i18n-BnIFsVIa.js");const defaultStyleCss=()=>"  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;  @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   @keyframes fadeInOpacity {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   }   .kol-popover {     position: absolute;     height: 0;   }   .kol-popover__content {     opacity: 0;     background-color: #fff;     position: absolute;     min-width: max-content;     min-height: max-content;   }   .kol-popover__content--visible {     animation: 0.3s ease-in forwards fadeInOpacity;   }   .kol-popover__content--disappear {     animation: 0.3s ease-in backwards fadeInOpacity;   }   .kol-popover__arrow {     rotate: 0.125turn;     background-color: inherit;     position: absolute;     z-index: -1;     width: var(--font-size);     height: var(--font-size);   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-split-button {     display: flex;     position: relative;     width: 100%;   }   .kol-split-button__root {     display: flex;     position: relative;     width: 100%;     align-items: stretch;   }   .kol-split-button__button {     min-width: 0;     flex: 1 1 auto;     text-align: left;   }   .kol-split-button .kol-popover {     z-index: 1;   }   .kol-split-button .kol-popover__content {     margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-split-button .kol-popover__arrow {     display: none;   } }",KolSplitButton=class{constructor(t){index.registerInstance(this,t),this.catchPrimaryRef=t=>{this.primaryButtonWcRef=t},this.clickButtonHandler={onClick:t=>{var o,i;t.stopPropagation(),"function"==typeof(null===(o=this._on)||void 0===o?void 0:o.onClick)&&(null===(i=this._on)||void 0===i||i.onClick(t,this._value))}},this.clickToggleHandler={onClick:t=>{t.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._disabled=!1,this._hideLabel=!1,this._tooltipAlign="top",this._type="button",this._variant="normal",this.state={_show:!1}}async getValue(){return this._value}async focus(){var t;return Promise.resolve(null===(t=this.primaryButtonWcRef)||void 0===t?void 0:t.focus())}async kolFocus(){return this.focus()}render(){const t="kol-split-button-dropdown-label";return index.h("div",{key:"fd28aa257b89ec88249c2f7eb4f1178abd5b70f1",class:"kol-split-button"},index.h("div",{key:"7abb8684272b4cb0145124cfb74189f1f4d2e06c",class:"kol-split-button__root"},index.h(componentNames.KolButtonWcTag,{key:"808d218153cb14a95b7640fe0312f9386922168e",class:clsx.clsx("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),ref:this.catchPrimaryRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_id:this._id,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_buttonVariant:this._variant}),index.h("div",{key:"1f4dec3081093baf3435447615be0f466fa47890",class:"kol-split-button__horizontal-line"}),index.h(componentNames.KolButtonWcTag,{key:"e0545b6a2565cecb3e65e79635771ebcac12c1cc",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?i18n.translate(`${t}-close`):i18n.translate(`${t}-open`),_on:this.clickToggleHandler})),index.h(componentNames.KolPopoverWcTag,{key:"af16aee240137561a45847448a8144de33a100f5",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},index.h("slot",{key:"0c2ffbeaf67e040c2c101829332b90df397200fa"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}};KolSplitButton.style={default:defaultStyleCss()},exports.kol_split_button=KolSplitButton;

package/dist/cjs/kol-table-settings-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),componentNames=require("./component-names-CuI-0Pbo.js"),i18n=require("./i18n-DNWGj4j8.js"),events=require("./events-cX8h6I3p.js");require("./common-Cd2qH809.js"),require("./i18n-BnIFsVIa.js");const KolTableSettings=class{constructor(e){index.registerInstance(this,e),this.tableSettings={columns:[]},this.errorMessage=null,this.translateTableSettings=i18n.translate("kol-table-settings"),this.translateTableSettingsCancel=i18n.translate("kol-table-settings-cancel"),this.translateTableSettingsApply=i18n.translate("kol-table-settings-apply"),this.translateErrorAllInvisible=i18n.translate("kol-table-settings-error-all-invisible"),this.translateColumnNotHidable=i18n.translate("kol-table-settings-column-not-hidable"),this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.normalizeColumns(Array.isArray(e.columns)?e.columns:[])})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}normalizeColumns(e){return e.map(e=>{var{hidable:t,resizable:s,sortable:n,visible:a}=e,l=tslib_es6.__rest(e,["hidable","resizable","sortable","visible"]);return Object.assign(Object.assign({},l),{hidable:!1!==t,resizable:!1!==s,sortable:!1!==n,visible:!1!==a})})}moveColumn(e,t){const s=[...this.tableSettings.columns],n=s.findIndex(t=>t.key===e),a=s[n],l="up"===t?n-1:n+1,i=s[l];if(n<0||l<0||l>=s.length||!1===(null==a?void 0:a.sortable)||!1===(null==i?void 0:i.sortable))return;const[o]=s.splice(n,1);s.splice(l,0,o),this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:s})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e&&!1!==s.hidable?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s)})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e?!1===s.resizable?s:Object.assign(Object.assign({},s),{width:Number(t)}):s)})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();this.tableSettings.columns.some(e=>e.visible)?this.host&&(this.errorMessage=null,events.dispatchDomEvent(this.host,events.KolEvent.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=this.translateErrorAllInvisible}render(){const e=this.tableSettings.columns;return index.h(componentNames.KolPopoverButtonWcTag,{key:"77db05412c9011fe8e0e2dfc7499dbcadede5521",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},index.h("div",{key:"1ad57a28bceee8b4c10c8c818b4fd6f0001809c4",class:"kol-table-settings__content"},index.h(componentNames.KolHeadingTag,{key:"d019a6cbe836283c6c2ccdf319c92090802382be",_label:this.translateTableSettings,_level:0}),this.errorMessage&&index.h(componentNames.KolAlertWcTag,{key:"3c53e407297bd21a00bb94ac9cec1e913728f246",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),index.h("form",{key:"14e649882dc3c590ab1431837ca1e9223e332ebc",onSubmit:this.handleSubmit.bind(this)},index.h("div",{key:"3546aca5566c7148effa4ac3b6c6c6c80df499c4",class:"kol-table-settings__columns-container"},index.h("div",{key:"e5ba799f10556c2ff15321984bf06d26474162d1",class:"kol-table-settings__columns"},e.map((t,s)=>{var n,a;return index.h("div",{key:t.key,class:"kol-table-settings__column"},index.h(componentNames.KolInputCheckboxTag,{_checked:t.visible,_label:`${t.label}${!1===t.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===t.hidable,_on:{onInput:(e,s)=>this.handleVisibilityChange(t.key,s)},"data-testid":`table-settings-visible-${t.key}`}),index.h("span",{class:"kol-table-settings__column-label"},t.label),index.h(componentNames.KolInputNumberTag,{_hideLabel:!0,_value:t.width,_label:i18n.translate("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_disabled:!1===t.resizable,_on:{onInput:(e,s)=>this.handleWidthChange(t.key,s)}}),index.h(componentNames.KolButtonWcTag,{_icons:"codicon codicon-arrow-up",_label:i18n.translate("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"up")},_disabled:0===s||!1===t.sortable||!1===(null===(n=e[s-1])||void 0===n?void 0:n.sortable),"data-testid":"table-settings-move-up"}),index.h(componentNames.KolButtonWcTag,{_icons:"codicon codicon-arrow-down",_label:i18n.translate("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"down")},_disabled:s===e.length-1||!1===t.sortable||!1===(null===(a=e[s+1])||void 0===a?void 0:a.sortable),"data-testid":"table-settings-move-down"}))}))),index.h("div",{key:"b31183c5e2b855b21944864e0897c632c30bd55e",class:"kol-table-settings__actions"},index.h(componentNames.KolButtonWcTag,{key:"9a741d4fe161684a31a335877ed81bd1e200848a",_label:this.translateTableSettingsCancel,_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),index.h(componentNames.KolButtonWcTag,{key:"67ebec227e4a82cec363431b1b755d757974f50c",_label:this.translateTableSettingsApply,_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return index.getElement(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};exports.kol_table_settings_wc=KolTableSettings;
+"use strict";var index=require("./index-CUwAAV9q.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),componentNames=require("./component-names-CuI-0Pbo.js"),i18n=require("./i18n-DNWGj4j8.js"),events=require("./events-cX8h6I3p.js");require("./common-Cd2qH809.js"),require("./i18n-BnIFsVIa.js");const KolTableSettings=class{constructor(e){index.registerInstance(this,e),this.tableSettings={columns:[]},this.errorMessage=null,this.translateTableSettings=i18n.translate("kol-table-settings"),this.translateTableSettingsCancel=i18n.translate("kol-table-settings-cancel"),this.translateTableSettingsApply=i18n.translate("kol-table-settings-apply"),this.translateErrorAllInvisible=i18n.translate("kol-table-settings-error-all-invisible"),this.translateColumnNotHidable=i18n.translate("kol-table-settings-column-not-hidable"),this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.normalizeColumns(Array.isArray(e.columns)?e.columns:[])})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}normalizeColumns(e){return e.map(e=>{var{hidable:t,resizable:s,sortable:n,visible:a}=e,l=tslib_es6.__rest(e,["hidable","resizable","sortable","visible"]);return Object.assign(Object.assign({},l),{hidable:!1!==t,resizable:!1!==s,sortable:!1!==n,visible:!1!==a})})}moveColumn(e,t){const s=[...this.tableSettings.columns],n=s.findIndex(t=>t.key===e),a=s[n],l="up"===t?n-1:n+1,i=s[l];if(n<0||l<0||l>=s.length||!1===(null==a?void 0:a.sortable)||!1===(null==i?void 0:i.sortable))return;const[o]=s.splice(n,1);s.splice(l,0,o),this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:s})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e&&!1!==s.hidable?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s)})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e?!1===s.resizable?s:Object.assign(Object.assign({},s),{width:Number(t)}):s)})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();this.tableSettings.columns.some(e=>e.visible)?this.host&&(this.errorMessage=null,events.dispatchDomEvent(this.host,events.KolEvent.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=this.translateErrorAllInvisible}render(){const e=this.tableSettings.columns;return index.h(componentNames.KolPopoverButtonWcTag,{key:"77db05412c9011fe8e0e2dfc7499dbcadede5521",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},index.h("div",{key:"1ad57a28bceee8b4c10c8c818b4fd6f0001809c4",class:"kol-table-settings__content"},index.h(componentNames.KolHeadingTag,{key:"d019a6cbe836283c6c2ccdf319c92090802382be",_label:this.translateTableSettings,_level:0}),this.errorMessage&&index.h(componentNames.KolAlertWcTag,{key:"3c53e407297bd21a00bb94ac9cec1e913728f246",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),index.h("form",{key:"14e649882dc3c590ab1431837ca1e9223e332ebc",onSubmit:this.handleSubmit.bind(this)},index.h("div",{key:"3546aca5566c7148effa4ac3b6c6c6c80df499c4",class:"kol-table-settings__columns-container"},index.h("div",{key:"e5ba799f10556c2ff15321984bf06d26474162d1",class:"kol-table-settings__columns"},e.map((t,s)=>{var n,a;return index.h("div",{key:t.key,class:"kol-table-settings__column"},index.h(componentNames.KolInputCheckboxTag,{_checked:t.visible,_label:`${t.label}${!1===t.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===t.hidable,_on:{onInput:(e,s)=>this.handleVisibilityChange(t.key,s)},"data-testid":`table-settings-visible-${t.key}`}),index.h("span",{class:"kol-table-settings__column-label"},t.label),index.h(componentNames.KolInputNumberTag,{_hideLabel:!0,_value:t.width,_label:i18n.translate("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_disabled:!1===t.resizable,_on:{onInput:(e,s)=>this.handleWidthChange(t.key,s)}}),index.h(componentNames.KolButtonWcTag,{_icons:"codicon codicon-arrow-up",_label:i18n.translate("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"up")},_disabled:0===s||!1===t.sortable||!1===(null===(n=e[s-1])||void 0===n?void 0:n.sortable),"data-testid":"table-settings-move-up"}),index.h(componentNames.KolButtonWcTag,{_icons:"codicon codicon-arrow-down",_label:i18n.translate("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"down")},_disabled:s===e.length-1||!1===t.sortable||!1===(null===(a=e[s+1])||void 0===a?void 0:a.sortable),"data-testid":"table-settings-move-down"}))}))),index.h("div",{key:"b31183c5e2b855b21944864e0897c632c30bd55e",class:"kol-table-settings__actions"},index.h(componentNames.KolButtonWcTag,{key:"9a741d4fe161684a31a335877ed81bd1e200848a",_label:this.translateTableSettingsCancel,_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),index.h(componentNames.KolButtonWcTag,{key:"67ebec227e4a82cec363431b1b755d757974f50c",_label:this.translateTableSettingsApply,_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return index.getElement(this)}static get watchers(){return{_tableSettings:[{handleTableSettingsChange:0}]}}};exports.kol_table_settings_wc=KolTableSettings;