@public-ui/components 4.1.2-rc.7 → 4.1.2-rc.8

package/dist/components/kol-single-select.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as KolButtonWcTag}from"./component-names.js";import{g as getRenderStates,F as FormFieldStateWrapper}from"./controller3.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{I as InputStateWrapper}from"./InputStateWrapper.js";import{C as CustomSuggestionsOptionsGroupFc,a as CustomSuggestionsOptionFc}from"./CustomSuggestionsOptionsGroup.js";import{t as translate}from"./i18n.js";import{I as IconFC}from"./component2.js";import{c as clsx}from"./clsx.js";import{n as nonce}from"./dev.utils.js";import{d as delegateFocus,s as setFocus}from"./element-focus.js";import{b as watchValidator,d as watchBoolean,O as watchNumber}from"./common.js";import{f as fillKeyOptionMap,b as validateOptions}from"./controller4.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateRequired}from"./required.js";class SingleSelectController extends InputIconController{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,n,o)=>{"_value"===o&&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(),fillKeyOptionMap(this.keyOptionMap,n))},this.component=e}validateOptions(e){validateOptions(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){validateRequired(this.component,e)}validateValue(e){watchValidator(this.component,"_value",e=>void 0!==e,new Set(["KoliBriUnknown"]),e)}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateHasClearButton(e){watchBoolean(this.component,"_hasClearButton",e)}validateRows(e){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.validateHasClearButton(this.component._hasClearButton),this.validateRows(this.component._rows)}}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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774956515321"); /* IE9*/\n  src: url("kolicons.eot?t=1774956515321#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774956515321") format("woff2"), url("kolicons.woff?t=1774956515321") format("woff"), url("kolicons.ttf?t=1774956515321") format("truetype"), url("kolicons.svg?t=1774956515321#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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 .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\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-input-container:has(.kol-custom-suggestions-options-group--open) {\n    z-index: 10;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-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__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\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:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\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 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    min-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-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-single-select__delete .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-single-select__delete :host {\n    display: inline-block;\n  }\n  .kol-single-select__delete .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-single-select__delete .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-single-select__delete .kol-button__text {\n    flex: 1 0 100%;\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$1=proxyCustomElement(class extends HTMLElement{async getValue(){return this._value}async focus(){return delegateFocus(this.host,()=>setFocus(this.refInput))}onBlur(e){var t,n,o;const i=null===(t=this.state._options)||void 0===t?void 0:t.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._isOpen&&this._value&&(this._inputValue=null===(o=null===(n=this.state._options)||void 0===n?void 0:n.find(e=>e.value===this._value))||void 0===o?void 0:o.label,this._filteredOptions=[...this.state._options]),e instanceof FocusEvent&&e.view===window&&!this.isClearing&&(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(this.isClearing=!0,this.state._disabled)return;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}),this.isClearing=!1}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 o=this.createEventWithTarget("input",{name:null!==(t=this.state._name)&&void 0!==t?t:"",value:e.value}),i=this.createEventWithTarget("change",{name:null!==(n=this.state._name)&&void 0!==n?n:"",value:e.value});this.controller.onFacade.onInput(o,!1,e.value),this.controller.onFacade.onChange(i,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,o;return null===(o=null===(n=t.label)||void 0===n?void 0:n.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,n=0,o=!1;const i=this._filteredOptions.length;for(;n<i;){t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1);if(!this._filteredOptions[t].disabled){o=!0;break}t+=e,n++}o&&(this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex))}focusOption(e){if(this.refOptions){const t=this.refOptions[e];null==t||t.focus()}}selectFocusedOption(){return!!(Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&this._focusedOptionIndex>=0)&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),!0)}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}=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.setRefInput,required:this.state._required,role:"combobox",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 h(FormFieldStateWrapper,Object.assign({key:"bd67f85898502c3ef12057f50398d9553f0f5a7d"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"79f9cc63e20338aabc852b4828185a2b50f249e5",state:this.state},h("div",{key:"2db567f08e6edf60e5cbc6966e707ae0a4618f40",class:"kol-single-select__group"},h(InputStateWrapper,Object.assign({key:"1caa2690e520e616fc4d8e74eb64380a911f1e7a"},this.getInputProps())),this._inputValue&&this.state._hasClearButton&&h(KolButtonWcTag,{key:"e727b265a6d3173550791546354a5a9aaeeae796",_icons:"kolicon-cross",_label:this.translateDeleteSelection,_hideLabel:!0,_variant:"ghost",_disabled:t,"data-testid":"single-select-delete",class:"kol-single-select__delete",hidden:t,_on:{onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()}}}),h(IconFC,{key:"3e8f860cb6dde2f3bdf8904cd318a4048432ab24",icons:"kolicon-chevron-down",label:"",class:clsx("kol-custom-suggestions-toggle",{"kol-custom-suggestions-toggle--disabled":t}),onClick:this.toggleListbox.bind(this)})),h(CustomSuggestionsOptionsGroupFc,{key:"2d2671a9282ba38a23d67d22b9c4948060be1b8d",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this),style:{"--visible-options":`${null!==(e=this._rows)&&void 0!==e?e:5}`},hidden:!this._isOpen||t},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map((e,t)=>h(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())}})):h("li",{class:"kol-single-select__no-results-message",role:"alert"},this.translateNoResultsMessage," "))))}handleFocusOut(e){setTimeout(()=>{var t;(null===(t=this.host)||void 0===t?void 0:t.contains(document.activeElement))||this.onBlur(e)})}handleWindowBlur(e){this.onBlur(e)}handleKeyDown(e){var t,n;const o=(t,n)=>{var o;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(o=this.refInput)||void 0===o||o.focus()),null==n||n()};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" ":case"Enter":case"NumpadEnter":this._isOpen?this.selectFocusedOption()&&(null===(n=this.refInput)||void 0===n||n.focus(),o(!1)):this.toggleListbox(e);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){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.refOptions=[],this.translateDeleteSelection=translate("kol-delete-selection"),this.translateNoResultsMessage=translate("kol-no-results-message"),this.isClearing=!1,this.setRefInput=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._hasClearButton=!0,this.state={_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_options:[],_hasClearButton:!0},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)}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)}validateHasClearButton(e){this.controller.validateHasClearButton(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 this}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],_hasClearButton:["validateHasClearButton"],_rows:["validateRows"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-single-select",{_accessKey:[1,"_access-key"],_placeholder:[1],_disabled:[4],_hideMsg:[4,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_label:[1],_msg:[1],_name:[1],_on:[16],_options:[1],_required:[4],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1544],_hasClearButton:[4,"_has-clear-button"],_rows:[2],_isOpen:[32],_filteredOptions:[32],_inputValue:[32],blockSuggestionMouseOver:[32],state:[32],inputHasFocus:[32],getValue:[64],focus:[64]},[[0,"focusout","handleFocusOut"],[0,"blur","handleWindowBlur"],[0,"keydown","handleKeyDown"],[1,"mousemove","handleMouseEvent"]],{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],_hasClearButton:["validateHasClearButton"],_rows:["validateRows"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-single-select"].forEach(e=>{if("kol-single-select"===e)customElements.get(e)||customElements.define(e,KolSingleSelect$1)})}const KolSingleSelect=KolSingleSelect$1,defineCustomElement=defineCustomElement$1;export{KolSingleSelect,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{b as KolButtonWcTag}from"./component-names.js";import{g as getRenderStates,F as FormFieldStateWrapper}from"./controller4.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{I as InputStateWrapper}from"./InputStateWrapper.js";import{C as CustomSuggestionsOptionsGroupFc,a as CustomSuggestionsOptionFc}from"./CustomSuggestionsOptionsGroup.js";import{t as translate}from"./i18n.js";import{I as IconFC}from"./component3.js";import{c as clsx}from"./clsx.js";import{n as nonce}from"./dev.utils.js";import{d as delegateFocus,s as setFocus}from"./element-focus.js";import{b as watchValidator,d as watchBoolean,O as watchNumber}from"./common.js";import{f as fillKeyOptionMap,b as validateOptions}from"./controller5.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateRequired}from"./required.js";class SingleSelectController extends InputIconController{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,n,o)=>{"_value"===o&&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(),fillKeyOptionMap(this.keyOptionMap,n))},this.component=e}validateOptions(e){validateOptions(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){validateRequired(this.component,e)}validateValue(e){watchValidator(this.component,"_value",e=>void 0!==e,new Set(["KoliBriUnknown"]),e)}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateHasClearButton(e){watchBoolean(this.component,"_hasClearButton",e)}validateRows(e){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.validateHasClearButton(this.component._hasClearButton),this.validateRows(this.component._rows)}}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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775118370120"); /* IE9*/\n  src: url("kolicons.eot?t=1775118370120#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775118370120") format("woff2"), url("kolicons.woff?t=1775118370120") format("woff"), url("kolicons.ttf?t=1775118370120") format("truetype"), url("kolicons.svg?t=1775118370120#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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 .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\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-input-container:has(.kol-custom-suggestions-options-group--open) {\n    z-index: 10;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-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__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\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:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\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 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    min-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-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-single-select__delete .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-single-select__delete :host {\n    display: inline-block;\n  }\n  .kol-single-select__delete .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-single-select__delete .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-single-select__delete .kol-button__text {\n    flex: 1 0 100%;\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$1=proxyCustomElement(class extends HTMLElement{async getValue(){return this._value}async focus(){return delegateFocus(this.host,()=>setFocus(this.refInput))}onBlur(e){var t,n,o;const i=null===(t=this.state._options)||void 0===t?void 0:t.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._isOpen&&this._value&&(this._inputValue=null===(o=null===(n=this.state._options)||void 0===n?void 0:n.find(e=>e.value===this._value))||void 0===o?void 0:o.label,this._filteredOptions=[...this.state._options]),e instanceof FocusEvent&&e.view===window&&!this.isClearing&&(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(this.isClearing=!0,this.state._disabled)return;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}),this.isClearing=!1}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 o=this.createEventWithTarget("input",{name:null!==(t=this.state._name)&&void 0!==t?t:"",value:e.value}),i=this.createEventWithTarget("change",{name:null!==(n=this.state._name)&&void 0!==n?n:"",value:e.value});this.controller.onFacade.onInput(o,!1,e.value),this.controller.onFacade.onChange(i,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,o;return null===(o=null===(n=t.label)||void 0===n?void 0:n.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,n=0,o=!1;const i=this._filteredOptions.length;for(;n<i;){t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1);if(!this._filteredOptions[t].disabled){o=!0;break}t+=e,n++}o&&(this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex))}focusOption(e){if(this.refOptions){const t=this.refOptions[e];null==t||t.focus()}}selectFocusedOption(){return!!(Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&this._focusedOptionIndex>=0)&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),!0)}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}=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.setRefInput,required:this.state._required,role:"combobox",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 h(FormFieldStateWrapper,Object.assign({key:"9fe3ffae0d2a5dd44dc846a67e70bef70e745b2b"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"07dbffb6552a8d99f4f6df05e4614b0f16644cb8",state:this.state},h("div",{key:"3d9f4973be33bcd19adadcdfed713a75cf4f4a4b",class:"kol-single-select__group"},h(InputStateWrapper,Object.assign({key:"6127bea092aaf4ae4dbc5d301b3632ac9e481a8c"},this.getInputProps())),this._inputValue&&this.state._hasClearButton&&h(KolButtonWcTag,{key:"88385455feb08b784b9a1e28cd1157e011643144",_icons:"kolicon-cross",_label:this.translateDeleteSelection,_hideLabel:!0,_variant:"ghost",_disabled:t,"data-testid":"single-select-delete",class:"kol-single-select__delete",hidden:t,_on:{onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()}}}),h(IconFC,{key:"5e04ccaf242eaa961d5b95cfe5fcedfd456d913d",icons:"kolicon-chevron-down",label:"",class:clsx("kol-custom-suggestions-toggle",{"kol-custom-suggestions-toggle--disabled":t}),onClick:this.toggleListbox.bind(this)})),h(CustomSuggestionsOptionsGroupFc,{key:"81f8cf140037ce64d590d23ecfbdc70f7b0db41b",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this),style:{"--visible-options":`${null!==(e=this._rows)&&void 0!==e?e:5}`},hidden:!this._isOpen||t},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map((e,t)=>h(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())}})):h("li",{class:"kol-single-select__no-results-message",role:"alert"},this.translateNoResultsMessage," "))))}handleFocusOut(e){setTimeout(()=>{var t;(null===(t=this.host)||void 0===t?void 0:t.contains(document.activeElement))||this.onBlur(e)})}handleWindowBlur(e){this.onBlur(e)}handleKeyDown(e){var t,n;const o=(t,n)=>{var o;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(o=this.refInput)||void 0===o||o.focus()),null==n||n()};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" ":case"Enter":case"NumpadEnter":this._isOpen?this.selectFocusedOption()&&(null===(n=this.refInput)||void 0===n||n.focus(),o(!1)):this.toggleListbox(e);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){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.refOptions=[],this.translateDeleteSelection=translate("kol-delete-selection"),this.translateNoResultsMessage=translate("kol-no-results-message"),this.isClearing=!1,this.setRefInput=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._hasClearButton=!0,this.state={_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_options:[],_hasClearButton:!0},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)}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)}validateHasClearButton(e){this.controller.validateHasClearButton(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 this}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],_hasClearButton:["validateHasClearButton"],_rows:["validateRows"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-single-select",{_accessKey:[1,"_access-key"],_placeholder:[1],_disabled:[4],_hideMsg:[4,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_label:[1],_msg:[1],_name:[1],_on:[16],_options:[1],_required:[4],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1544],_hasClearButton:[4,"_has-clear-button"],_rows:[2],_isOpen:[32],_filteredOptions:[32],_inputValue:[32],blockSuggestionMouseOver:[32],state:[32],inputHasFocus:[32],getValue:[64],focus:[64]},[[0,"focusout","handleFocusOut"],[0,"blur","handleWindowBlur"],[0,"keydown","handleKeyDown"],[1,"mousemove","handleMouseEvent"]],{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],_hasClearButton:["validateHasClearButton"],_rows:["validateRows"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-single-select"].forEach(e=>{if("kol-single-select"===e)customElements.get(e)||customElements.define(e,KolSingleSelect$1)})}const KolSingleSelect=KolSingleSelect$1,defineCustomElement=defineCustomElement$1;export{KolSingleSelect,defineCustomElement};

package/dist/components/kol-skeleton.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,proxyCustomElement,createEvent,Host}from"@stencil/core/internal/client";import{B as BaseController,a as BaseWebComponent}from"./base-web-component.js";import{b as bem}from"./bem-registry.js";import{a as ClickButtonFC,C as ClickButtonController}from"./controller2.js";import{L as Log}from"./common.js";import{c as createPropDefinition,n as normalizeString}from"./normalizers.js";const nameProp=createPropDefinition("name","",normalizeString),skeletonBem=bem.forBlock("kol-skeleton"),BEM_CLASS_SKELETON__ACTIONS=skeletonBem("actions"),BEM_CLASS_SKELETON__CONTAINER=skeletonBem("container"),BEM_CLASS_SKELETON__COUNTER=skeletonBem("counter"),BEM_CLASS_SKELETON__NAME=skeletonBem("name"),SkeletonFC=e=>{const{count:t,label:o,name:n,show:l,handleClick:s,refButton:a}=e,i=!(!l||!(null==n?void 0:n.trim())),r=skeletonBem({"has-name":i,"is-hidden":!l});return h("div",{class:r},h("div",{class:BEM_CLASS_SKELETON__CONTAINER},i&&h("span",{class:BEM_CLASS_SKELETON__NAME},n),h("div",{class:BEM_CLASS_SKELETON__COUNTER},"Count: ",t)),h("div",{class:BEM_CLASS_SKELETON__ACTIONS},h(ClickButtonFC,{label:o,handleClick:s,refButton:a})))},skeletonPropsConfig={required:[nameProp]};class SkeletonController extends BaseController{constructor(e,t){super(skeletonPropsConfig,e,t),this.onKeydown=e=>{"Escape"===e.key&&(console.log("Show should be toggled"),this.toggle())},this.handleClick=()=>{var e,t;Log.debug("Button clicked, count should be increased"),this.setState("count",(null!==(t=null===(e=this.getState)||void 0===e?void 0:e.call(this,"count"))&&void 0!==t?t:0)+1)},this.setButtonRef=e=>{this.clickButtonCtrl.setButtonRef(e)},this.clickButtonCtrl=new ClickButtonController(e,t),this.startLoadedEventInterval()}componentWillLoad(e){const{name:t}=e;this.watchName(t),this.clickButtonCtrl.componentWillLoad({label:"Click me"})}watchName(e){nameProp.apply(e,e=>{this.setRenderProp("name",e)})}toggle(){var e,t;this.setState("show",!(null!==(t=null===(e=this.getState)||void 0===e?void 0:e.call(this,"show"))&&void 0!==t&&t))}focus(){return this.clickButtonCtrl.focus()}startLoadedEventInterval(){this.intervalId=setInterval(()=>{var e,t;this.emitLoaded(null!==(t=null===(e=this.getState)||void 0===e?void 0:e.call(this,"count"))&&void 0!==t?t:0)},2e3)}emitLoaded(e){this.onLoadedCallback&&this.onLoadedCallback(e)}setOnLoadedCallback(e){this.onLoadedCallback=e}destroy(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=void 0)}}const KolSkeleton$1=proxyCustomElement(class extends BaseWebComponent{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow(),this.loaded=createEvent(this,"loaded",7),this.rendered=createEvent(this,"rendered",7),this.ctrl=new SkeletonController(this.setState,this.getState),this.count=0,this.label="Label",this.show=!0}async focus(){return Promise.resolve(this.ctrl.focus())}async toggle(){return Promise.resolve(this.ctrl.toggle())}watchName(e){this.ctrl.watchName(e)}handleKeyDown(e){"Enter"!==e.key&&" "!==e.key||(Log.debug("button pressed"),this.ctrl.handleClick())}onKeydown(e){this.ctrl.onKeydown(e)}componentWillLoad(){this.ctrl.componentWillLoad({name:this._name}),this.ctrl.setOnLoadedCallback(e=>{this.loaded.emit(e)})}componentDidLoad(){requestAnimationFrame(()=>{this.rendered.emit()})}disconnectedCallback(){this.ctrl.destroy()}render(){return h(Host,{key:"a4cd5a83b7fde82f2abfbe4a0cf5a0660286887f"},h(SkeletonFC,{key:"a58cf6291f4fe050b4bb358bf42fc07bb1c44167",count:this.count,label:this.label,name:this.ctrl.getRenderProp("name"),handleClick:()=>this.ctrl.handleClick(),onLoaded:this.loaded,onRendered:this.rendered,show:this.show,refButton:e=>this.ctrl.setButtonRef(e)}))}static get watchers(){return{_name:["watchName"]}}},[769,"kol-skeleton",{_name:[1],count:[32],label:[32],show:[32],focus:[64],toggle:[64]},[[0,"keydown","handleKeyDown"],[8,"keydown","onKeydown"]],{_name:["watchName"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-skeleton"].forEach(e=>{if("kol-skeleton"===e)customElements.get(e)||customElements.define(e,KolSkeleton$1)})}const KolSkeleton=KolSkeleton$1,defineCustomElement=defineCustomElement$1;export{KolSkeleton,defineCustomElement};
+import{h,proxyCustomElement,createEvent,Host}from"@stencil/core/internal/client";import{B as BaseWebComponent}from"./variant-quote.js";import{b as bem}from"./bem-registry.js";import{a as ClickButtonFC,C as ClickButtonController}from"./controller3.js";import{L as Log}from"./common.js";import{c as createPropDefinition,n as normalizeString}from"./normalizers.js";import{B as BaseController}from"./base-controller.js";const nameProp=createPropDefinition("name","",normalizeString),skeletonBem=bem.forBlock("kol-skeleton"),BEM_CLASS_SKELETON__ACTIONS=skeletonBem("actions"),BEM_CLASS_SKELETON__CONTAINER=skeletonBem("container"),BEM_CLASS_SKELETON__COUNTER=skeletonBem("counter"),BEM_CLASS_SKELETON__NAME=skeletonBem("name"),SkeletonFC=e=>{const{count:t,label:o,name:n,show:l,handleClick:s,refButton:a}=e,i=!(!l||!(null==n?void 0:n.trim())),r=skeletonBem({"has-name":i,"is-hidden":!l});return h("div",{class:r},h("div",{class:BEM_CLASS_SKELETON__CONTAINER},i&&h("span",{class:BEM_CLASS_SKELETON__NAME},n),h("div",{class:BEM_CLASS_SKELETON__COUNTER},"Count: ",t)),h("div",{class:BEM_CLASS_SKELETON__ACTIONS},h(ClickButtonFC,{label:o,handleClick:s,refButton:a})))},skeletonPropsConfig={required:[nameProp]};class SkeletonController extends BaseController{constructor(e){super(e,skeletonPropsConfig),this.onKeydown=e=>{"Escape"===e.key&&(console.log("Show should be toggled"),this.toggle())},this.handleClick=()=>{var e,t;Log.debug("Button clicked, count should be increased"),this.setState("count",(null!==(t=null===(e=this.getState)||void 0===e?void 0:e.call(this,"count"))&&void 0!==t?t:0)+1)},this.setButtonRef=e=>{this.clickButtonCtrl.setButtonRef(e)},this.clickButtonCtrl=new ClickButtonController(BaseWebComponent.stateLess),this.startLoadedEventInterval()}componentWillLoad(e){const{name:t}=e;this.watchName(t),this.clickButtonCtrl.componentWillLoad({label:"Click me"})}watchName(e){nameProp.apply(e,e=>{this.setRenderProp("name",e)})}toggle(){var e,t;this.setState("show",!(null!==(t=null===(e=this.getState)||void 0===e?void 0:e.call(this,"show"))&&void 0!==t&&t))}focus(){return this.clickButtonCtrl.focus()}startLoadedEventInterval(){this.intervalId=setInterval(()=>{var e,t;this.emitLoaded(null!==(t=null===(e=this.getState)||void 0===e?void 0:e.call(this,"count"))&&void 0!==t?t:0)},2e3)}emitLoaded(e){this.onLoadedCallback&&this.onLoadedCallback(e)}setOnLoadedCallback(e){this.onLoadedCallback=e}destroy(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=void 0)}}const KolSkeleton$1=proxyCustomElement(class extends BaseWebComponent{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow(),this.loaded=createEvent(this,"loaded",7),this.rendered=createEvent(this,"rendered",7),this.ctrl=new SkeletonController(this.stateAccess),this.count=0,this.label="Label",this.show=!0}async focus(){return Promise.resolve(this.ctrl.focus())}async toggle(){return Promise.resolve(this.ctrl.toggle())}watchName(e){this.ctrl.watchName(e)}handleKeyDown(e){"Enter"!==e.key&&" "!==e.key||(Log.debug("button pressed"),this.ctrl.handleClick())}onKeydown(e){this.ctrl.onKeydown(e)}componentWillLoad(){this.ctrl.componentWillLoad({name:this._name}),this.ctrl.setOnLoadedCallback(e=>{this.loaded.emit(e)})}componentDidLoad(){requestAnimationFrame(()=>{this.rendered.emit()})}disconnectedCallback(){this.ctrl.destroy()}render(){return h(Host,{key:"f2a4c224064b3bc4624fd2fabda937b6b2352ea3"},h(SkeletonFC,{key:"cc357d13f8f484590919da087093a0dc3f82336a",count:this.count,label:this.label,name:this.ctrl.getRenderProp("name"),handleClick:()=>this.ctrl.handleClick(),onLoaded:this.loaded,onRendered:this.rendered,show:this.show,refButton:e=>this.ctrl.setButtonRef(e)}))}static get watchers(){return{_name:["watchName"]}}},[769,"kol-skeleton",{_name:[1],count:[32],label:[32],show:[32],focus:[64],toggle:[64]},[[0,"keydown","handleKeyDown"],[8,"keydown","onKeydown"]],{_name:["watchName"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-skeleton"].forEach(e=>{if("kol-skeleton"===e)customElements.get(e)||customElements.define(e,KolSkeleton$1)})}const KolSkeleton=KolSkeleton$1,defineCustomElement=defineCustomElement$1;export{KolSkeleton,defineCustomElement};

package/dist/components/kol-skeleton.js.map

@@ -1 +1 @@
-{"file":"kol-skeleton.js","mappings":"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","names":["KolSkeleton","__stencil_proxyCustomElement"],"sources":["src/internal/props/name.ts","src/internal/functional-components/skeleton/component.tsx","src/internal/functional-components/skeleton/api.tsx","src/internal/functional-components/skeleton/controller.ts","src/components/_skeleton/web-components/skeleton/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Name prop for form element identification\n *\n * Description:\n * The name attribute identifies form controls for form submission and server-side processing.\n * It associates a control's value with a key when the form is submitted.\n *\n * Usage (according to W3C HTML specification):\n * - Must be a non-empty, unique string within the form context\n * - Used as the key in submitted form data (name=value pairs)\n * - Essential for accessible form handling and assistive technology interaction\n * - Should not be used solely for styling or scripting purposes\n *\n * Accessibility:\n * - Assistive technologies may expose the name to users to help identify form controls\n * - Form controls must be identifiable and operable (WCAG 4.1.2 Name, Role, Value)\n *\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name\n * @see https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html\n */\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>('name', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { bem } from '../../../schema/bem-registry';\nimport { ClickButtonFC } from '../click-button/component';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { SkeletonApi } from './api';\n\nconst skeletonBem = bem.forBlock('kol-skeleton');\nconst BEM_CLASS_SKELETON__ACTIONS = skeletonBem('actions');\nconst BEM_CLASS_SKELETON__CONTAINER = skeletonBem('container');\nconst BEM_CLASS_SKELETON__COUNTER = skeletonBem('counter');\nconst BEM_CLASS_SKELETON__NAME = skeletonBem('name');\n\nexport const SkeletonFC: FC<FunctionalComponentProps<SkeletonApi>> = (props) => {\n\tconst { count, label, name, show, handleClick, refButton } = props;\n\tconst hasName = !!(show && name?.trim());\n\tconst BEM_CLASS_ROOT = skeletonBem({\n\t\t'has-name': hasName,\n\t\t'is-hidden': !show,\n\t});\n\treturn (\n\t\t<div class={BEM_CLASS_ROOT}>\n\t\t\t<div class={BEM_CLASS_SKELETON__CONTAINER}>\n\t\t\t\t{hasName && <span class={BEM_CLASS_SKELETON__NAME}>{name}</span>}\n\t\t\t\t<div class={BEM_CLASS_SKELETON__COUNTER}>Count: {count}</div>\n\t\t\t</div>\n\t\t\t<div class={BEM_CLASS_SKELETON__ACTIONS}>\n\t\t\t\t<ClickButtonFC label={label} handleClick={handleClick} refButton={refButton} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n","import { nameProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const skeletonPropsConfig = {\n\trequired: [nameProp],\n} as const satisfies PropsConfigShape;\n\nexport type SkeletonApi = ApiFromConfig<\n\ttypeof skeletonPropsConfig,\n\t{\n\t\tCallbacks: {\n\t\t\tclick: () => void;\n\t\t};\n\t\tEmitters: {\n\t\t\tloaded: number;\n\t\t\trendered: void;\n\t\t};\n\t\tListeners: {\n\t\t\tkeydown: KeyboardEvent;\n\t\t};\n\t\tMethods: {\n\t\t\tfocus: () => void;\n\t\t\ttoggle: () => void;\n\t\t};\n\t\tRefs: {\n\t\t\tbutton: HTMLButtonElement;\n\t\t};\n\t\tStates: {\n\t\t\tcount: number;\n\t\t\tlabel: string;\n\t\t\tshow: boolean;\n\t\t};\n\t}\n>;\n","import { Log } from '../../../schema';\nimport { nameProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport { ClickButtonController } from '../click-button/controller';\nimport type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';\nimport type { SkeletonApi } from './api';\nimport { skeletonPropsConfig } from './api';\n\nexport class SkeletonController extends BaseController<SkeletonApi> implements ControllerInterface<SkeletonApi> {\n\tprivate readonly clickButtonCtrl: ClickButtonController;\n\tprivate intervalId?: ReturnType<typeof setTimeout>;\n\n\tpublic constructor(setState: SetStateFn<SkeletonApi>, getState: GetStateFn<SkeletonApi>) {\n\t\tsuper(skeletonPropsConfig, setState, getState);\n\n\t\tthis.clickButtonCtrl = new ClickButtonController(setState, getState);\n\t\tthis.startLoadedEventInterval();\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<SkeletonApi>): void {\n\t\tconst { name } = props;\n\t\tthis.watchName(name);\n\n\t\tthis.clickButtonCtrl.componentWillLoad({\n\t\t\tlabel: 'Click me',\n\t\t});\n\t}\n\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('name', v);\n\t\t});\n\t}\n\n\tpublic toggle(): void {\n\t\tthis.setState('show', !(this.getState?.('show') ?? false));\n\t}\n\n\tpublic onKeydown = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.log('Show should be toggled');\n\t\t\tvoid this.toggle();\n\t\t}\n\t};\n\n\tpublic handleClick = (): void => {\n\t\tLog.debug('Button clicked, count should be increased');\n\t\tthis.setState('count', (this.getState?.('count') ?? 0) + 1);\n\t};\n\n\tpublic focus(): void {\n\t\treturn this.clickButtonCtrl.focus();\n\t}\n\n\tpublic setButtonRef = (element?: HTMLButtonElement): void => {\n\t\tthis.clickButtonCtrl.setButtonRef(element);\n\t};\n\n\tprivate startLoadedEventInterval(): void {\n\t\t// Emit loaded event every 2 seconds with current count value\n\t\tthis.intervalId = setInterval(() => {\n\t\t\tthis.emitLoaded(this.getState?.('count') ?? 0);\n\t\t}, 2000);\n\t}\n\n\tprivate emitLoaded(count: number): void {\n\t\t// This method will be used by the web component to emit the loaded event\n\t\t// The web component needs to call this method to actually emit the event\n\t\t// We use a callback approach to let the web component handle the emission\n\t\tif (this.onLoadedCallback) {\n\t\t\tthis.onLoadedCallback(count);\n\t\t}\n\t}\n\n\tprivate onLoadedCallback?: (count: number) => void;\n\n\tpublic setOnLoadedCallback(callback: (count: number) => void): void {\n\t\tthis.onLoadedCallback = callback;\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.intervalId) {\n\t\t\tclearInterval(this.intervalId);\n\t\t\tthis.intervalId = undefined;\n\t\t}\n\t}\n}\n","import type { EventEmitter, JSX } from '@stencil/core';\nimport { Component, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { SkeletonApi } from '../../../../internal/functional-components/skeleton/api';\nimport { SkeletonFC } from '../../../../internal/functional-components/skeleton/component';\nimport { SkeletonController } from '../../../../internal/functional-components/skeleton/controller';\nimport { Log } from '../../../../schema';\n\n@Component({\n\ttag: 'kol-skeleton',\n\tshadow: true,\n})\nexport class KolSkeleton extends BaseWebComponent<SkeletonApi> implements WebComponentInterface<SkeletonApi> {\n\tprivate readonly ctrl = new SkeletonController(this.setState, this.getState);\n\n\t/**\n\t * Focuses the interactive element of the component.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.focus());\n\t}\n\n\t/**\n\t * Toggles the visibility of the skeleton component.\n\t */\n\t@Method()\n\tpublic async toggle(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.toggle());\n\t}\n\n\t/**\n\t * Sets the name of the skeleton component.\n\t */\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\t@State()\n\tpublic count: number = 0;\n\n\t@State()\n\tpublic label: string = 'Label';\n\n\t@State()\n\tpublic show: boolean = true;\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent): void {\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tLog.debug('button pressed');\n\t\t\tthis.ctrl.handleClick();\n\t\t}\n\t}\n\n\t/**\n\t * Emitted when the skeleton has finished loading.\n\t */\n\t@Event() public loaded!: EventEmitter<number>;\n\n\t/**\n\t * Emitted when the skeleton has been rendered for the first time.\n\t */\n\t@Event() public rendered!: EventEmitter<void>;\n\n\t@Listen('keydown', { target: 'window' })\n\tpublic onKeydown(event: KeyboardEvent): void {\n\t\tthis.ctrl.onKeydown(event);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tname: this._name,\n\t\t});\n\n\t\t// Set up the callback for emitting loaded events\n\t\tthis.ctrl.setOnLoadedCallback((count: number) => {\n\t\t\tthis.loaded.emit(count);\n\t\t});\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.rendered.emit();\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<SkeletonFC\n\t\t\t\t\tcount={this.count}\n\t\t\t\t\tlabel={this.label}\n\t\t\t\t\tname={this.ctrl.getRenderProp('name')}\n\t\t\t\t\thandleClick={() => this.ctrl.handleClick()}\n\t\t\t\t\tonLoaded={this.loaded}\n\t\t\t\t\tonRendered={this.rendered}\n\t\t\t\t\tshow={this.show}\n\t\t\t\t\trefButton={(element) => this.ctrl.setButtonRef(element)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-skeleton.js","mappings":"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","names":["KolSkeleton","__stencil_proxyCustomElement"],"sources":["src/internal/props/name.ts","src/internal/functional-components/skeleton/component.tsx","src/internal/functional-components/skeleton/api.tsx","src/internal/functional-components/skeleton/controller.ts","src/components/_skeleton/web-components/skeleton/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Name prop for form element identification\n *\n * Description:\n * The name attribute identifies form controls for form submission and server-side processing.\n * It associates a control's value with a key when the form is submitted.\n *\n * Usage (according to W3C HTML specification):\n * - Must be a non-empty, unique string within the form context\n * - Used as the key in submitted form data (name=value pairs)\n * - Essential for accessible form handling and assistive technology interaction\n * - Should not be used solely for styling or scripting purposes\n *\n * Accessibility:\n * - Assistive technologies may expose the name to users to help identify form controls\n * - Form controls must be identifiable and operable (WCAG 4.1.2 Name, Role, Value)\n *\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name\n * @see https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html\n */\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>('name', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { bem } from '../../../schema/bem-registry';\nimport { ClickButtonFC } from '../click-button/component';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { SkeletonApi } from './api';\n\nconst skeletonBem = bem.forBlock('kol-skeleton');\nconst BEM_CLASS_SKELETON__ACTIONS = skeletonBem('actions');\nconst BEM_CLASS_SKELETON__CONTAINER = skeletonBem('container');\nconst BEM_CLASS_SKELETON__COUNTER = skeletonBem('counter');\nconst BEM_CLASS_SKELETON__NAME = skeletonBem('name');\n\nexport const SkeletonFC: FC<FunctionalComponentProps<SkeletonApi>> = (props) => {\n\tconst { count, label, name, show, handleClick, refButton } = props;\n\tconst hasName = !!(show && name?.trim());\n\tconst BEM_CLASS_ROOT = skeletonBem({\n\t\t'has-name': hasName,\n\t\t'is-hidden': !show,\n\t});\n\treturn (\n\t\t<div class={BEM_CLASS_ROOT}>\n\t\t\t<div class={BEM_CLASS_SKELETON__CONTAINER}>\n\t\t\t\t{hasName && <span class={BEM_CLASS_SKELETON__NAME}>{name}</span>}\n\t\t\t\t<div class={BEM_CLASS_SKELETON__COUNTER}>Count: {count}</div>\n\t\t\t</div>\n\t\t\t<div class={BEM_CLASS_SKELETON__ACTIONS}>\n\t\t\t\t<ClickButtonFC label={label} handleClick={handleClick} refButton={refButton} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n","import { nameProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const skeletonPropsConfig = {\n\trequired: [nameProp],\n} as const satisfies PropsConfigShape;\n\nexport type SkeletonApi = ApiFromConfig<\n\ttypeof skeletonPropsConfig,\n\t{\n\t\tCallbacks: {\n\t\t\tclick: () => void;\n\t\t};\n\t\tEmitters: {\n\t\t\tloaded: number;\n\t\t\trendered: void;\n\t\t};\n\t\tListeners: {\n\t\t\tkeydown: KeyboardEvent;\n\t\t};\n\t\tMethods: {\n\t\t\tfocus: () => void;\n\t\t\ttoggle: () => void;\n\t\t};\n\t\tRefs: {\n\t\t\tbutton: HTMLButtonElement;\n\t\t};\n\t\tStates: {\n\t\t\tcount: number;\n\t\t\tlabel: string;\n\t\t\tshow: boolean;\n\t\t};\n\t}\n>;\n","import { Log } from '../../../schema';\nimport { nameProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport { BaseWebComponent } from '../base-web-component';\nimport { ClickButtonController } from '../click-button/controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { SkeletonApi } from './api';\nimport { skeletonPropsConfig } from './api';\n\nexport class SkeletonController extends BaseController<SkeletonApi> implements ControllerInterface<SkeletonApi> {\n\tprivate readonly clickButtonCtrl: ClickButtonController;\n\tprivate intervalId?: ReturnType<typeof setTimeout>;\n\n\tpublic constructor(stateAccess: StateAccess<SkeletonApi>) {\n\t\tsuper(stateAccess, skeletonPropsConfig);\n\n\t\tthis.clickButtonCtrl = new ClickButtonController(BaseWebComponent.stateLess);\n\t\tthis.startLoadedEventInterval();\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<SkeletonApi>): void {\n\t\tconst { name } = props;\n\t\tthis.watchName(name);\n\n\t\tthis.clickButtonCtrl.componentWillLoad({\n\t\t\tlabel: 'Click me',\n\t\t});\n\t}\n\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('name', v);\n\t\t});\n\t}\n\n\tpublic toggle(): void {\n\t\tthis.setState('show', !(this.getState?.('show') ?? false));\n\t}\n\n\tpublic onKeydown = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.log('Show should be toggled');\n\t\t\tvoid this.toggle();\n\t\t}\n\t};\n\n\tpublic handleClick = (): void => {\n\t\tLog.debug('Button clicked, count should be increased');\n\t\tthis.setState('count', (this.getState?.('count') ?? 0) + 1);\n\t};\n\n\tpublic focus(): void {\n\t\treturn this.clickButtonCtrl.focus();\n\t}\n\n\tpublic setButtonRef = (element?: HTMLButtonElement): void => {\n\t\tthis.clickButtonCtrl.setButtonRef(element);\n\t};\n\n\tprivate startLoadedEventInterval(): void {\n\t\t// Emit loaded event every 2 seconds with current count value\n\t\tthis.intervalId = setInterval(() => {\n\t\t\tthis.emitLoaded(this.getState?.('count') ?? 0);\n\t\t}, 2000);\n\t}\n\n\tprivate emitLoaded(count: number): void {\n\t\t// This method will be used by the web component to emit the loaded event\n\t\t// The web component needs to call this method to actually emit the event\n\t\t// We use a callback approach to let the web component handle the emission\n\t\tif (this.onLoadedCallback) {\n\t\t\tthis.onLoadedCallback(count);\n\t\t}\n\t}\n\n\tprivate onLoadedCallback?: (count: number) => void;\n\n\tpublic setOnLoadedCallback(callback: (count: number) => void): void {\n\t\tthis.onLoadedCallback = callback;\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.intervalId) {\n\t\t\tclearInterval(this.intervalId);\n\t\t\tthis.intervalId = undefined;\n\t\t}\n\t}\n}\n","import type { EventEmitter, JSX } from '@stencil/core';\nimport { Component, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { SkeletonApi } from '../../../../internal/functional-components/skeleton/api';\nimport { SkeletonFC } from '../../../../internal/functional-components/skeleton/component';\nimport { SkeletonController } from '../../../../internal/functional-components/skeleton/controller';\nimport { Log } from '../../../../schema';\n\n@Component({\n\ttag: 'kol-skeleton',\n\tshadow: true,\n})\nexport class KolSkeleton extends BaseWebComponent<SkeletonApi> implements WebComponentInterface<SkeletonApi> {\n\tprivate readonly ctrl = new SkeletonController(this.stateAccess);\n\n\t/**\n\t * Focuses the interactive element of the component.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.focus());\n\t}\n\n\t/**\n\t * Toggles the visibility of the skeleton component.\n\t */\n\t@Method()\n\tpublic async toggle(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.toggle());\n\t}\n\n\t/**\n\t * Sets the name of the skeleton component.\n\t */\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\t@State()\n\tpublic count: number = 0;\n\n\t@State()\n\tpublic label: string = 'Label';\n\n\t@State()\n\tpublic show: boolean = true;\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent): void {\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tLog.debug('button pressed');\n\t\t\tthis.ctrl.handleClick();\n\t\t}\n\t}\n\n\t/**\n\t * Emitted when the skeleton has finished loading.\n\t */\n\t@Event() public loaded!: EventEmitter<number>;\n\n\t/**\n\t * Emitted when the skeleton has been rendered for the first time.\n\t */\n\t@Event() public rendered!: EventEmitter<void>;\n\n\t@Listen('keydown', { target: 'window' })\n\tpublic onKeydown(event: KeyboardEvent): void {\n\t\tthis.ctrl.onKeydown(event);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tname: this._name,\n\t\t});\n\n\t\t// Set up the callback for emitting loaded events\n\t\tthis.ctrl.setOnLoadedCallback((count: number) => {\n\t\t\tthis.loaded.emit(count);\n\t\t});\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.rendered.emit();\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<SkeletonFC\n\t\t\t\t\tcount={this.count}\n\t\t\t\t\tlabel={this.label}\n\t\t\t\t\tname={this.ctrl.getRenderProp('name')}\n\t\t\t\t\thandleClick={() => this.ctrl.handleClick()}\n\t\t\t\t\tonLoaded={this.loaded}\n\t\t\t\t\tonRendered={this.rendered}\n\t\t\t\t\tshow={this.show}\n\t\t\t\t\trefButton={(element) => this.ctrl.setButtonRef(element)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-skip-nav.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import"./common.js";import{v as validateLabel}from"./label.js";import{d as delegateFocus,s as setFocus}from"./element-focus.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{d as KolLinkWcTag}from"./component-names.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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774956515321"); /* IE9*/\n  src: url("kolicons.eot?t=1774956515321#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774956515321") format("woff2"), url("kolicons.woff?t=1774956515321") format("woff"), url("kolicons.ttf?t=1774956515321") format("truetype"), url("kolicons.svg?t=1774956515321#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n  }\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$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.state={_label:"",_links:[]}}render(){return h("nav",{key:"fb78bd85272a94014a392cd1861dd537b44a25d7",class:"kol-skip-nav","aria-label":this.state._label},h("ul",{key:"dd649083287a7bda7e0e74e2aa9e0f44b15597b5",class:"kol-skip-nav__list"},this.state._links.map((n,e)=>h("li",{class:"kol-skip-nav__list-item",key:e},h(KolLinkWcTag,Object.assign({},n,{ref:0===e?n=>this.firstLinkRef=n:void 0}))))))}async focus(){return delegateFocus(this.host,()=>setFocus(this.firstLinkRef))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}get host(){return this}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-skip-nav",{_label:[1],_links:[1],state:[32],focus:[64]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-skip-nav"].forEach(n=>{if("kol-skip-nav"===n)customElements.get(n)||customElements.define(n,KolSkipNav$1)})}const KolSkipNav=KolSkipNav$1,defineCustomElement=defineCustomElement$1;export{KolSkipNav,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import"./common.js";import{v as validateLabel}from"./label.js";import{d as delegateFocus,s as setFocus}from"./element-focus.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{c as KolLinkWcTag}from"./component-names.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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775118370120"); /* IE9*/\n  src: url("kolicons.eot?t=1775118370120#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775118370120") format("woff2"), url("kolicons.woff?t=1775118370120") format("woff"), url("kolicons.ttf?t=1775118370120") format("truetype"), url("kolicons.svg?t=1775118370120#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n  }\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$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.state={_label:"",_links:[]}}render(){return h("nav",{key:"a56ef3396c25c0bb475650761bf84aabd4c4a82b",class:"kol-skip-nav","aria-label":this.state._label},h("ul",{key:"b802043cea05ec217c560be348ac193d49e86d9b",class:"kol-skip-nav__list"},this.state._links.map((n,e)=>h("li",{class:"kol-skip-nav__list-item",key:e},h(KolLinkWcTag,Object.assign({},n,{ref:0===e?n=>this.firstLinkRef=n:void 0}))))))}async focus(){return delegateFocus(this.host,()=>setFocus(this.firstLinkRef))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}get host(){return this}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-skip-nav",{_label:[1],_links:[1],state:[32],focus:[64]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-skip-nav"].forEach(n=>{if("kol-skip-nav"===n)customElements.get(n)||customElements.define(n,KolSkipNav$1)})}const KolSkipNav=KolSkipNav$1,defineCustomElement=defineCustomElement$1;export{KolSkipNav,defineCustomElement};

package/dist/components/kol-spin.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{d as watchBoolean,b as watchValidator}from"./common.js";import{v as validateLabel}from"./label.js";import{t as translate}from"./i18n.js";import{c as clsx}from"./clsx.js";const validateShow=(n,e,t)=>{watchBoolean(n,"_show",e,t)},spinVariantPropTypeOptions=["cycle","dot","none"],validateSpinVariant=(n,e)=>{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  .hastooltip {\n    z-index: 900 !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 !important;\n    }\n    .kol-spin__loader::before {\n      animation-duration: 6s !important;\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 !important;\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  }\n}";function renderSpin(n){switch(n){case"cycle":return h("span",{class:"kol-spin__loader"});case"none":return h("slot",{name:"expert"});default:return h(Fragment,null,h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const KolSpin$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.showToggled=!1,this.translateActionRunning=translate("kol-action-running"),this.translateActionDone=translate("kol-action-done"),this._show=!1,this._variant="dot",this.state={_variant:"dot",_label:void 0}}render(){var n,e;return h(Host,{key:"e4708339e1a6ba6a76cbfc9919172d757deeaf73",class:"kol-spin"},this.state._show?h(Fragment,null,h("span",{class:clsx("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`)},renderSpin(this.state._variant)),h("span",{"aria-busy":"true",class:"visually-hidden",role:"alert"},null!==(n=this.state._label)&&void 0!==n?n:this.translateActionRunning)):this.showToggled&&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,validateShow(this,n)}validateLabel(n){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"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-spin",{_show:[1540],_label:[1],_variant:[1],state:[32]},void 0,{_show:["validateShow"],_label:["validateLabel"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-spin"].forEach(n=>{if("kol-spin"===n)customElements.get(n)||customElements.define(n,KolSpin$1)})}const KolSpin=KolSpin$1,defineCustomElement=defineCustomElement$1;export{KolSpin,defineCustomElement};
+import{h,Fragment,proxyCustomElement,Host}from"@stencil/core/internal/client";import{B as BaseWebComponent}from"./variant-quote.js";import{t as translate}from"./i18n.js";import"./common.js";import{l as labelProp}from"./label2.js";import{c as createPropDefinition,e as normalizeBoolean,n as normalizeString}from"./normalizers.js";import{B as BaseController}from"./base-controller.js";const showProp=createPropDefinition("show",!1,normalizeBoolean),spinVariantOptions=["dot","cycle","none"],variantSpinProp=createPropDefinition("variant","dot",n=>{const e=normalizeString(n);if(spinVariantOptions.includes(e))return e;throw new Error(`Invalid spin variant: ${e}`)},()=>!0);function renderSpinVariant(n){switch(n){case"cycle":return h("span",{class:"kol-spin__loader"});case"none":return h("slot",{name:"expert"});default:return h(Fragment,null,h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const SpinFC=n=>{const{show:e,label:t,variant:o,showToggled:i,handleGetTranslateActionRunning:a,handleGetTranslateActionDone:r}=n;return h(Fragment,null,e?h(Fragment,null,h("span",{class:`kol-spin__spinner kol-spin__spinner--${o}`},renderSpinVariant(o)),h("span",{"aria-busy":"true",class:"visually-hidden",role:"alert"},t||a())):i&&h("span",{"aria-busy":"false",class:"visually-hidden",role:"alert"},t||r()))},spinPropsConfig={optional:[labelProp,showProp,variantSpinProp]};class SpinController extends BaseController{constructor(n){super(n,spinPropsConfig),this.translateActionRunning=translate("kol-action-running"),this.translateActionDone=translate("kol-action-done"),this.handleGetTranslateActionRunning=()=>this.translateActionRunning,this.handleGetTranslateActionDone=()=>this.translateActionDone}componentWillLoad(n){const{show:e,label:t,variant:o}=n;this.watchShow(e),this.watchLabel(t),this.watchVariant(o)}watchShow(n){showProp.apply(n,n=>{const e=this.getRenderProp("show");this.setRenderProp("show",n),this.setState("showToggled",!0===e&&!1===n)})}watchLabel(n){labelProp.apply(n,n=>{this.setRenderProp("label",n)})}watchVariant(n){variantSpinProp.apply(n,n=>{this.setRenderProp("variant",n)})}}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  .hastooltip {\n    z-index: 900 !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 !important;\n    }\n    .kol-spin__loader::before {\n      animation-duration: 6s !important;\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 !important;\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  }\n}",KolSpin$1=proxyCustomElement(class extends BaseWebComponent{constructor(n){super(!1),!1!==n&&this.__registerHost(),this.__attachShadow(),this.ctrl=new SpinController(this.stateAccess),this.showToggled=!1}watchShow(n){this.ctrl.watchShow(n)}watchLabel(n){this.ctrl.watchLabel(n)}watchVariant(n){this.ctrl.watchVariant(n)}componentWillLoad(){this.ctrl.componentWillLoad({show:this._show,label:this._label,variant:this._variant})}render(){return h(Host,{key:"7379c127d8a30dc2175e50e2f7adaa45d4986a35"},h(SpinFC,{key:"3a1c04436cb10bbedf94b1ed83ebd4e3d8e93c75",show:this.ctrl.getRenderProp("show"),label:this.ctrl.getRenderProp("label"),variant:this.ctrl.getRenderProp("variant"),showToggled:this.showToggled,handleGetTranslateActionRunning:this.ctrl.handleGetTranslateActionRunning,handleGetTranslateActionDone:this.ctrl.handleGetTranslateActionDone}))}static get watchers(){return{_show:["watchShow"],_label:["watchLabel"],_variant:["watchVariant"]}}static get style(){return{default:defaultStyleCss}}},[801,"kol-spin",{_show:[4],_label:[1],_variant:[1],showToggled:[32]},void 0,{_show:["watchShow"],_label:["watchLabel"],_variant:["watchVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-spin"].forEach(n=>{if("kol-spin"===n)customElements.get(n)||customElements.define(n,KolSpin$1)})}const KolSpin=KolSpin$1,defineCustomElement=defineCustomElement$1;export{KolSpin,defineCustomElement};

package/dist/components/kol-spin.js.map

@@ -1 +1 @@
-{"file":"kol-spin.js","mappings":"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","names":["KolSpin","__stencil_proxyCustomElement"],"sources":["src/schema/props/show.ts","src/schema/props/variant/spin.ts","src/components/spin/style.scss?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type ShowPropType = boolean;\n\n/**\n * Makes the element show up.\n */\nexport type PropShow = {\n\tshow: ShowPropType;\n};\n\n/* validator */\nexport const validateShow = (component: Generic.Element.Component, value?: ShowPropType, hooks?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_show', value, hooks);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\n/**\n * Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n */\nconst spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const;\nexport type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number];\n\n/**\n * Defines the variant of spin navigation.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value),\n\t\tnew Set(spinVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use './cycle' as *;\n@use './dot' as *;\n\n@layer kol-component {\n\t.kol-spin {\n\t\t&__spinner {\n\t\t\tdisplay: block;\n\t\t\tposition: relative;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { validateLabel, validateShow, validateSpinVariant } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport type { LabelPropType, ShowPropType, SpinAPI, SpinStates, SpinVariantPropType } from '../../schema';\nimport clsx from '../../utils/clsx';\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"kol-spin__loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--1\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--2\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--3\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--neutral\"></span>\n\t\t\t\t</>\n\t\t\t);\n\t}\n}\n\n/**\n * The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation.\n *\n * @slot expert - Custom content displayed when the variant is set to `none`.\n */\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements SpinAPI {\n\tprivate showToggled = false;\n\tprivate readonly translateActionRunning = translate('kol-action-running');\n\tprivate readonly translateActionDone = translate('kol-action-done');\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-spin\">\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<span class={clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`)}>{renderSpin(this.state._variant)}</span>\n\t\t\t\t\t\t<span aria-busy=\"true\" class=\"visually-hidden\" role=\"alert\">\n\t\t\t\t\t\t\t{this.state._label ?? this.translateActionRunning}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Fragment>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && (\n\t\t\t\t\t\t<span aria-busy=\"false\" class=\"visually-hidden\" role=\"alert\">\n\t\t\t\t\t\t\t{this.state._label ?? this.translateActionDone}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: SpinStates = {\n\t\t_variant: 'dot',\n\t\t_label: undefined,\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}
+{"file":"kol-spin.js","mappings":"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","names":["KolSpin","__stencil_proxyCustomElement"],"sources":["src/internal/props/show.ts","src/internal/props/variant-spin.ts","src/internal/functional-components/spin/component.tsx","src/internal/functional-components/spin/api.tsx","src/internal/functional-components/spin/controller.ts","src/components/spin/style.scss?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeBoolean } from './helpers/normalizers';\n\n/**\n * Show prop for toggling element visibility\n *\n * Description:\n * Controls whether a component is visible or hidden. The visibility state must be\n * communicated to assistive technologies so screen reader users understand which\n * content is currently perceivable.\n *\n * Usage (according to WCAG 2.1 and WAI-ARIA):\n * - Hidden content must be correctly excluded from the accessibility tree (aria-hidden)\n * - Toggling visibility should update aria-expanded on the controlling element (WCAG 4.1.2 Name, Role, Value)\n * - Content that appears or disappears must not trap keyboard focus (WCAG 2.1.2 No Keyboard Trap)\n * - Dynamic content changes should be announced to screen readers when appropriate (WCAG 4.1.3 Status Messages)\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-hidden\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-expanded\n * @see https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html\n */\nexport type ShowProp = SimpleProp<'show', boolean>;\nexport const showProp = createPropDefinition<ShowProp>('show', false, normalizeBoolean);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for spin display style\n *\n * Description:\n * Determines the visual presentation of a loading spinner. The component communicates\n * loading state through visual animation and aria-busy to assistive technologies.\n *\n * Usage (according to WAI-ARIA):\n * - \"dot\": Animated dots spinner (default)\n * - \"cycle\": Rotating cycle animation\n * - \"none\": Custom content via expert slot\n * - The visual variant choice is presentation-only and does not affect the accessible semantics\n *\n * Accessibility:\n * - Loading state must be announced via aria-busy (WCAG 4.1.3 Status Messages)\n * - The spinner animation must respect prefers-reduced-motion (WCAG 2.3.3 Animation from Interactions)\n * - Completion must be announced when show transitions to false (WCAG 4.1.3 Status Messages)\n *\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-busy\n * @see https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html\n */\nexport const spinVariantOptions = ['dot', 'cycle', 'none'] as const;\nexport type SpinVariantType = (typeof spinVariantOptions)[number];\n\nexport type VariantSpinProp = SimpleProp<'variant', SpinVariantType>;\nexport const variantSpinProp = createPropDefinition<VariantSpinProp>(\n\t'variant',\n\t'dot',\n\t(value: unknown) => {\n\t\tconst str = normalizeString(value);\n\t\tif (spinVariantOptions.includes(str as SpinVariantType)) {\n\t\t\treturn str as SpinVariantType;\n\t\t}\n\t\tthrow new Error(`Invalid spin variant: ${str}`);\n\t},\n\t() => true,\n);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { Fragment, h } from '@stencil/core';\n\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { SpinApi } from './api';\n\nfunction renderSpinVariant(variant: string): unknown {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"kol-spin__loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--1\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--2\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--3\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--neutral\"></span>\n\t\t\t\t</>\n\t\t\t);\n\t}\n}\n\nexport const SpinFC: FC<FunctionalComponentProps<SpinApi>> = (props) => {\n\tconst { show, label, variant, showToggled, handleGetTranslateActionRunning, handleGetTranslateActionDone } = props;\n\n\treturn (\n\t\t<Fragment>\n\t\t\t{show ? (\n\t\t\t\t<Fragment>\n\t\t\t\t\t<span class={`kol-spin__spinner kol-spin__spinner--${variant}`}>{renderSpinVariant(variant)}</span>\n\t\t\t\t\t<span aria-busy=\"true\" class=\"visually-hidden\" role=\"alert\">\n\t\t\t\t\t\t{label || handleGetTranslateActionRunning()}\n\t\t\t\t\t</span>\n\t\t\t\t</Fragment>\n\t\t\t) : (\n\t\t\t\tshowToggled && (\n\t\t\t\t\t<span aria-busy=\"false\" class=\"visually-hidden\" role=\"alert\">\n\t\t\t\t\t\t{label || handleGetTranslateActionDone()}\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t)}\n\t\t</Fragment>\n\t);\n};\n","import { labelProp, showProp, variantSpinProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const spinPropsConfig = {\n\toptional: [labelProp, showProp, variantSpinProp],\n} as const satisfies PropsConfigShape;\n\nexport type SpinApi = ApiFromConfig<\n\ttypeof spinPropsConfig,\n\t{\n\t\tStates: {\n\t\t\tshowToggled: boolean;\n\t\t};\n\t\tCallbacks: {\n\t\t\tgetTranslateActionRunning: () => string;\n\t\t\tgetTranslateActionDone: () => string;\n\t\t};\n\t}\n>;\n","import { translate } from '../../../i18n';\nimport { labelProp, showProp, variantSpinProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { SpinApi } from './api';\nimport { spinPropsConfig } from './api';\n\nexport class SpinController extends BaseController<SpinApi> implements ControllerInterface<SpinApi> {\n\tprivate readonly translateActionRunning: string = translate('kol-action-running');\n\tprivate readonly translateActionDone: string = translate('kol-action-done');\n\n\tpublic constructor(stateAccess: StateAccess<SpinApi>) {\n\t\tsuper(stateAccess, spinPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<SpinApi>): void {\n\t\tconst { show, label, variant } = props;\n\t\tthis.watchShow(show);\n\t\tthis.watchLabel(label);\n\t\tthis.watchVariant(variant);\n\t}\n\n\tpublic watchShow(value?: boolean): void {\n\t\tshowProp.apply(value, (v) => {\n\t\t\tconst previousShow = this.getRenderProp('show');\n\t\t\tthis.setRenderProp('show', v);\n\t\t\t// Emit done state only when the spinner toggles from visible to hidden,\n\t\t\t// so screen readers receive a completion announcement once.\n\t\t\tthis.setState('showToggled', previousShow === true && v === false);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchVariant(value?: unknown): void {\n\t\tvariantSpinProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('variant', v);\n\t\t});\n\t}\n\n\tpublic handleGetTranslateActionRunning = (): string => {\n\t\treturn this.translateActionRunning;\n\t};\n\n\tpublic handleGetTranslateActionDone = (): string => {\n\t\treturn this.translateActionDone;\n\t};\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use './cycle' as *;\n@use './dot' as *;\n\n@layer kol-component {\n\t.kol-spin {\n\t\t&__spinner {\n\t\t\tdisplay: block;\n\t\t\tposition: relative;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { SpinApi } from '../../internal/functional-components/spin/api';\nimport { SpinFC } from '../../internal/functional-components/spin/component';\nimport { SpinController } from '../../internal/functional-components/spin/controller';\nimport type { SpinVariantType } from '../../internal/props/variant-spin';\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin extends BaseWebComponent<SpinApi> implements WebComponentInterface<SpinApi> {\n\tprivate readonly ctrl = new SpinController(this.stateAccess);\n\n\t/**\n\t * Makes the element show up.\n\t */\n\t@Prop()\n\tpublic _show?: boolean;\n\n\t@Watch('_show')\n\tpublic watchShow(value?: boolean): void {\n\t\tthis.ctrl.watchShow(value);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: SpinVariantType;\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: SpinVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\t@State()\n\tpublic showToggled: boolean = false;\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tshow: this._show,\n\t\t\tlabel: this._label,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<SpinFC\n\t\t\t\t\tshow={this.ctrl.getRenderProp('show')}\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t\tshowToggled={this.showToggled}\n\t\t\t\t\thandleGetTranslateActionRunning={this.ctrl.handleGetTranslateActionRunning}\n\t\t\t\t\thandleGetTranslateActionDone={this.ctrl.handleGetTranslateActionDone}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-split-button.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as KolButtonWcTag,j as KolPopoverButtonWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{c as clsx}from"./clsx.js";import{d as delegateClick,s as setClick}from"./element-click.js";import{d as delegateFocus,s as setFocus}from"./element-focus.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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774956515321"); /* IE9*/\n  src: url("kolicons.eot?t=1774956515321#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774956515321") format("woff2"), url("kolicons.woff?t=1774956515321") format("woff"), url("kolicons.ttf?t=1774956515321") format("truetype"), url("kolicons.svg?t=1774956515321#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover {\n    opacity: 0;\n    transition: 0.2s ease-out opacity;\n  }\n  .kol-popover-button--open + .kol-popover {\n    opacity: 1;\n  }\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}',KolSplitButton$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.setPrimaryButtonWcRef=n=>{this.primaryButtonWcRef=n},this.setPopoverButtonRef=n=>{this.popoverButtonRef=n},this.clickButtonHandler={onClick:n=>{var e,t;n.stopPropagation(),"function"==typeof(null===(e=this._on)||void 0===e?void 0:e.onClick)&&(null===(t=this._on)||void 0===t||t.onClick(n,this._value))}},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(){return delegateFocus(this.host,()=>setFocus(this.primaryButtonWcRef))}async click(){return delegateClick(this.host,async()=>setClick(this.primaryButtonWcRef))}render(){return h("div",{key:"820648dab75c76be9cf3eadb56669d82dc2975ff",class:"kol-split-button"},h("div",{key:"cd6be72214ed7984acfa9b68bb7b47751666ebc8",class:"kol-split-button__root"},h(KolButtonWcTag,{key:"87ce8f6b04fc1fad065571c4a06eef38527bb210",class: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.setPrimaryButtonWcRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_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,_variant:this._variant}),h("div",{key:"3e489ad1467385e74c54d83e71097da750d4e00a",class:"kol-split-button__horizontal-line"}),h(KolPopoverButtonWcTag,{key:"fee80fd1e483b7bcf55c35eab33864bc7585e73b",class:"kol-split-button__secondary-button",ref:this.setPopoverButtonRef,_disabled:this._disabled,_hideLabel:!0,_icons:"kolicon-chevron-down",_label:translate("kol-split-button-dropdown-label-open"),_popoverAlign:"bottom"},h("slot",{key:"1702aba062cab0e0d7a453cb475973beff38c180"}))))}connectedCallback(){this.state=Object.assign(Object.assign({},this.state),{_show:!1})}async closePopup(){var n;return null===(n=this.popoverButtonRef)||void 0===n||n.hidePopover(),Promise.resolve()}get host(){return this}static get style(){return{default:defaultStyleCss}}},[289,"kol-split-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],state:[32],getValue:[64],focus:[64],click:[64],closePopup:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-split-button"].forEach(n=>{if("kol-split-button"===n)customElements.get(n)||customElements.define(n,KolSplitButton$1)})}const KolSplitButton=KolSplitButton$1,defineCustomElement=defineCustomElement$1;export{KolSplitButton,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{b as KolButtonWcTag,i as KolPopoverButtonWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{c as clsx}from"./clsx.js";import{d as delegateClick,s as setClick}from"./element-click.js";import{d as delegateFocus,s as setFocus}from"./element-focus.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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775118370120"); /* IE9*/\n  src: url("kolicons.eot?t=1775118370120#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775118370120") format("woff2"), url("kolicons.woff?t=1775118370120") format("woff"), url("kolicons.ttf?t=1775118370120") format("truetype"), url("kolicons.svg?t=1775118370120#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover {\n    opacity: 0;\n    transition: 0.2s ease-out opacity;\n  }\n  .kol-popover-button--open + .kol-popover {\n    opacity: 1;\n  }\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}',KolSplitButton$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.setPrimaryButtonWcRef=n=>{this.primaryButtonWcRef=n},this.setPopoverButtonRef=n=>{this.popoverButtonRef=n},this.clickButtonHandler={onClick:n=>{var e,t;n.stopPropagation(),"function"==typeof(null===(e=this._on)||void 0===e?void 0:e.onClick)&&(null===(t=this._on)||void 0===t||t.onClick(n,this._value))}},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(){return delegateFocus(this.host,()=>setFocus(this.primaryButtonWcRef))}async click(){return delegateClick(this.host,async()=>setClick(this.primaryButtonWcRef))}render(){return h("div",{key:"a100f40b72f074e270d6299ea75c9ce330e211a4",class:"kol-split-button"},h("div",{key:"3cb78b0a115b0e22c96e0520e443f92e264ec958",class:"kol-split-button__root"},h(KolButtonWcTag,{key:"d34c2a68c9b2bd3206568dc2edd71d4a3973eaa2",class: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.setPrimaryButtonWcRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_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,_variant:this._variant}),h("div",{key:"65bf1c6850f239112a949b6d72c597f51cb74008",class:"kol-split-button__horizontal-line"}),h(KolPopoverButtonWcTag,{key:"530a76aaeb5588f644d7d4fd8a102dbab469866f",class:"kol-split-button__secondary-button",ref:this.setPopoverButtonRef,_disabled:this._disabled,_hideLabel:!0,_icons:"kolicon-chevron-down",_label:translate("kol-split-button-dropdown-label-open"),_popoverAlign:"bottom"},h("slot",{key:"abae13b1f8a6c3331fb09b54f4775dfacd0725d6"}))))}connectedCallback(){this.state=Object.assign(Object.assign({},this.state),{_show:!1})}async closePopup(){var n;return null===(n=this.popoverButtonRef)||void 0===n||n.hidePopover(),Promise.resolve()}get host(){return this}static get style(){return{default:defaultStyleCss}}},[289,"kol-split-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],state:[32],getValue:[64],focus:[64],click:[64],closePopup:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-split-button"].forEach(n=>{if("kol-split-button"===n)customElements.get(n)||customElements.define(n,KolSplitButton$1)})}const KolSplitButton=KolSplitButton$1,defineCustomElement=defineCustomElement$1;export{KolSplitButton,defineCustomElement};

package/dist/components/kol-table-settings-wc.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{_ as __rest}from"./tslib.es6.js";import{j as KolPopoverButtonWcTag,l as KolHeadingTag,b as KolAlertWcTag,m as KolInputCheckboxTag,n as KolInputNumberTag,c as KolButtonWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";const parseColumnWidth=e=>Number.isFinite(e)&&void 0!==e&&e>0?e:void 0,KolTableSettings=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.headerCells=[],this.editingHeaderCells=[],this.errorMessage=null,this.translateTableSettings=translate("kol-table-settings"),this.translateTableSettingsCancel=translate("kol-table-settings-cancel"),this.translateTableSettingsApply=translate("kol-table-settings-apply"),this.translateErrorAllInvisible=translate("kol-table-settings-error-all-invisible"),this.translateColumnNotHidable=translate("kol-table-settings-column-not-hidable"),this._horizontalHeaderCells=[]}handleHeaderCellsChange(e){this.headerCells=e.map(e=>[...e]),this.editingHeaderCells=e.map(e=>e.map(e=>Object.assign({},e)))}componentWillLoad(){this.handleHeaderCellsChange(this._horizontalHeaderCells)}getPrimaryRow(){var e;return null!==(e=this.editingHeaderCells[this.editingHeaderCells.length-1])&&void 0!==e?e:[]}updatePrimaryRow(e){this.editingHeaderCells=this.editingHeaderCells.map((t,l,a)=>l===a.length-1?e:t)}moveColumn(e,t){const l=[...this.getPrimaryRow()],a=l.findIndex(t=>t.key===e);if(-1===a)return;let s;if("up"===t){if(0===a)return;s=a-1}else{if(a===l.length-1)return;s=a+1}const[i]=l.splice(a,1);l.splice(s,0,i),this.updatePrimaryRow(l)}handleVisibilityChange(e,t){const l=this.getPrimaryRow().map(l=>l.key===e&&!1!==l.hidable?Object.assign(Object.assign({},l),{visible:Boolean(t)}):l);this.updatePrimaryRow(l)}handleWidthChange(e,t){const l=this.getPrimaryRow().map(l=>l.key===e&&!1!==l.resizable?Object.assign(Object.assign({},l),{width:Number(t)}):l);this.updatePrimaryRow(l)}handleCancel(){var e;this.editingHeaderCells=this.headerCells.map(e=>[...e]),this.errorMessage=null,null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();if(this.getPrimaryRow().some(e=>!1!==e.visible)){if(this.host){this.errorMessage=null,this.headerCells=this.editingHeaderCells.map(e=>e.map(e=>Object.assign({},e)));const e=this.editingHeaderCells.map(e=>e.map(e=>{const t=e,{hidable:l,resizable:a,sortable:s,visible:i,width:n}=t,o=__rest(t,["hidable","resizable","sortable","visible","width"]),r=Object.assign({},o);return void 0!==i&&(r.visible=i),void 0!==l&&(r.hidable=l),void 0!==s&&(r.sortable=s),void 0!==a&&(r.resizable=a),null!=n&&(r.width=n),r}));dispatchDomEvent(this.host,KolEvent.changeHeaderCells,e),null===(t=this.popoverRef)||void 0===t||t.hidePopover()}}else this.errorMessage=this.translateErrorAllInvisible}render(){const e=this.getPrimaryRow();return h(KolPopoverButtonWcTag,{key:"6e6b44ace0d191133889d102a032c2c33da630ee",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"kolicon-settings",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},h("div",{key:"d56198aa48cb17ad7bccb4f3af5d6269686bc4f1",class:"kol-table-settings__content"},h(KolHeadingTag,{key:"d84805a670a2afb0a2d782e03a746fc407283abe",_label:this.translateTableSettings,_level:0}),this.errorMessage&&h(KolAlertWcTag,{key:"bd339f6c39dda9924b6173daf9b33699d7eb57ae",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),h("form",{key:"bb1e62e21f8a5d8a113d397f5f29a515d747b5e9",onSubmit:this.handleSubmit.bind(this)},h("div",{key:"0f4a52a1b2cd2610ace2d9548dbeaa8b9e99aa67",class:"kol-table-settings__columns-container"},h("div",{key:"cde48d015364eac498c29e13ea789e8d936d4730",class:"kol-table-settings__columns"},e.map((t,l)=>h("div",{key:t.key,class:"kol-table-settings__column"},h(KolInputCheckboxTag,{_checked:!1!==t.visible,_label:`${t.label}${!1===t.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===t.hidable,_on:{onInput:(e,l)=>{var a;return this.handleVisibilityChange(null!==(a=t.key)&&void 0!==a?a:"",l)}}}),h("span",{class:"kol-table-settings__column-label"},t.label),h(KolInputNumberTag,{_hideLabel:!0,_value:parseColumnWidth(t.width),_label:translate("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_disabled:!1===t.resizable,_on:{onInput:(e,l)=>{var a;return this.handleWidthChange(null!==(a=t.key)&&void 0!==a?a:"",l)}}}),h(KolButtonWcTag,{_icons:"kolicon-chevron-up",_label:translate("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>{var e;return this.moveColumn(null!==(e=t.key)&&void 0!==e?e:"","up")}},_disabled:!1===t.sortable||0===l,"data-testid":"table-settings-move-up"}),h(KolButtonWcTag,{_icons:"kolicon-chevron-down",_label:translate("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>{var e;return this.moveColumn(null!==(e=t.key)&&void 0!==e?e:"","down")}},_disabled:!1===t.sortable||l===e.length-1,"data-testid":"table-settings-move-down"}))))),h("div",{key:"551077e1001adaa1fbad0ec819b598ec27a2bd99",class:"kol-table-settings__actions"},h(KolButtonWcTag,{key:"ee381da96b8986185bbd91c92d67b30595b86e50",_label:this.translateTableSettingsCancel,_variant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),h(KolButtonWcTag,{key:"fed89789b0cbb80c308b79d4d398d2067f10f1b4",_label:this.translateTableSettingsApply,_variant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return this}static get watchers(){return{_horizontalHeaderCells:["handleHeaderCellsChange"]}}},[256,"kol-table-settings-wc",{_horizontalHeaderCells:[16],headerCells:[32],editingHeaderCells:[32],errorMessage:[32]},void 0,{_horizontalHeaderCells:["handleHeaderCellsChange"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-table-settings-wc"].forEach(e=>{if("kol-table-settings-wc"===e)customElements.get(e)||customElements.define(e,KolTableSettings)})}const KolTableSettingsWc=KolTableSettings,defineCustomElement=defineCustomElement$1;export{KolTableSettingsWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{_ as __rest}from"./tslib.es6.js";import{i as KolPopoverButtonWcTag,k as KolHeadingTag,a as KolAlertWcTag,l as KolInputCheckboxTag,m as KolInputNumberTag,b as KolButtonWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";const parseColumnWidth=e=>Number.isFinite(e)&&void 0!==e&&e>0?e:void 0,KolTableSettings=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.headerCells=[],this.editingHeaderCells=[],this.errorMessage=null,this.translateTableSettings=translate("kol-table-settings"),this.translateTableSettingsCancel=translate("kol-table-settings-cancel"),this.translateTableSettingsApply=translate("kol-table-settings-apply"),this.translateErrorAllInvisible=translate("kol-table-settings-error-all-invisible"),this.translateColumnNotHidable=translate("kol-table-settings-column-not-hidable"),this._horizontalHeaderCells=[]}handleHeaderCellsChange(e){this.headerCells=e.map(e=>[...e]),this.editingHeaderCells=e.map(e=>e.map(e=>Object.assign({},e)))}componentWillLoad(){this.handleHeaderCellsChange(this._horizontalHeaderCells)}getPrimaryRow(){var e;return null!==(e=this.editingHeaderCells[this.editingHeaderCells.length-1])&&void 0!==e?e:[]}updatePrimaryRow(e){this.editingHeaderCells=this.editingHeaderCells.map((t,l,a)=>l===a.length-1?e:t)}moveColumn(e,t){const l=[...this.getPrimaryRow()],a=l.findIndex(t=>t.key===e);if(-1===a)return;let s;if("up"===t){if(0===a)return;s=a-1}else{if(a===l.length-1)return;s=a+1}const[i]=l.splice(a,1);l.splice(s,0,i),this.updatePrimaryRow(l)}handleVisibilityChange(e,t){const l=this.getPrimaryRow().map(l=>l.key===e&&!1!==l.hidable?Object.assign(Object.assign({},l),{visible:Boolean(t)}):l);this.updatePrimaryRow(l)}handleWidthChange(e,t){const l=this.getPrimaryRow().map(l=>l.key===e&&!1!==l.resizable?Object.assign(Object.assign({},l),{width:Number(t)}):l);this.updatePrimaryRow(l)}handleCancel(){var e;this.editingHeaderCells=this.headerCells.map(e=>[...e]),this.errorMessage=null,null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();if(this.getPrimaryRow().some(e=>!1!==e.visible)){if(this.host){this.errorMessage=null,this.headerCells=this.editingHeaderCells.map(e=>e.map(e=>Object.assign({},e)));const e=this.editingHeaderCells.map(e=>e.map(e=>{const t=e,{hidable:l,resizable:a,sortable:s,visible:i,width:n}=t,o=__rest(t,["hidable","resizable","sortable","visible","width"]),r=Object.assign({},o);return void 0!==i&&(r.visible=i),void 0!==l&&(r.hidable=l),void 0!==s&&(r.sortable=s),void 0!==a&&(r.resizable=a),null!=n&&(r.width=n),r}));dispatchDomEvent(this.host,KolEvent.changeHeaderCells,e),null===(t=this.popoverRef)||void 0===t||t.hidePopover()}}else this.errorMessage=this.translateErrorAllInvisible}render(){const e=this.getPrimaryRow();return h(KolPopoverButtonWcTag,{key:"993380b087a8b7ec6da6463019d3b8c5f2e04861",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"kolicon-settings",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},h("div",{key:"0c779d71e0c6f8fd23c2f652fef733101462d017",class:"kol-table-settings__content"},h(KolHeadingTag,{key:"10c0e0af0335c51598bbbcf1db9f9d71d8b14e32",_label:this.translateTableSettings,_level:0}),this.errorMessage&&h(KolAlertWcTag,{key:"52a3e64ff21237ad64ea2e3e88b92c18dcd7dbc2",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),h("form",{key:"c378afa14bf0fd053e27743be5bbc57bf47d8f44",onSubmit:this.handleSubmit.bind(this)},h("div",{key:"6a17becba272d906f2114f3ea73e1f755ab83518",class:"kol-table-settings__columns-container"},h("div",{key:"0072e101abfbbcdae1f3632039194e9cb7a6c12a",class:"kol-table-settings__columns"},e.map((t,l)=>h("div",{key:t.key,class:"kol-table-settings__column"},h(KolInputCheckboxTag,{_checked:!1!==t.visible,_label:`${t.label}${!1===t.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===t.hidable,_on:{onInput:(e,l)=>{var a;return this.handleVisibilityChange(null!==(a=t.key)&&void 0!==a?a:"",l)}}}),h("span",{class:"kol-table-settings__column-label"},t.label),h(KolInputNumberTag,{_hideLabel:!0,_value:parseColumnWidth(t.width),_label:translate("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_disabled:!1===t.resizable,_on:{onInput:(e,l)=>{var a;return this.handleWidthChange(null!==(a=t.key)&&void 0!==a?a:"",l)}}}),h(KolButtonWcTag,{_icons:"kolicon-chevron-up",_label:translate("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>{var e;return this.moveColumn(null!==(e=t.key)&&void 0!==e?e:"","up")}},_disabled:!1===t.sortable||0===l,"data-testid":"table-settings-move-up"}),h(KolButtonWcTag,{_icons:"kolicon-chevron-down",_label:translate("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>{var e;return this.moveColumn(null!==(e=t.key)&&void 0!==e?e:"","down")}},_disabled:!1===t.sortable||l===e.length-1,"data-testid":"table-settings-move-down"}))))),h("div",{key:"0e054bfa3e81b559fe0df26091cac6ff7fa2c953",class:"kol-table-settings__actions"},h(KolButtonWcTag,{key:"ea053c336bb5b8166e817d2710e1404c7674ffcc",_label:this.translateTableSettingsCancel,_variant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),h(KolButtonWcTag,{key:"f1ca01d987a725f8c6faf0bbd0020e7317bdf592",_label:this.translateTableSettingsApply,_variant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return this}static get watchers(){return{_horizontalHeaderCells:["handleHeaderCellsChange"]}}},[256,"kol-table-settings-wc",{_horizontalHeaderCells:[16],headerCells:[32],editingHeaderCells:[32],errorMessage:[32]},void 0,{_horizontalHeaderCells:["handleHeaderCellsChange"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-table-settings-wc"].forEach(e=>{if("kol-table-settings-wc"===e)customElements.get(e)||customElements.define(e,KolTableSettings)})}const KolTableSettingsWc=KolTableSettings,defineCustomElement=defineCustomElement$1;export{KolTableSettingsWc,defineCustomElement};