@public-ui/components 3.0.0-rc.9 → 3.0.1-7c24654fbf351e04b5635c30d957697951f63331.0

package/dist/kolibri/kol-single-select.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["SingleSelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","afterPatchOptions","value","_state","_component","key","setFormAssociatedValue","beforePatchOptions","_value","nextState","options","has","get","state","_options","Array","isArray","length","clear","fillKeyOptionMap","validateOptions","hooks","afterPatch","beforePatch","validateRequired","watchBoolean","validateValue","watchValidator","v","undefined","Set","validatePlaceholder","watchString","validateHideClearButton","componentWillLoad","_required","_placeholder","_hideClearButton","defaultStyleCss","KolSingleSelectDefaultStyle0","KolSingleSelect","getValue","kolFocus","_a","refInput","focus","onBlur","some","option","label","_inputValue","find","_filteredOptions","_isOpen","_hasOpened","clearSelection","_disabled","emptyValue","_focusedOptionIndex","controller","onFacade","onInput","CustomEvent","bubbles","detail","_name","onChange","selectOption","event","target","setFilteredOptionsByQuery","handleKeyDownDropdown","test","preventDefault","focusSuggestionStartingWith","query","trim","filter","_b","toLowerCase","includes","moveFocus","delta","newIndex","focusOption","index","refOptions","optionElement","char","charLowerCase","findIndex","startsWith","getFormFieldProps","class","tooltipAlign","_tooltipAlign","onClick","alert","showAsAlert","getInputProps","ariaDescribedBy","getRenderStates","Object","assign","join","_hideLabel","_label","accessKey","_accessKey","autocapitalize","autocorrect","disabled","placeholder","ref","catchRef","required","type","bind","onFocus","inputHasFocus","render","h","KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc","KolIconTag","_icons","translate","clsx","CustomSuggestionsToggleFc","toggleListbox","CustomSuggestionsOptionsGroupFc","blockSuggestionMouseOver","onKeyDown","map","CustomSuggestionsOptionFc","el","selected","onMouseOver","e","handleFocusOut","setTimeout","contains","document","activeElement","handleWindowBlur","handleKeyDown","handleEvent","isOpen","callback","hostRef","selectedIndex","_hideMsg","_id","nonce","Boolean","_touched","validateAccessKey","validateDisabled","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","updateInputValue","validateShortKey","validateSyncValueBySelector","validateTouched","oldValue","handleMouseEvent","matchedOption","String"],"sources":["src/components/single-select/controller.ts","src/components/single-select/style.scss?tag=kol-single-select&mode=default&encapsulation=shadow","src/components/single-select/shadow.tsx"],"sourcesContent":["import type { Option, OptionsPropType, SelectOption, SingleSelectProps, SingleSelectWatches, StencilUnknown, W3CInputValue } from '../../schema';\nimport { watchValidator } from '../../schema';\nimport { validateOptions, watchBoolean, watchString } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class SingleSelectController extends InputIconController implements SingleSelectWatches {\n\tprotected readonly component: Generic.Element.Component & SingleSelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<string>>();\n\n\tpublic constructor(component: Generic.Element.Component & SingleSelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprotected readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tvalidateOptions(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\twatchValidator(this.component, '_value', (v) => v !== undefined, new Set([`StencilUnknown`]), value);\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateHideClearButton(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hideClearButton', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateHideClearButton(this.component._hideClearButton);\n\t}\n}\n","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-custom-suggestions-option' as *;\n@use '../../styles/kol-custom-suggestions-options-group' as *;\n@use '../../styles/kol-custom-suggestions-toggle' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../../styles/kol-input-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-alert;\n@include kol-custom-suggestions-option;\n@include kol-custom-suggestions-options-group;\n@include kol-custom-suggestions-toggle;\n@include kol-form-field;\n@include kol-input-container;\n@include kol-input;\n\n@layer kol-component {\n\t.kol-single-select {\n\t\t&__delete {\n\t\t\tcursor: pointer;\n\n\t\t\t&--disabled {\n\t\t\t\tcursor: not-allowed;\n\t\t\t}\n\t\t}\n\n\t\t&__no-results-message {\n\t\t\tcursor: default;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmin-height: rem(50);\n\t\t}\n\t}\n}\n","import type {\n\tHideMsgPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOption,\n\tOptionsPropType,\n\tShortKeyPropType,\n\tSingleSelectAPI,\n\tSingleSelectStates,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { SingleSelectController } from './controller';\nimport { KolIconTag } from '../../core/component-names';\nimport { getRenderStates } from '../input/controller';\nimport { translate } from '../../i18n';\nimport type { InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';\nimport CustomSuggestionsOptionFc from '../../functional-components/CustomSuggestionsOption/CustomSuggestionsOption';\nimport CustomSuggestionsOptionsGroupFc from '../../functional-components/CustomSuggestionsOptionsGroup';\nimport CustomSuggestionsToggleFc from '../../functional-components/CustomSuggestionsToggle';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';\nimport KolInputStateWrapperFc from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport type { EventDetail } from '../../schema/interfaces/EventDetail';\nimport clsx from 'clsx';\n\n/**\n * @slot - The input field label.\n */\n@Component({\n\ttag: 'kol-single-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSingleSelect implements SingleSelectAPI {\n\t@Element() private readonly host?: HTMLKolSingleSelectElement;\n\tprivate refInput?: HTMLInputElement;\n\tprivate refOptions: HTMLLIElement[] = [];\n\tprivate oldValue?: StencilUnknown;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown | undefined> {\n\t\treturn this._value;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInput?.focus();\n\t}\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.refInput = ref;\n\t};\n\n\tprivate toggleListbox = (event: Event) => {\n\t\tevent?.preventDefault();\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tif (!this._hasOpened) {\n\t\t\t\tthis._isOpen = true;\n\t\t\t\tthis._hasOpened = true;\n\t\t\t\tthis.refInput?.focus();\n\t\t\t\tconst selectedIndex = Array.isArray(this._filteredOptions) ? this._filteredOptions.findIndex((option) => option.label === this._inputValue) : -1;\n\t\t\t\tthis._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : -1;\n\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate onBlur() {\n\t\tif (Array.isArray(this.state._options) && this.state._options.length > 0 && !this.state._options.some((option) => option.label === this._inputValue)) {\n\t\t\tthis._inputValue = this.state._options.find((option) => (option as Option<string>).value === this._value)?.label as string;\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t}\n\t\tthis._isOpen = false;\n\t\tthis._hasOpened = false;\n\t}\n\n\tprivate clearSelection() {\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tconst emptyValue = '';\n\t\t\tthis._focusedOptionIndex = -1;\n\t\t\tthis._value = emptyValue;\n\t\t\tthis._inputValue = emptyValue;\n\t\t\tthis._filteredOptions = [...this.state._options];\n\n\t\t\tthis.controller.onFacade.onInput(\n\t\t\t\tnew CustomEvent<EventDetail>('input', { bubbles: true, detail: { name: this.state._name as string, value: emptyValue } }),\n\t\t\t\ttrue,\n\t\t\t\temptyValue,\n\t\t\t);\n\t\t\tthis.controller.onFacade.onChange(\n\t\t\t\tnew CustomEvent<EventDetail>('change', { bubbles: true, detail: { name: this.state._name as string, value: emptyValue } }),\n\t\t\t\temptyValue,\n\t\t\t);\n\t\t}\n\t}\n\n\tprivate selectOption(option: Option<string>) {\n\t\tthis._value = option.value;\n\t\tthis._inputValue = option.label as string;\n\t\tthis.controller.onFacade.onInput(\n\t\t\tnew CustomEvent<EventDetail>('input', { bubbles: true, detail: { name: this.state._name as string, value: option.value } }),\n\t\t\tfalse,\n\t\t\toption.value,\n\t\t);\n\t\tthis.controller.onFacade.onChange(\n\t\t\tnew CustomEvent<EventDetail>('change', { bubbles: true, detail: { name: this.state._name as string, value: option.value } }),\n\t\t\toption.value,\n\t\t);\n\n\t\tthis._filteredOptions = [...this.state._options];\n\n\t\tthis.controller.setFormAssociatedValue(this._value);\n\t}\n\n\tprivate onInput(event: Event) {\n\t\tconst target = event.target as HTMLInputElement;\n\t\tthis._inputValue = target.value;\n\t\tthis._isOpen = true;\n\t\tthis.setFilteredOptionsByQuery(target.value);\n\t\tthis._focusedOptionIndex = -1;\n\t}\n\n\tprivate handleKeyDownDropdown(event: KeyboardEvent) {\n\t\tif (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t\tthis._isOpen = true;\n\t\t\tthis.focusSuggestionStartingWith(event.key);\n\t\t}\n\t}\n\n\tprivate setFilteredOptionsByQuery(query: string) {\n\t\tif (query?.trim() === '') {\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t} else if (Array.isArray(this.state._options) && this.state._options.length > 0 && query.length > 0) {\n\t\t\tthis._filteredOptions = this.state._options.filter((option) => {\n\t\t\t\treturn (option.label as string)?.toLowerCase()?.includes(query?.toLowerCase());\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate _focusedOptionIndex: number = -1;\n\n\tprivate moveFocus(delta: number) {\n\t\tif (!this._filteredOptions) {\n\t\t\treturn;\n\t\t}\n\t\tlet newIndex = this._focusedOptionIndex + delta;\n\n\t\tif (newIndex >= this._filteredOptions.length) {\n\t\t\tnewIndex = 0;\n\t\t}\n\n\t\tif (newIndex < 0) {\n\t\t\tnewIndex = this._filteredOptions.length - 1;\n\t\t}\n\n\t\tthis._focusedOptionIndex = newIndex;\n\t\tthis.focusOption(this._focusedOptionIndex);\n\t}\n\n\tprivate focusOption(index: number) {\n\t\tif (this.refOptions) {\n\t\t\tconst optionElement = this.refOptions[index];\n\t\t\toptionElement?.focus();\n\t\t}\n\t}\n\n\tprivate focusSuggestionStartingWith(char: string) {\n\t\tconst charLowerCase = char.toLowerCase();\n\n\t\tconst index =\n\t\t\tArray.isArray(this._filteredOptions) && this._filteredOptions.findIndex((option) => (option.label as string).toLowerCase().startsWith(charLowerCase));\n\n\t\tif (typeof index === 'number') {\n\t\t\tthis._focusedOptionIndex = index;\n\t\t\tthis.focusOption(index);\n\t\t}\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: 'kol-single-select',\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.refInput?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getInputProps(): InputStateWrapperProps {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\n\t\treturn {\n\t\t\t'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined,\n\t\t\t'aria-autocomplete': 'both',\n\t\t\t'aria-controls': 'listbox',\n\t\t\t'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined,\n\t\t\t'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined,\n\t\t\taccessKey: this.state._accessKey,\n\t\t\tautocapitalize: 'off',\n\t\t\tautocorrect: 'off',\n\t\t\tclass: 'kol-single-select__input',\n\t\t\tdisabled: this.state._disabled,\n\t\t\tname: this.state._name,\n\t\t\tplaceholder: this.state._placeholder,\n\t\t\tref: this.catchRef,\n\t\t\trequired: this.state._required,\n\t\t\tstate: this.state,\n\t\t\ttype: 'text',\n\t\t\tvalue: this._inputValue,\n\t\t\t...this.controller.onFacade,\n\t\t\tonChange: this.onChange.bind(this),\n\t\t\tonClick: this.onClick.bind(this),\n\t\t\tonInput: this.onInput.bind(this),\n\t\t\tonFocus: (event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<div class=\"kol-single-select__group\">\n\t\t\t\t\t\t<KolInputStateWrapperFc {...this.getInputProps()} />\n\n\t\t\t\t\t\t{this._inputValue && !this.state._hideClearButton && (\n\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t_icons=\"codicon codicon-close\"\n\t\t\t\t\t\t\t\tdata-testid=\"single-select-delete\"\n\t\t\t\t\t\t\t\t_label={translate('kol-delete-selection')}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tthis.clearSelection();\n\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclass={clsx('kol-single-select__delete', {\n\t\t\t\t\t\t\t\t\t'kol-single-select__delete--disabled': this.state._disabled,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<CustomSuggestionsToggleFc onClick={this.toggleListbox.bind(this)} disabled={this.state._disabled} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this._isOpen && !(this.state._disabled === true) && (\n\t\t\t\t\t\t<CustomSuggestionsOptionsGroupFc blockSuggestionMouseOver={this.blockSuggestionMouseOver} onKeyDown={this.handleKeyDownDropdown.bind(this)}>\n\t\t\t\t\t\t\t{Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (\n\t\t\t\t\t\t\t\tthis._filteredOptions.map((option, index) => (\n\t\t\t\t\t\t\t\t\t<CustomSuggestionsOptionFc\n\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\toption={option.label}\n\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\tif (el) this.refOptions[index] = el;\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tselected={this._value === (option as Option<string>).value}\n\t\t\t\t\t\t\t\t\t\tonClick={(event: Event) => {\n\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (!this.blockSuggestionMouseOver) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === 'NumpadEnter') {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(e);\n\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<li class=\"kol-single-select__no-results-message\">{translate('kol-no-results-message')} </li>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</CustomSuggestionsOptionsGroupFc>\n\t\t\t\t\t)}\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\t@Listen('focusout', { target: 'window' })\n\tpublic handleFocusOut() {\n\t\tsetTimeout(() => {\n\t\t\tif (!this.host?.contains(document.activeElement)) {\n\t\t\t\tthis.onBlur();\n\t\t\t}\n\t\t}, 0);\n\t}\n\t@Listen('blur', { target: 'window' })\n\tpublic handleWindowBlur() {\n\t\tthis.onBlur();\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst handleEvent = (isOpen?: boolean, callback?: () => void): void => {\n\t\t\tevent.preventDefault();\n\n\t\t\tif (isOpen !== undefined) {\n\t\t\t\tthis._isOpen = isOpen;\n\t\t\t\tif (!isOpen) {\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t\tcallback?.();\n\t\t};\n\n\t\tswitch (event.key) {\n\t\t\tcase 'Down':\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Up':\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(-1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Tab':\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tthis._isOpen = !this._isOpen;\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Esc':\n\t\t\tcase 'Escape': {\n\t\t\t\tthis._hasOpened = false;\n\t\t\t\tthis._isOpen = false;\n\t\t\t\thandleEvent(false);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase ' ': {\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tif (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0) {\n\t\t\t\t\t\tthis.selectOption(this._filteredOptions[this._focusedOptionIndex] as Option<string>);\n\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\thandleEvent(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'NumpadEnter':\n\t\t\tcase 'Enter': {\n\t\t\t\tthis.toggleListbox(event);\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = this._filteredOptions ? this._filteredOptions.length - 1 : 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(-10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly controller: SingleSelectController;\n\t@State()\n\tprivate _isOpen = false;\n\t@State()\n\tprivate _filteredOptions?: OptionsPropType = [];\n\t@State()\n\tprivate _inputValue: string = '';\n\t@State()\n\tprivate blockSuggestionMouseOver: boolean = false;\n\t@State()\n\tprivate _hasOpened = false;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options!: OptionsPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: StencilUnknown;\n\n\t/**\n\t * Defines the whether the clear button should be hidden.\n\t */\n\t@Prop() public _hideClearButton?: boolean = false;\n\n\t@State() public state: SingleSelectStates = {\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_hideClearButton: false,\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SingleSelectController(this, 'single-select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t\tthis._filteredOptions = value;\n\t\tthis.updateInputValue(this._value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.oldValue = value;\n\t\tthis.updateInputValue(value);\n\t}\n\n\t@Watch('_hideClearButton ')\n\tpublic validateHideClearButton(value?: boolean): void {\n\t\tthis.controller.validateHideClearButton(value);\n\t}\n\n\t@Listen('mousemove')\n\tpublic handleMouseEvent() {\n\t\tthis.blockSuggestionMouseOver = false;\n\t}\n\n\tprivate updateInputValue(value?: StencilUnknown) {\n\t\tif (Array.isArray(this._options)) {\n\t\t\tconst matchedOption = this._options.find((option) => option.value === value);\n\t\t\tthis._inputValue = matchedOption ? String(matchedOption.label) : '';\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.refOptions = [];\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.oldValue = this._value;\n\t\tthis._filteredOptions = this.state._options;\n\t\tthis.updateInputValue(this._value);\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\tif (this.oldValue !== this.refInput?.value) {\n\t\t\tthis.oldValue = this.refInput?.value;\n\t\t}\n\n\t\tif (!this._isOpen) {\n\t\t\tthis.controller.onFacade.onChange(event, this._value);\n\t\t}\n\t}\n\n\tprivate onClick(event: MouseEvent): void {\n\t\tthis.toggleListbox(event);\n\t\tthis.controller.onFacade.onClick(event);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["SingleSelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","afterPatchOptions","value","_state","_component","key","setFormAssociatedValue","beforePatchOptions","_value","nextState","options","has","get","state","_options","Array","isArray","length","clear","fillKeyOptionMap","validateOptions","hooks","afterPatch","beforePatch","validateRequired","watchBoolean","validateValue","watchValidator","v","undefined","Set","validatePlaceholder","watchString","validateHideClearButton","validateRows","watchNumber","componentWillLoad","_required","_placeholder","_hideClearButton","_rows","defaultStyleCss","KolSingleSelectDefaultStyle0","KolSingleSelect","getValue","kolFocus","_a","refInput","focus","onBlur","some","option","label","_inputValue","find","_filteredOptions","_isOpen","_hasOpened","clearSelection","_disabled","emptyValue","_focusedOptionIndex","controller","onFacade","onInput","CustomEvent","bubbles","detail","_name","onChange","selectOption","event","target","setFilteredOptionsByQuery","handleKeyDownDropdown","test","preventDefault","focusSuggestionStartingWith","query","trim","filter","_b","toLowerCase","includes","moveFocus","delta","newIndex","focusOption","index","refOptions","optionElement","char","charLowerCase","findIndex","startsWith","getFormFieldProps","class","tooltipAlign","_tooltipAlign","onClick","alert","showAsAlert","getInputProps","ariaDescribedBy","getRenderStates","Object","assign","join","_hideLabel","_label","accessKey","_accessKey","autocapitalize","autocorrect","disabled","placeholder","ref","catchRef","required","type","bind","onFocus","inputHasFocus","render","h","KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc","KolIconTag","_icons","translate","clsx","CustomSuggestionsToggleFc","toggleListbox","CustomSuggestionsOptionsGroupFc","blockSuggestionMouseOver","onKeyDown","style","map","CustomSuggestionsOptionFc","el","selected","onMouseOver","e","handleFocusOut","setTimeout","contains","document","activeElement","handleWindowBlur","handleKeyDown","handleEvent","isOpen","callback","hostRef","selectedIndex","_hideMsg","_id","nonce","Boolean","_touched","validateAccessKey","validateDisabled","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","updateInputValue","validateShortKey","validateSyncValueBySelector","validateTouched","oldValue","handleMouseEvent","matchedOption","String"],"sources":["src/components/single-select/controller.ts","src/components/single-select/style.scss?tag=kol-single-select&mode=default&encapsulation=shadow","src/components/single-select/shadow.tsx"],"sourcesContent":["import type { Option, OptionsPropType, SelectOption, SingleSelectProps, SingleSelectWatches, StencilUnknown, W3CInputValue } from '../../schema';\nimport { validateOptions, watchBoolean, watchNumber, watchString, watchValidator } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class SingleSelectController extends InputIconController implements SingleSelectWatches {\n\tprotected readonly component: Generic.Element.Component & SingleSelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<string>>();\n\n\tpublic constructor(component: Generic.Element.Component & SingleSelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprotected readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tvalidateOptions(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value: StencilUnknown): void {\n\t\twatchValidator(this.component, '_value', (v) => v !== undefined, new Set([`StencilUnknown`]), value);\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateHideClearButton(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hideClearButton', value);\n\t}\n\n\tpublic validateRows(value?: number): void {\n\t\twatchNumber(this.component, '_rows', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateHideClearButton(this.component._hideClearButton);\n\t\tthis.validateRows(this.component._rows);\n\t}\n}\n","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-custom-suggestions-option' as *;\n@use '../../styles/kol-custom-suggestions-options-group' as *;\n@use '../../styles/kol-custom-suggestions-toggle' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../../styles/kol-input-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-alert;\n@include kol-custom-suggestions-option;\n@include kol-custom-suggestions-options-group;\n@include kol-custom-suggestions-toggle;\n@include kol-form-field;\n@include kol-input-container;\n@include kol-input;\n\n$option-height: rem(40);\n$visible-options: var(--visible-options, 5);\n\n@layer kol-component {\n\t.kol-single-select {\n\t\t&__delete {\n\t\t\tcursor: pointer;\n\n\t\t\t&--disabled {\n\t\t\t\tcursor: not-allowed;\n\t\t\t}\n\t\t}\n\n\t\t&__no-results-message {\n\t\t\tcursor: default;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmin-height: rem(50);\n\t\t}\n\n\t\t.kol-custom-suggestions-options-group {\n\t\t\tmax-height: calc($option-height * $visible-options + rem(2)) !important;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tHideMsgPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOption,\n\tOptionsPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSingleSelectAPI,\n\tSingleSelectStates,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport clsx from 'clsx';\nimport { KolIconTag } from '../../core/component-names';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';\nimport type { InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';\nimport KolInputStateWrapperFc from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport CustomSuggestionsOptionFc from '../../functional-components/CustomSuggestionsOption/CustomSuggestionsOption';\nimport CustomSuggestionsOptionsGroupFc from '../../functional-components/CustomSuggestionsOptionsGroup';\nimport CustomSuggestionsToggleFc from '../../functional-components/CustomSuggestionsToggle';\nimport { translate } from '../../i18n';\nimport type { EventDetail } from '../../schema/interfaces/EventDetail';\nimport { nonce } from '../../utils/dev.utils';\nimport { getRenderStates } from '../input/controller';\nimport { SingleSelectController } from './controller';\n\n/**\n * @slot - The input field label.\n */\n@Component({\n\ttag: 'kol-single-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSingleSelect implements SingleSelectAPI {\n\t@Element() private readonly host?: HTMLKolSingleSelectElement;\n\tprivate refInput?: HTMLInputElement;\n\tprivate refOptions: HTMLLIElement[] = [];\n\tprivate oldValue?: StencilUnknown;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInput?.focus();\n\t}\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.refInput = ref;\n\t};\n\n\tprivate toggleListbox = (event: Event) => {\n\t\tevent?.preventDefault();\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tif (!this._hasOpened) {\n\t\t\t\tthis._isOpen = true;\n\t\t\t\tthis._hasOpened = true;\n\t\t\t\tthis.refInput?.focus();\n\t\t\t\tconst selectedIndex = Array.isArray(this._filteredOptions) ? this._filteredOptions.findIndex((option) => option.label === this._inputValue) : -1;\n\t\t\t\tthis._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : -1;\n\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate onBlur() {\n\t\tif (Array.isArray(this.state._options) && this.state._options.length > 0 && !this.state._options.some((option) => option.label === this._inputValue)) {\n\t\t\tthis._inputValue = this.state._options.find((option) => (option as Option<string>).value === this._value)?.label as string;\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t}\n\t\tthis._isOpen = false;\n\t\tthis._hasOpened = false;\n\t}\n\n\tprivate clearSelection() {\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tconst emptyValue = null;\n\t\t\tthis._focusedOptionIndex = -1;\n\t\t\tthis._value = emptyValue;\n\t\t\tthis._inputValue = '';\n\t\t\tthis._filteredOptions = [...this.state._options];\n\n\t\t\tthis.controller.onFacade.onInput(\n\t\t\t\tnew CustomEvent<EventDetail>('input', { bubbles: true, detail: { name: this.state._name as string, value: emptyValue } }),\n\t\t\t\ttrue,\n\t\t\t\temptyValue,\n\t\t\t);\n\t\t\tthis.controller.onFacade.onChange(\n\t\t\t\tnew CustomEvent<EventDetail>('change', { bubbles: true, detail: { name: this.state._name as string, value: emptyValue } }),\n\t\t\t\temptyValue,\n\t\t\t);\n\t\t}\n\t}\n\n\tprivate selectOption(option: Option<string>) {\n\t\tthis._value = option.value;\n\t\tthis._inputValue = option.label as string;\n\t\tthis.controller.onFacade.onInput(\n\t\t\tnew CustomEvent<EventDetail>('input', { bubbles: true, detail: { name: this.state._name as string, value: option.value } }),\n\t\t\tfalse,\n\t\t\toption.value,\n\t\t);\n\t\tthis.controller.onFacade.onChange(\n\t\t\tnew CustomEvent<EventDetail>('change', { bubbles: true, detail: { name: this.state._name as string, value: option.value } }),\n\t\t\toption.value,\n\t\t);\n\n\t\tthis._filteredOptions = [...this.state._options];\n\n\t\tthis.controller.setFormAssociatedValue(this._value);\n\t}\n\n\tprivate onInput(event: Event) {\n\t\tconst target = event.target as HTMLInputElement;\n\t\tthis._inputValue = target.value;\n\t\tthis._isOpen = true;\n\t\tthis.setFilteredOptionsByQuery(target.value);\n\t\tthis._focusedOptionIndex = -1;\n\t}\n\n\tprivate handleKeyDownDropdown(event: KeyboardEvent) {\n\t\tif (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t\tthis._isOpen = true;\n\t\t\tthis.focusSuggestionStartingWith(event.key);\n\t\t}\n\t}\n\n\tprivate setFilteredOptionsByQuery(query: string) {\n\t\tif (query?.trim() === '') {\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t} else if (Array.isArray(this.state._options) && this.state._options.length > 0 && query.length > 0) {\n\t\t\tthis._filteredOptions = this.state._options.filter((option) => {\n\t\t\t\treturn (option.label as string)?.toLowerCase()?.includes(query?.toLowerCase());\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate _focusedOptionIndex: number = -1;\n\n\tprivate moveFocus(delta: number) {\n\t\tif (!this._filteredOptions) {\n\t\t\treturn;\n\t\t}\n\t\tlet newIndex = this._focusedOptionIndex + delta;\n\n\t\tif (newIndex >= this._filteredOptions.length) {\n\t\t\tnewIndex = 0;\n\t\t}\n\n\t\tif (newIndex < 0) {\n\t\t\tnewIndex = this._filteredOptions.length - 1;\n\t\t}\n\n\t\tthis._focusedOptionIndex = newIndex;\n\t\tthis.focusOption(this._focusedOptionIndex);\n\t}\n\n\tprivate focusOption(index: number) {\n\t\tif (this.refOptions) {\n\t\t\tconst optionElement = this.refOptions[index];\n\t\t\toptionElement?.focus();\n\t\t}\n\t}\n\n\tprivate focusSuggestionStartingWith(char: string) {\n\t\tconst charLowerCase = char.toLowerCase();\n\n\t\tconst index =\n\t\t\tArray.isArray(this._filteredOptions) && this._filteredOptions.findIndex((option) => (option.label as string).toLowerCase().startsWith(charLowerCase));\n\n\t\tif (typeof index === 'number') {\n\t\t\tthis._focusedOptionIndex = index;\n\t\t\tthis.focusOption(index);\n\t\t}\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: 'kol-single-select',\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.refInput?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getInputProps(): InputStateWrapperProps {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\n\t\treturn {\n\t\t\t'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined,\n\t\t\t'aria-autocomplete': 'both',\n\t\t\t'aria-controls': 'listbox',\n\t\t\t'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined,\n\t\t\t'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined,\n\t\t\taccessKey: this.state._accessKey,\n\t\t\tautocapitalize: 'off',\n\t\t\tautocorrect: 'off',\n\t\t\tclass: 'kol-single-select__input',\n\t\t\tdisabled: this.state._disabled,\n\t\t\tname: this.state._name,\n\t\t\tplaceholder: this.state._placeholder,\n\t\t\tref: this.catchRef,\n\t\t\trequired: this.state._required,\n\t\t\tstate: this.state,\n\t\t\ttype: 'text',\n\t\t\tvalue: this._inputValue,\n\t\t\t...this.controller.onFacade,\n\t\t\tonChange: this.onChange.bind(this),\n\t\t\tonClick: this.onClick.bind(this),\n\t\t\tonInput: this.onInput.bind(this),\n\t\t\tonFocus: (event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<div class=\"kol-single-select__group\">\n\t\t\t\t\t\t<KolInputStateWrapperFc {...this.getInputProps()} />\n\n\t\t\t\t\t\t{this._inputValue && !this.state._hideClearButton && (\n\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t_icons=\"codicon codicon-close\"\n\t\t\t\t\t\t\t\tdata-testid=\"single-select-delete\"\n\t\t\t\t\t\t\t\t_label={translate('kol-delete-selection')}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tthis.clearSelection();\n\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclass={clsx('kol-single-select__delete', {\n\t\t\t\t\t\t\t\t\t'kol-single-select__delete--disabled': this.state._disabled,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<CustomSuggestionsToggleFc onClick={this.toggleListbox.bind(this)} disabled={this.state._disabled} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this._isOpen && !(this.state._disabled === true) && (\n\t\t\t\t\t\t<CustomSuggestionsOptionsGroupFc\n\t\t\t\t\t\t\tblockSuggestionMouseOver={this.blockSuggestionMouseOver}\n\t\t\t\t\t\t\tonKeyDown={this.handleKeyDownDropdown.bind(this)}\n\t\t\t\t\t\t\tstyle={{ '--visible-options': `${this._rows ?? 5}` }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (\n\t\t\t\t\t\t\t\tthis._filteredOptions.map((option, index) => (\n\t\t\t\t\t\t\t\t\t<CustomSuggestionsOptionFc\n\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\toption={option.label}\n\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\tif (el) this.refOptions[index] = el;\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tselected={this._value === (option as Option<string>).value}\n\t\t\t\t\t\t\t\t\t\tonClick={(event: Event) => {\n\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t\t\t\t\t\t\t\tthis._isOpen = false;\n\t\t\t\t\t\t\t\t\t\t\tthis._hasOpened = false;\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (!this.blockSuggestionMouseOver) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === 'NumpadEnter') {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(e);\n\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<li class=\"kol-single-select__no-results-message\">{translate('kol-no-results-message')} </li>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</CustomSuggestionsOptionsGroupFc>\n\t\t\t\t\t)}\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\t@Listen('focusout', { target: 'window' })\n\tpublic handleFocusOut() {\n\t\tsetTimeout(() => {\n\t\t\tif (!this.host?.contains(document.activeElement)) {\n\t\t\t\tthis.onBlur();\n\t\t\t}\n\t\t}, 0);\n\t}\n\t@Listen('blur', { target: 'window' })\n\tpublic handleWindowBlur() {\n\t\tthis.onBlur();\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst handleEvent = (isOpen?: boolean, callback?: () => void): void => {\n\t\t\tevent.preventDefault();\n\n\t\t\tif (isOpen !== undefined) {\n\t\t\t\tthis._isOpen = isOpen;\n\t\t\t\tif (!isOpen) {\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t\tcallback?.();\n\t\t};\n\n\t\tswitch (event.key) {\n\t\t\tcase 'Down':\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Up':\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(-1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Tab':\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tthis._isOpen = !this._isOpen;\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Esc':\n\t\t\tcase 'Escape': {\n\t\t\t\tthis._hasOpened = false;\n\t\t\t\tthis._isOpen = false;\n\t\t\t\thandleEvent(false);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase ' ': {\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tif (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0) {\n\t\t\t\t\t\tthis.selectOption(this._filteredOptions[this._focusedOptionIndex] as Option<string>);\n\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\thandleEvent(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'NumpadEnter':\n\t\t\tcase 'Enter': {\n\t\t\t\tthis.toggleListbox(event);\n\t\t\t\tthis._hasOpened = false;\n\t\t\t\tthis._isOpen = false;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = this._filteredOptions ? this._filteredOptions.length - 1 : 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(-10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly controller: SingleSelectController;\n\t@State()\n\tprivate _isOpen = false;\n\t@State()\n\tprivate _filteredOptions?: OptionsPropType = [];\n\t@State()\n\tprivate _inputValue: string = '';\n\t@State()\n\tprivate blockSuggestionMouseOver: boolean = false;\n\t@State()\n\tprivate _hasOpened = false;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options!: OptionsPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value: StencilUnknown = null;\n\n\t/**\n\t * Defines the whether the clear button should be hidden.\n\t */\n\t@Prop() public _hideClearButton?: boolean = false;\n\n\t/**\n\t * Maximum number of visible rows in the options dropdown before scrolling.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t@State() public state: SingleSelectStates = {\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_hideClearButton: false,\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SingleSelectController(this, 'single-select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t\tthis._filteredOptions = value;\n\t\tthis.updateInputValue(this._value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value: StencilUnknown): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.oldValue = value;\n\t\tthis.updateInputValue(value);\n\t}\n\n\t@Watch('_hideClearButton ')\n\tpublic validateHideClearButton(value?: boolean): void {\n\t\tthis.controller.validateHideClearButton(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Listen('mousemove')\n\tpublic handleMouseEvent() {\n\t\tthis.blockSuggestionMouseOver = false;\n\t}\n\n\tprivate updateInputValue(value?: StencilUnknown) {\n\t\tif (Array.isArray(this._options)) {\n\t\t\tconst matchedOption = this._options.find((option) => option.value === value);\n\t\t\tthis._inputValue = matchedOption ? String(matchedOption.label) : '';\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.refOptions = [];\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.oldValue = this._value;\n\t\tthis._filteredOptions = this.state._options;\n\t\tthis.updateInputValue(this._value);\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\tif (this.oldValue !== this.refInput?.value) {\n\t\t\tthis.oldValue = this.refInput?.value;\n\t\t}\n\n\t\tif (!this._isOpen) {\n\t\t\tthis.controller.onFacade.onChange(event, this._value);\n\t\t}\n\t}\n\n\tprivate onClick(event: MouseEvent): void {\n\t\tthis.toggleListbox(event);\n\t\tthis.controller.onFacade.onClick(event);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-6b4e51a8.js";import{r as t,a as i}from"./unique-nav-labels-768d04e9.js";import{w as o}from"./validation-81a4e752.js";import{f as a}from"./component-names-60d77143.js";import{v as l}from"./label-90c13388.js";import"./dev.utils-fab45cbc.js";import"./prop.validators-17aec743.js";import"./index-6d801dad.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\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  }\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: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-skip-nav__list {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}",r=s,d=class{constructor(e){n(this,e),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e("nav",{key:"6696f974f96add5529fce40c73c96429d6d46c14",class:"kol-skip-nav","aria-label":this.state._label},e("ul",{key:"44472c7c253cb6bdffd89d999d9b5f11a39bad22",class:"kol-skip-nav__list"},this.state._links.map(((n,t)=>e("li",{class:"kol-skip-nav__list-item",key:t},e(a,Object.assign({},n)))))))}validateLabel(n,e,a=!1){a||t(this.state._label),l(this,n,{required:!0}),i(this.state._label)}validateLinks(n){o("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){t(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};d.style={default:r};export{d as kol_skip_nav};
+import{r as n,h as e}from"./index-aceb5633.js";import"./index-88dea7b1.js";import{r as t,a as i}from"./unique-nav-labels-de957b96.js";import{w as o}from"./validation-7cc70d5a.js";import{e as a}from"./component-names-799e91e2.js";import{v as l}from"./label-5982d241.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\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  }\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: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-skip-nav__list {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}",r=s,d=class{constructor(e){n(this,e),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e("nav",{key:"6696f974f96add5529fce40c73c96429d6d46c14",class:"kol-skip-nav","aria-label":this.state._label},e("ul",{key:"44472c7c253cb6bdffd89d999d9b5f11a39bad22",class:"kol-skip-nav__list"},this.state._links.map(((n,t)=>e("li",{class:"kol-skip-nav__list-item",key:t},e(a,Object.assign({},n)))))))}validateLabel(n,e,a=!1){a||t(this.state._label),l(this,n,{required:!0}),i(this.state._label)}validateLinks(n){o("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){t(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};d.style={default:r};export{d as kol_skip_nav};

package/dist/kolibri/kol-skip-nav.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNavDefaultStyle0","KolSkipNav","_label","_links","render","h","key","class","this","state","map","link","index","KolLinkWcTag","Object","assign","validateLabel","value","_oldValue","initial","removeNavLabel","required","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.scss?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-skip-nav {\n\t\tfont-size: rem(16);\n\n\t\t&__list {\n\t\t\tdisplay: grid;\n\t\t\tlist-style: none;\n\t\t\tplace-items: center;\n\t\t}\n\n\t\t&__list-item {\n\t\t\theight: 0;\n\t\t}\n\n\t\t.kol-link {\n\t\t\tleft: rem(-99999);\n\t\t\toverflow: hidden;\n\t\t\tposition: absolute;\n\t\t\tz-index: 9999999;\n\t\t\tline-height: 1;\n\n\t\t\t&:focus {\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tleft: unset;\n\t\t\t\tposition: unset;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements SkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-skip-nav\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-skip-nav__list\">\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class=\"kol-skip-nav__list-item\" key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag {...link}></KolLinkWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\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() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;mVAAA,MAAMA,EAAkB,ksJACxB,MAAAC,EAAeD,E,MCeFE,EAAU,M,gFA2BiB,CACtCC,OAAQ,GACRC,OAAQ,G,CA5BF,MAAAC,GACN,OACCC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eAAc,aAAaC,KAAKC,MAAMP,QAChDG,EAAA,MAAAC,IAAA,2CAAIC,MAAM,sBACRC,KAAKC,MAAMN,OAAOO,KAAI,CAACC,EAAiBC,IAEvCP,EAAA,MAAIE,MAAM,0BAA0BD,IAAKM,GACxCP,EAACQ,EAAYC,OAAAC,OAAA,GAAKJ,Q,CAyBlB,aAAAK,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAeZ,KAAKC,MAAMP,O,CAE3Bc,EAAcR,KAAMS,EAAO,CAC1BI,SAAU,OAEXC,EAAYd,KAAKC,MAAMP,O,CAIjB,aAAAqB,CAAcN,GACpBO,EAAc,aAAchB,KAAMS,E,CAG5B,iBAAAQ,GACNjB,KAAKQ,cAAcR,KAAKN,OAAQwB,UAAW,MAC3ClB,KAAKe,cAAcf,KAAKL,O,CAGlB,oBAAAwB,GACNP,EAAeZ,KAAKC,MAAMP,O","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolSkipNavDefaultStyle0","KolSkipNav","_label","_links","render","h","key","class","this","state","map","link","index","KolLinkWcTag","Object","assign","validateLabel","value","_oldValue","initial","removeNavLabel","required","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.scss?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-skip-nav {\n\t\tfont-size: rem(16);\n\n\t\t&__list {\n\t\t\tdisplay: grid;\n\t\t\tlist-style: none;\n\t\t\tplace-items: center;\n\t\t}\n\n\t\t&__list-item {\n\t\t\theight: 0;\n\t\t}\n\n\t\t.kol-link {\n\t\t\tleft: rem(-99999);\n\t\t\toverflow: hidden;\n\t\t\tposition: absolute;\n\t\t\tz-index: 9999999;\n\t\t\tline-height: 1;\n\n\t\t\t&:focus {\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tleft: unset;\n\t\t\t\tposition: unset;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements SkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-skip-nav\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-skip-nav__list\">\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class=\"kol-skip-nav__list-item\" key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag {...link}></KolLinkWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\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() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;6QAAA,MAAMA,EAAkB,ksJACxB,MAAAC,EAAeD,E,MCeFE,EAAU,M,gFA2BiB,CACtCC,OAAQ,GACRC,OAAQ,G,CA5BF,MAAAC,GACN,OACCC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eAAc,aAAaC,KAAKC,MAAMP,QAChDG,EAAA,MAAAC,IAAA,2CAAIC,MAAM,sBACRC,KAAKC,MAAMN,OAAOO,KAAI,CAACC,EAAiBC,IAEvCP,EAAA,MAAIE,MAAM,0BAA0BD,IAAKM,GACxCP,EAACQ,EAAYC,OAAAC,OAAA,GAAKJ,Q,CAyBlB,aAAAK,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAeZ,KAAKC,MAAMP,O,CAE3Bc,EAAcR,KAAMS,EAAO,CAC1BI,SAAU,OAEXC,EAAYd,KAAKC,MAAMP,O,CAIjB,aAAAqB,CAAcN,GACpBO,EAAc,aAAchB,KAAMS,E,CAG5B,iBAAAQ,GACNjB,KAAKQ,cAAcR,KAAKN,OAAQwB,UAAW,MAC3ClB,KAAKe,cAAcf,KAAKL,O,CAGlB,oBAAAwB,GACNP,EAAeZ,KAAKC,MAAMP,O","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as i,F as o}from"./index-6b4e51a8.js";import{t}from"./i18n-efbafc80.js";import{c as r}from"./clsx-09a06a12.js";import{v as a}from"./show-c115b1eb.js";import{w as s}from"./prop.validators-17aec743.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./index-6d801dad.js";import"./dev.utils-fab45cbc.js";const l=["cycle","dot","none"],c=(n,e)=>{s(n,"_variant",(n=>"string"==typeof n&&l.includes(n)),new Set(l),e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\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  }\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: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--cycle {\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .kol-spin__loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    border: 5px solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__loader {\n      animation-duration: 4s;\n    }\n    .kol-spin__loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--dot {\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n    height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--1 {\n    background-color: #000;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--2 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--3 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--neutral {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n  }\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(16rem / var(--kolibri-root-font-size, 16)), 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__spinner-element {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}",p=d;function h(n){switch(n){case"cycle":return e("span",{class:"kol-spin__loader"});case"none":return e("slot",{name:"expert"});default:return e(o,null,e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const m=class{constructor(e){n(this,e),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return e(i,{key:"728409fcfcd08192157e7b2e561ec6c0c1f482c7",class:"kol-spin"},this.state._show?e("span",{"aria-busy":"true","aria-label":t("kol-action-running"),"aria-live":"polite",class:r("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`),role:"alert"},h(this.state._variant)):this.showToggled&&e("span",{"aria-label":t("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,a(this,n)}validateVariant(n){c(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};m.style={default:p};export{m as kol_spin};
+import{r as n,h as e,H as i,F as o}from"./index-aceb5633.js";import{w as t}from"./index-88dea7b1.js";import{t as r}from"./i18n-01abf777.js";import{c as a}from"./clsx-09a06a12.js";import{v as s}from"./show-96e68a00.js";import"./i18n-45224cc3.js";const l=["cycle","dot","none"],c=(n,e)=>{t(n,"_variant",(n=>"string"==typeof n&&l.includes(n)),new Set(l),e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\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  }\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: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--cycle {\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .kol-spin__loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    border: 5px solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__loader {\n      animation-duration: 4s;\n    }\n    .kol-spin__loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--dot {\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n    height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--1 {\n    background-color: #000;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--2 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--3 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--neutral {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n  }\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(16rem / var(--kolibri-root-font-size, 16)), 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__spinner-element {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}",p=d;function h(n){switch(n){case"cycle":return e("span",{class:"kol-spin__loader"});case"none":return e("slot",{name:"expert"});default:return e(o,null,e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const m=class{constructor(e){n(this,e),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return e(i,{key:"728409fcfcd08192157e7b2e561ec6c0c1f482c7",class:"kol-spin"},this.state._show?e("span",{"aria-busy":"true","aria-label":r("kol-action-running"),"aria-live":"polite",class:a("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`),role:"alert"},h(this.state._variant)):this.showToggled&&e("span",{"aria-label":r("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,s(this,n)}validateVariant(n){c(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};m.style={default:p};export{m as kol_spin};

package/dist/kolibri/kol-spin.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["spinVariantPropTypeOptions","validateSpinVariant","component","value","watchValidator","includes","Set","defaultStyleCss","KolSpinDefaultStyle0","renderSpin","variant","h","class","name","Fragment","KolSpin","this","showToggled","_variant","render","Host","key","state","_show","translate","clsx","role","validateShow","validateVariant","componentWillLoad"],"sources":["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 { 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 '../../styles/global' as *;\n@use './cycle' as *;\n@use './dot' as *;\n\n@layer kol-component {\n\t.kol-spin {\n\t\tfont-size: rem(16);\n\n\t\t&__spinner {\n\t\t\tdisplay: block;\n\t\t\tpadding: rem(2);\n\t\t\tposition: relative;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { validateShow, validateSpinVariant } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { ShowPropType, SpinAPI, SpinStates, SpinVariantPropType } from '../../schema';\nimport clsx from '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@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\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<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`)}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\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 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};\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('_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}\n}\n"],"mappings":";;;kVASA,MAAMA,EAA6B,CAAC,QAAS,MAAO,QAW7C,MAAMC,EAAsB,CAACC,EAAsCC,KACzEC,EACCF,EACA,YACCC,UAAiBA,IAAU,UAAYH,EAA2BK,SAASF,IAC5E,IAAIG,IAAIN,GACRG,EACA,EC3BF,MAAMI,EAAkB,+3PACxB,MAAAC,EAAeD,ECOf,SAASE,EAAWC,GACnB,OAAQA,GACP,IAAK,QACJ,OAAOC,EAAA,QAAMC,MAAM,qBACpB,IAAK,OACJ,OAAOD,EAAA,QAAME,KAAK,WACnB,QACC,OACCF,EAAAG,EAAA,KACCH,EAAA,QAAMC,MAAM,2DACZD,EAAA,QAAMC,MAAM,2DACZD,EAAA,QAAMC,MAAM,2DACZD,EAAA,QAAMC,MAAM,kEAIjB,C,MASaG,EAAO,M,yBACXC,KAAAC,YAAc,M,WA0B2C,M,cAKjB,M,WAEZ,CACnCC,SAAU,M,CAhCJ,MAAAC,GACN,OACCR,EAACS,EAAI,CAAAC,IAAA,2CAACT,MAAM,YACVI,KAAKM,MAAMC,MACXZ,EAAA,oBACW,OAAM,aACJa,EAAU,sBAAqB,YACjC,SACVZ,MAAOa,EAAK,oBAAqB,sBAAsBT,KAAKM,MAAMJ,YAClEQ,KAAK,SAEJjB,EAAWO,KAAKM,MAAMJ,WAGxBF,KAAKC,aAAeN,EAAA,qBAAkBa,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAsB3G,YAAAC,CAAaxB,GACnBa,KAAKC,YAAcD,KAAKM,MAAMC,QAAU,MAAQP,KAAKO,QAAU,MAC/DI,EAAaX,KAAMb,E,CAIb,eAAAyB,CAAgBzB,GACtBF,EAAoBe,KAAMb,E,CAGpB,iBAAA0B,GACNb,KAAKW,aAAaX,KAAKO,OACvBP,KAAKY,gBAAgBZ,KAAKE,S","ignoreList":[]}
+{"version":3,"names":["spinVariantPropTypeOptions","validateSpinVariant","component","value","watchValidator","includes","Set","defaultStyleCss","KolSpinDefaultStyle0","renderSpin","variant","h","class","name","Fragment","KolSpin","this","showToggled","_variant","render","Host","key","state","_show","translate","clsx","role","validateShow","validateVariant","componentWillLoad"],"sources":["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 { 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 '../../styles/global' as *;\n@use './cycle' as *;\n@use './dot' as *;\n\n@layer kol-component {\n\t.kol-spin {\n\t\tfont-size: rem(16);\n\n\t\t&__spinner {\n\t\t\tdisplay: block;\n\t\t\tpadding: rem(2);\n\t\t\tposition: relative;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { validateShow, validateSpinVariant } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { ShowPropType, SpinAPI, SpinStates, SpinVariantPropType } from '../../schema';\nimport clsx from '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@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\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<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`)}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\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 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};\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('_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}\n}\n"],"mappings":";;;qPASA,MAAMA,EAA6B,CAAC,QAAS,MAAO,QAW7C,MAAMC,EAAsB,CAACC,EAAsCC,KACzEC,EACCF,EACA,YACCC,UAAiBA,IAAU,UAAYH,EAA2BK,SAASF,IAC5E,IAAIG,IAAIN,GACRG,EACA,EC3BF,MAAMI,EAAkB,+3PACxB,MAAAC,EAAeD,ECOf,SAASE,EAAWC,GACnB,OAAQA,GACP,IAAK,QACJ,OAAOC,EAAA,QAAMC,MAAM,qBACpB,IAAK,OACJ,OAAOD,EAAA,QAAME,KAAK,WACnB,QACC,OACCF,EAAAG,EAAA,KACCH,EAAA,QAAMC,MAAM,2DACZD,EAAA,QAAMC,MAAM,2DACZD,EAAA,QAAMC,MAAM,2DACZD,EAAA,QAAMC,MAAM,kEAIjB,C,MASaG,EAAO,M,yBACXC,KAAAC,YAAc,M,WA0B2C,M,cAKjB,M,WAEZ,CACnCC,SAAU,M,CAhCJ,MAAAC,GACN,OACCR,EAACS,EAAI,CAAAC,IAAA,2CAACT,MAAM,YACVI,KAAKM,MAAMC,MACXZ,EAAA,oBACW,OAAM,aACJa,EAAU,sBAAqB,YACjC,SACVZ,MAAOa,EAAK,oBAAqB,sBAAsBT,KAAKM,MAAMJ,YAClEQ,KAAK,SAEJjB,EAAWO,KAAKM,MAAMJ,WAGxBF,KAAKC,aAAeN,EAAA,qBAAkBa,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAsB3G,YAAAC,CAAaxB,GACnBa,KAAKC,YAAcD,KAAKM,MAAMC,QAAU,MAAQP,KAAKO,QAAU,MAC/DI,EAAaX,KAAMb,E,CAIb,eAAAyB,CAAgBzB,GACtBF,EAAoBe,KAAMb,E,CAGpB,iBAAA0B,GACNb,KAAKW,aAAaX,KAAKO,OACvBP,KAAKY,gBAAgBZ,KAAKE,S","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t}from"./index-6b4e51a8.js";import{t as e}from"./i18n-efbafc80.js";import{k as o,a as i}from"./component-names-60d77143.js";import{c as s}from"./clsx-09a06a12.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";const a="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\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  }\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: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-popover {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",l=a,r=class{constructor(t){n(this,t),this.clickButtonHandler={onClick:n=>{var t,e;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:n=>{n.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return t("div",{key:"0c88a85fb8276e85ec24cb2e4c6d5b4ea5f4def5",class:"kol-split-button"},t("div",{key:"dc3714e07c2520223c2b8cad45898e9815282681",class:"kol-split-button__root"},t(i,{key:"b7f61444b57f22216b4614c2a713c33585183ba1",class:s("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_ariaControls:this._ariaControls,_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,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),t("div",{key:"fcb8212ab113127e25ebea6b1b69e90fa2c767ae",class:"kol-split-button__horizontal-line"}),t(i,{key:"81fe77362ce48e18fa23d20c6801a8d2cd224a15",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?e(`${n}-close`):e(`${n}-open`),_on:this.clickToggleHandler})),t(o,{key:"a70171de4785124fec0f53ece004864f1ef0d2f7",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},t("slot",{key:"9ce7ea4b4157712fed4b866c18f50842fbd83704"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};r.style={default:l};export{r as kol_split_button};
+import{r as n,h as t}from"./index-aceb5633.js";import{t as e}from"./i18n-01abf777.js";import{k as o,a as i}from"./component-names-799e91e2.js";import{c as a}from"./clsx-09a06a12.js";import"./i18n-45224cc3.js";import"./index-88dea7b1.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\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  }\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: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-popover {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",l=s,r=class{constructor(t){n(this,t),this.clickButtonHandler={onClick:n=>{var t,e;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:n=>{n.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return t("div",{key:"0c88a85fb8276e85ec24cb2e4c6d5b4ea5f4def5",class:"kol-split-button"},t("div",{key:"dc3714e07c2520223c2b8cad45898e9815282681",class:"kol-split-button__root"},t(i,{key:"b7f61444b57f22216b4614c2a713c33585183ba1",class:a("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_ariaControls:this._ariaControls,_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,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),t("div",{key:"fcb8212ab113127e25ebea6b1b69e90fa2c767ae",class:"kol-split-button__horizontal-line"}),t(i,{key:"81fe77362ce48e18fa23d20c6801a8d2cd224a15",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?e(`${n}-close`):e(`${n}-open`),_on:this.clickToggleHandler})),t(o,{key:"a70171de4785124fec0f53ece004864f1ef0d2f7",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},t("slot",{key:"9ce7ea4b4157712fed4b866c18f50842fbd83704"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};r.style={default:l};export{r as kol_split_button};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as t,g as s}from"./index-6b4e51a8.js";import{t as a}from"./i18n-efbafc80.js";import{l as i,b as l,m as n,n as o,a as c,j as b}from"./component-names-60d77143.js";import{d,K as r}from"./events-5886c68b.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";const h=class{constructor(t){e(this,t),this.tableSettings={columns:[]},this.errorMessage=null,this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.sortColumnsByPosition(e.columns)})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}sortColumnsByPosition(e){return[...e].sort(((e,t)=>e.position-t.position))}moveColumn(e,t){const s=[...this.tableSettings.columns],a=s.findIndex((t=>t.key===e)),i="up"===t?a-1:a+1,n=s[a],l=s[i],o=s.map((e=>e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e));this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s))})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s))})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();const s=this.tableSettings.columns.some((e=>e.visible));s?this.host&&(this.errorMessage=null,d(this.host,r.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=a("kol-table-settings-error-all-invisible")}render(){const e=[...this.tableSettings.columns].sort(((e,t)=>e.position-t.position));return t(b,{key:"a3e0145a3399d8dee361f7e29e34198b1ec99b27",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:a("kol-table-settings"),_popoverAlign:"top",_hideLabel:!0},t("div",{key:"66f2e14ac78f6d865a6a6ad9e2393c94c42fa8a7",class:"kol-table-settings__content"},t(i,{key:"558f2b97ac8c7f049147125a642e5e4862108dda",_label:a("kol-table-settings"),_level:0}),this.errorMessage&&t(l,{key:"433c0381c504eff423516b40d899751ae5ea4658",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),t("form",{key:"404aae1da74273e840c1980fe3a94d126cbfbe8b",onSubmit:this.handleSubmit.bind(this)},t("div",{key:"d18a3fe79c0f576dbf23444eb06a744d003b77af",class:"kol-table-settings__columns-container"},t("div",{key:"adb1ad8d4afc6e0dc062f7dfb2cbbfebbc5b83d1",class:"kol-table-settings__columns"},e.map(((s,i)=>t("div",{key:s.key,class:"kol-table-settings__column"},t(n,{_checked:s.visible,_label:a("kol-table-settings-show-column",{placeholders:{column:s.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(e,t)=>this.handleVisibilityChange(s.key,t)}}),t("span",null,s.label),t(o,{_hideLabel:!0,_value:s.width,_label:a("kol-table-settings-column-width",{placeholders:{column:s.label}}),_min:1,_on:{onInput:(e,t)=>this.handleWidthChange(s.key,t)}}),t(c,{_icons:"codicon codicon-arrow-up",_label:a("kol-table-settings-move-up",{placeholders:{column:s.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"up")},_disabled:0===i,"data-testid":"table-settings-move-up"}),t(c,{_icons:"codicon codicon-arrow-down",_label:a("kol-table-settings-move-down",{placeholders:{column:s.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"down")},_disabled:i===e.length-1,"data-testid":"table-settings-move-down"})))))),t("div",{key:"d0f48d73ce013cbd5b185a437756482c855ac9dc",class:"kol-table-settings__actions"},t(c,{key:"a7e5797e348e821f8054a92121ecff1d61b13135",_label:a("kol-table-settings-cancel"),_variant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),t(c,{key:"b42ca9c4f951fcc93a281f022dabafda59fe3373",_label:a("kol-table-settings-apply"),_variant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return s(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{h as kol_table_settings_wc};
+import{r as e,h as t,g as s}from"./index-aceb5633.js";import{t as a}from"./i18n-01abf777.js";import{r as i,b as l,t as n,u as o,a as c,i as b}from"./component-names-799e91e2.js";import{d,K as r}from"./events-5886c68b.js";import"./i18n-45224cc3.js";import"./index-88dea7b1.js";const h=class{constructor(t){e(this,t),this.tableSettings={columns:[]},this.errorMessage=null,this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.sortColumnsByPosition(e.columns)})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}sortColumnsByPosition(e){return[...e].sort(((e,t)=>e.position-t.position))}moveColumn(e,t){const s=[...this.tableSettings.columns],a=s.findIndex((t=>t.key===e)),i="up"===t?a-1:a+1,n=s[a],l=s[i],o=s.map((e=>e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e));this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s))})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s))})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();const s=this.tableSettings.columns.some((e=>e.visible));s?this.host&&(this.errorMessage=null,d(this.host,r.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=a("kol-table-settings-error-all-invisible")}render(){const e=[...this.tableSettings.columns].sort(((e,t)=>e.position-t.position));return t(b,{key:"a3e0145a3399d8dee361f7e29e34198b1ec99b27",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:a("kol-table-settings"),_popoverAlign:"top",_hideLabel:!0},t("div",{key:"66f2e14ac78f6d865a6a6ad9e2393c94c42fa8a7",class:"kol-table-settings__content"},t(i,{key:"558f2b97ac8c7f049147125a642e5e4862108dda",_label:a("kol-table-settings"),_level:0}),this.errorMessage&&t(l,{key:"433c0381c504eff423516b40d899751ae5ea4658",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),t("form",{key:"404aae1da74273e840c1980fe3a94d126cbfbe8b",onSubmit:this.handleSubmit.bind(this)},t("div",{key:"d18a3fe79c0f576dbf23444eb06a744d003b77af",class:"kol-table-settings__columns-container"},t("div",{key:"adb1ad8d4afc6e0dc062f7dfb2cbbfebbc5b83d1",class:"kol-table-settings__columns"},e.map(((s,i)=>t("div",{key:s.key,class:"kol-table-settings__column"},t(n,{_checked:s.visible,_label:a("kol-table-settings-show-column",{placeholders:{column:s.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(e,t)=>this.handleVisibilityChange(s.key,t)}}),t("span",null,s.label),t(o,{_hideLabel:!0,_value:s.width,_label:a("kol-table-settings-column-width",{placeholders:{column:s.label}}),_min:1,_on:{onInput:(e,t)=>this.handleWidthChange(s.key,t)}}),t(c,{_icons:"codicon codicon-arrow-up",_label:a("kol-table-settings-move-up",{placeholders:{column:s.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"up")},_disabled:0===i,"data-testid":"table-settings-move-up"}),t(c,{_icons:"codicon codicon-arrow-down",_label:a("kol-table-settings-move-down",{placeholders:{column:s.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"down")},_disabled:i===e.length-1,"data-testid":"table-settings-move-down"})))))),t("div",{key:"d0f48d73ce013cbd5b185a437756482c855ac9dc",class:"kol-table-settings__actions"},t(c,{key:"a7e5797e348e821f8054a92121ecff1d61b13135",_label:a("kol-table-settings-cancel"),_variant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),t(c,{key:"b42ca9c4f951fcc93a281f022dabafda59fe3373",_label:a("kol-table-settings-apply"),_variant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return s(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{h as kol_table_settings_wc};

package/dist/kolibri/kol-table-stateful.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e,g as i}from"./index-6b4e51a8.js";import{o,p as a}from"./component-names-60d77143.js";import{t as l}from"./i18n-efbafc80.js";import{K as s,d as r}from"./events-5886c68b.js";import{v as d,a as h,b as c,c as b,d as u,C as p}from"./table-settings-d708d477.js";import{w as f,s as m,q as _,i as g,p as k,o as v,j as y}from"./prop.validators-17aec743.js";import{v as w}from"./label-90c13388.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./common-54bf85ba.js";import"./index-6d801dad.js";import"./dev.utils-fab45cbc.js";const x=["top","bottom","both"],z=(t,n)=>{f(t,"_paginationPosition",(t=>"string"==typeof t&&x.includes(t)),new Set([`PaginationPositionPropType {${x.join(", ")}`]),n,{defaultValue:"bottom"})},S="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\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  }\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: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}",j=S,C=[10,20,50,100],O=t=>!0===t||""===t||"object"==typeof t&&null!==t,P=class{constructor(n){t(this,n),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),m(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),m(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),m(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),m(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void m(this,"_sortedData",this.state._data);let t=this.state._data;this.sortData.length>0&&(t=this.state._data.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0}))),m(this,"_sortedData",t)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this._tableSettings=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){f(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){d(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){h(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){z(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){_(t,(()=>{v(t,(()=>{try{t=k(t)}catch(t){}f(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0)})),n&&setTimeout((()=>this.updateSortedData()))},l=t;null===(n=l.horizontal)||void 0===n||n.forEach(o),null===(e=l.vertical)||void 0===e||e.forEach(o),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=l.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,y("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){w(this,t,{required:!0})}validateMinWidth(t){g(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){c(this,t)}validateOn(t){b(this,t)}validateTableSettings(t){u(this,t)}validatePagination(t){try{t=k(t)}catch(t){}this.showPagination=O(t),f(this,"_pagination",O,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(s.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(s.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const e=l("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${l(`kol-pagination-position-${t}`)})`}});return n("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},n("span",null,l("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),n("div",{class:"kol-table-stateful__pagination-wrapper"},n(o,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||C,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:e})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[p.onSelectionChange])&&this.state._on[p.onSelectionChange](t,a),this.host&&r(this.host,s.selectionChange,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var t,i,o,l;const s=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(i=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==i?i:10:this.state._sortedData.length,this.state._pagination._page||1),r="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,d="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,h={horizontal:null===(o=this.state._headers.horizontal)||void 0===o?void 0:o.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(l=this.state._headers.vertical)||void 0===l?void 0:l.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return n(e,{key:"28ef6723c730e6f9a52694c65b984b27b97bbe43",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&r,n(a,{key:"78fcf96661bd3e57bc41fbc3523096e7de513eeb",ref:this.catchRef,_data:s,_headerCells:h,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings}),this.pageEndSlice>0&&this.showPagination&&d)}get host(){return i(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}};P.style={default:j};export{P as kol_table_stateful};
+import{r as n,h as t,H as e,g as i}from"./index-aceb5633.js";import{l as o,m as a}from"./component-names-799e91e2.js";import{t as l}from"./i18n-01abf777.js";import{w as s,k as r,M as d,A as h,j as c,o as b,D as u}from"./index-88dea7b1.js";import{C as p}from"./keyboard-2483c6de.js";import{K as f,d as m}from"./events-5886c68b.js";import{v as _,a as g,b as k,c as v,d as y}from"./table-settings-b08f49c1.js";import{v as w}from"./label-5982d241.js";import"./i18n-45224cc3.js";const x=["top","bottom","both"],z=(t,n)=>{s(t,"_paginationPosition",(t=>"string"==typeof t&&x.includes(t)),new Set([`PaginationPositionPropType {${x.join(", ")}`]),n,{defaultValue:"bottom"})},S="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\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  }\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: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\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(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}",j=S,C=[10,20,50,100],O=t=>!0===t||""===t||"object"==typeof t&&null!==t,P=class{constructor(t){n(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),r(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),r(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),r(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),r(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void r(this,"_sortedData",this.state._data);const t=[...this.state._data];this.sortData.length>0&&t.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0})),r(this,"_sortedData",t)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this._tableSettings=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){s(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){_(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){g(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){z(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){d(t,(()=>{b(t,(()=>{try{t=c(t)}catch(t){}s(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0)})),n&&setTimeout((()=>this.updateSortedData()))},l=t;null===(n=l.horizontal)||void 0===n||n.forEach(o),null===(e=l.vertical)||void 0===e||e.forEach(o),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=l.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,u("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){w(this,t,{required:!0})}validateMinWidth(t){h(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){k(this,t)}validateOn(t){v(this,t)}validateTableSettings(t){y(this,t)}validatePagination(t){try{t=c(t)}catch(t){}this.showPagination=O(t),s(this,"_pagination",O,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(f.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(f.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(n){const e=l("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${l(`kol-pagination-position-${n}`)})`}});return t("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},t("span",null,l("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),t("div",{class:"kol-table-stateful__pagination-wrapper"},t(o,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||C,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:e})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[p.onSelectionChange])&&this.state._on[p.onSelectionChange](t,a),this.host&&m(this.host,f.selectionChange,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var n,i,o,l,s,r;const d=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(i=null===(n=this.state._pagination)||void 0===n?void 0:n._pageSize)&&void 0!==i?i:10:this.state._sortedData.length,this.state._pagination._page||1),h="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,c="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,p={horizontal:null!==(l=null===(o=this.state._headers.horizontal)||void 0===o?void 0:o.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==l?l:[],vertical:null!==(r=null===(s=this.state._headers.vertical)||void 0===s?void 0:s.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==r?r:[]};return t(e,{key:"28ef6723c730e6f9a52694c65b984b27b97bbe43",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&h,t(a,{key:"78fcf96661bd3e57bc41fbc3523096e7de513eeb",ref:this.catchRef,_data:d,_headerCells:p,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings}),this.pageEndSlice>0&&this.showPagination&&c)}get host(){return i(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}};P.style={default:j};export{P as kol_table_stateful};