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

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

@@ -1 +1 @@
-{"file":"kol-single-select.entry.cjs.js","mappings":"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","names":["InputIconController","fillKeyOptionMap","validateOptions","watchBoolean","watchValidator","watchString","watchNumber","getRenderStates","h","KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc","KolIconTag","translate","clsx","CustomSuggestionsToggleFc","CustomSuggestionsOptionsGroupFc","CustomSuggestionsOptionFc","nonce"],"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"],"version":3}
+{"file":"kol-single-select.entry.cjs.js","mappings":"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","names":["InputIconController","fillKeyOptionMap","validateOptions","watchBoolean","watchValidator","watchString","watchNumber","getRenderStates","h","KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc","KolIconTag","translate","clsx","CustomSuggestionsToggleFc","CustomSuggestionsOptionsGroupFc","CustomSuggestionsOptionFc","nonce"],"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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-87e5e3ad.js");require("./index-8b802221.js");const uniqueNavLabels=require("./unique-nav-labels-879c42cf.js"),validation=require("./validation-2d282d7c.js"),componentNames=require("./component-names-82c4d68d.js"),label=require("./label-21c38949.js"),defaultStyleCss="/*\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}",KolSkipNavDefaultStyle0=defaultStyleCss,KolSkipNav=class{constructor(n){index.registerInstance(this,n),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return index.h("nav",{key:"6696f974f96add5529fce40c73c96429d6d46c14",class:"kol-skip-nav","aria-label":this.state._label},index.h("ul",{key:"44472c7c253cb6bdffd89d999d9b5f11a39bad22",class:"kol-skip-nav__list"},this.state._links.map(((n,e)=>index.h("li",{class:"kol-skip-nav__list-item",key:e},index.h(componentNames.KolLinkWcTag,Object.assign({},n)))))))}validateLabel(n,e,t=!1){t||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,n,{required:!0}),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(n){validation.watchNavLinks("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};KolSkipNav.style={default:KolSkipNavDefaultStyle0},exports.kol_skip_nav=KolSkipNav;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-a40019ac.js");require("./index-94c17ce6.js");const uniqueNavLabels=require("./unique-nav-labels-eee92e0a.js"),validation=require("./validation-515de18a.js"),componentNames=require("./component-names-82c4d68d.js"),label=require("./label-7b22af75.js"),defaultStyleCss="/*\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  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * 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  .kol-input .input {\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    font-size: rem(16);\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__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}",KolSkipNavDefaultStyle0=defaultStyleCss,KolSkipNav=class{constructor(n){index.registerInstance(this,n),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return index.h("nav",{key:"6696f974f96add5529fce40c73c96429d6d46c14",class:"kol-skip-nav","aria-label":this.state._label},index.h("ul",{key:"44472c7c253cb6bdffd89d999d9b5f11a39bad22",class:"kol-skip-nav__list"},this.state._links.map(((n,e)=>index.h("li",{class:"kol-skip-nav__list-item",key:e},index.h(componentNames.KolLinkWcTag,Object.assign({},n)))))))}validateLabel(n,e,t=!1){t||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,n,{required:!0}),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(n){validation.watchNavLinks("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};KolSkipNav.style={default:KolSkipNavDefaultStyle0},exports.kol_skip_nav=KolSkipNav;

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

@@ -1 +1 @@
-{"file":"kol-skip-nav.entry.cjs.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,isJAAisJ,CAAC;AAC1tJ,gCAAe,eAAe;;MCejB,UAAU;;;;;qBA2BiB;YACtC,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;SACV;;IA7BM,MAAM;QACZ,QACCA,kEAAK,KAAK,EAAC,cAAc,gBAAa,IAAI,CAAC,KAAK,CAAC,MAAM,IACtDA,iEAAI,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAEC,OAAa;YACrD,QACCD,gBAAI,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAEC,OAAK,IAC7CD,QAACE,2BAAY,oBAAK,IAAI,EAAiB,CACnC,EACJ;SACF,CAAC,CACE,CACA,EACL;KACF;IAkBM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE;YACbC,8BAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAClC;QACDC,mBAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;QACHC,2BAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC/B;IAGM,aAAa,CAAC,KAAgC;QACpDC,wBAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACzC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEM,oBAAoB;QAC1BH,8BAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;;;;;;;;;;;;","names":["h","index","KolLinkWcTag","removeNavLabel","validateLabel","addNavLabel","watchNavLinks"],"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"],"version":3}
+{"file":"kol-skip-nav.entry.cjs.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ikJAAikJ,CAAC;AAC1lJ,gCAAe,eAAe;;MCejB,UAAU;;;;;qBA2BiB;YACtC,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;SACV;;IA7BM,MAAM;QACZ,QACCA,kEAAK,KAAK,EAAC,cAAc,gBAAa,IAAI,CAAC,KAAK,CAAC,MAAM,IACtDA,iEAAI,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAEC,OAAa;YACrD,QACCD,gBAAI,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAEC,OAAK,IAC7CD,QAACE,2BAAY,oBAAK,IAAI,EAAiB,CACnC,EACJ;SACF,CAAC,CACE,CACA,EACL;KACF;IAkBM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE;YACbC,8BAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAClC;QACDC,mBAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;QACHC,2BAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC/B;IAGM,aAAa,CAAC,KAAgC;QACpDC,wBAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACzC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEM,oBAAoB;QAC1BH,8BAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;;;;;;;;;;;;","names":["h","index","KolLinkWcTag","removeNavLabel","validateLabel","addNavLabel","watchNavLinks"],"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\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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-87e5e3ad.js"),index=require("./index-8b802221.js"),i18n=require("./i18n-b9d16ebc.js"),clsx=require("./clsx-dd4d6dd1.js"),show=require("./show-f24ad825.js");require("./i18n-8c288a27.js");const spinVariantPropTypeOptions=["cycle","dot","none"],validateSpinVariant=(n,e)=>{index.watchValidator(n,"_variant",(n=>"string"==typeof n&&spinVariantPropTypeOptions.includes(n)),new Set(spinVariantPropTypeOptions),e)},defaultStyleCss="/*\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}",KolSpinDefaultStyle0=defaultStyleCss;function renderSpin(n){switch(n){case"cycle":return index$1.h("span",{class:"kol-spin__loader"});case"none":return index$1.h("slot",{name:"expert"});default:return index$1.h(index$1.Fragment,null,index$1.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),index$1.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),index$1.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),index$1.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const KolSpin=class{constructor(n){index$1.registerInstance(this,n),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return index$1.h(index$1.Host,{key:"728409fcfcd08192157e7b2e561ec6c0c1f482c7",class:"kol-spin"},this.state._show?index$1.h("span",{"aria-busy":"true","aria-label":i18n.translate("kol-action-running"),"aria-live":"polite",class:clsx.clsx("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`),role:"alert"},renderSpin(this.state._variant)):this.showToggled&&index$1.h("span",{"aria-label":i18n.translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,show.validateShow(this,n)}validateVariant(n){validateSpinVariant(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};KolSpin.style={default:KolSpinDefaultStyle0},exports.kol_spin=KolSpin;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-a40019ac.js"),index=require("./index-94c17ce6.js"),i18n=require("./i18n-b01aa5d0.js"),clsx=require("./clsx-dd4d6dd1.js"),show=require("./show-0449c2d9.js");require("./i18n-8c288a27.js");const spinVariantPropTypeOptions=["cycle","dot","none"],validateSpinVariant=(n,e)=>{index.watchValidator(n,"_variant",(n=>"string"==typeof n&&spinVariantPropTypeOptions.includes(n)),new Set(spinVariantPropTypeOptions),e)},defaultStyleCss="/*\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  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * 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  .kol-input .input {\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    font-size: rem(16);\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    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__spinner {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}",KolSpinDefaultStyle0=defaultStyleCss;function renderSpin(n){switch(n){case"cycle":return index$1.h("span",{class:"kol-spin__loader"});case"none":return index$1.h("slot",{name:"expert"});default:return index$1.h(index$1.Fragment,null,index$1.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),index$1.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),index$1.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),index$1.h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const KolSpin=class{constructor(n){index$1.registerInstance(this,n),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return index$1.h(index$1.Host,{key:"728409fcfcd08192157e7b2e561ec6c0c1f482c7",class:"kol-spin"},this.state._show?index$1.h("span",{"aria-busy":"true","aria-label":i18n.translate("kol-action-running"),"aria-live":"polite",class:clsx.clsx("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`),role:"alert"},renderSpin(this.state._variant)):this.showToggled&&index$1.h("span",{"aria-label":i18n.translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,show.validateShow(this,n)}validateVariant(n){validateSpinVariant(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};KolSpin.style={default:KolSpinDefaultStyle0},exports.kol_spin=KolSpin;

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

@@ -1 +1 @@
-{"file":"kol-spin.entry.cjs.js","mappings":";;;;;;;;;;;;;;AASA,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAU,CAAC;AAW9D,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAA2B;IACpGA,oBAAc,CACb,SAAS,EACT,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL,CAAC;AACH,CAAC;;AC5BD,MAAM,eAAe,GAAG,83PAA83P,CAAC;AACv5P,6BAAe,eAAe;;ACO9B,SAAS,UAAU,CAAC,OAA4B;IAC/C,QAAQ,OAAO;QACd,KAAK,OAAO;YACX,OAAOC,oBAAM,KAAK,EAAC,kBAAkB,GAAQ,CAAC;QAC/C,KAAK,MAAM;YACV,OAAOA,oBAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;QACpC;YACC,QACCA,kCACCA,oBAAM,KAAK,EAAC,wDAAwD,GAAQ,EAC5EA,oBAAM,KAAK,EAAC,wDAAwD,GAAQ,EAC5EA,oBAAM,KAAK,EAAC,wDAAwD,GAAQ,EAC5EA,oBAAM,KAAK,EAAC,8DAA8D,GAAQ,CAChF,EACF;KACH;AACF,CAAC;MASY,OAAO;;;QACX,gBAAW,GAAG,KAAK,CAAC;qBA0BqC,KAAK;wBAKtB,KAAK;qBAEjB;YACnC,QAAQ,EAAE,KAAK;SACf;;IAjCM,MAAM;QACZ,QACCA,UAACC,YAAI,qDAAC,KAAK,EAAC,UAAU,IACpB,IAAI,CAAC,KAAK,CAAC,KAAK,IAChBD,iCACW,MAAM,gBACJE,cAAS,CAAC,oBAAoB,CAAC,eACjC,QAAQ,EAClB,KAAK,EAAEC,SAAI,CAAC,mBAAmB,EAAE,sBAAsB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,EAC7E,IAAI,EAAC,OAAO,IAEX,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC1B,KAEP,IAAI,CAAC,WAAW,IAAIH,kCAAkBE,cAAS,CAAC,iBAAiB,CAAC,eAAY,OAAO,eAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC7H,CACK,EACN;KACF;IAkBM,YAAY,CAAC,KAAoB;QACvC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;QACrEE,iBAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC1B;IAGM,eAAe,CAAC,KAA2B;QACjD,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KACjC;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;;;;;;;;","names":["watchValidator","h","Host","translate","clsx","validateShow"],"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"],"version":3}
+{"file":"kol-spin.entry.cjs.js","mappings":";;;;;;;;;;;;;;AASA,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAU,CAAC;AAW9D,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAA2B;IACpGA,oBAAc,CACb,SAAS,EACT,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL,CAAC;AACH,CAAC;;AC5BD,MAAM,eAAe,GAAG,quPAAquP,CAAC;AAC9vP,6BAAe,eAAe;;ACO9B,SAAS,UAAU,CAAC,OAA4B;IAC/C,QAAQ,OAAO;QACd,KAAK,OAAO;YACX,OAAOC,oBAAM,KAAK,EAAC,kBAAkB,GAAQ,CAAC;QAC/C,KAAK,MAAM;YACV,OAAOA,oBAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;QACpC;YACC,QACCA,kCACCA,oBAAM,KAAK,EAAC,wDAAwD,GAAQ,EAC5EA,oBAAM,KAAK,EAAC,wDAAwD,GAAQ,EAC5EA,oBAAM,KAAK,EAAC,wDAAwD,GAAQ,EAC5EA,oBAAM,KAAK,EAAC,8DAA8D,GAAQ,CAChF,EACF;KACH;AACF,CAAC;MASY,OAAO;;;QACX,gBAAW,GAAG,KAAK,CAAC;qBA0BqC,KAAK;wBAKtB,KAAK;qBAEjB;YACnC,QAAQ,EAAE,KAAK;SACf;;IAjCM,MAAM;QACZ,QACCA,UAACC,YAAI,qDAAC,KAAK,EAAC,UAAU,IACpB,IAAI,CAAC,KAAK,CAAC,KAAK,IAChBD,iCACW,MAAM,gBACJE,cAAS,CAAC,oBAAoB,CAAC,eACjC,QAAQ,EAClB,KAAK,EAAEC,SAAI,CAAC,mBAAmB,EAAE,sBAAsB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,EAC7E,IAAI,EAAC,OAAO,IAEX,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC1B,KAEP,IAAI,CAAC,WAAW,IAAIH,kCAAkBE,cAAS,CAAC,iBAAiB,CAAC,eAAY,OAAO,eAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC7H,CACK,EACN;KACF;IAkBM,YAAY,CAAC,KAAoB;QACvC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;QACrEE,iBAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC1B;IAGM,eAAe,CAAC,KAA2B;QACjD,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KACjC;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;;;;;;;;","names":["watchValidator","h","Host","translate","clsx","validateShow"],"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\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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-87e5e3ad.js"),i18n=require("./i18n-b9d16ebc.js"),componentNames=require("./component-names-82c4d68d.js"),clsx=require("./clsx-dd4d6dd1.js");require("./i18n-8c288a27.js"),require("./index-8b802221.js");const defaultStyleCss="/*\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}",KolSplitButtonDefaultStyle0=defaultStyleCss,KolSplitButton=class{constructor(n){index.registerInstance(this,n),this.clickButtonHandler={onClick:n=>{var t,e;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.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 index.h("div",{key:"0c88a85fb8276e85ec24cb2e4c6d5b4ea5f4def5",class:"kol-split-button"},index.h("div",{key:"dc3714e07c2520223c2b8cad45898e9815282681",class:"kol-split-button__root"},index.h(componentNames.KolButtonWcTag,{key:"b7f61444b57f22216b4614c2a713c33585183ba1",class:clsx.clsx("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_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}),index.h("div",{key:"fcb8212ab113127e25ebea6b1b69e90fa2c767ae",class:"kol-split-button__horizontal-line"}),index.h(componentNames.KolButtonWcTag,{key:"81fe77362ce48e18fa23d20c6801a8d2cd224a15",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?i18n.translate(`${n}-close`):i18n.translate(`${n}-open`),_on:this.clickToggleHandler})),index.h(componentNames.KolPopoverWcTag,{key:"a70171de4785124fec0f53ece004864f1ef0d2f7",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},index.h("slot",{key:"9ce7ea4b4157712fed4b866c18f50842fbd83704"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};KolSplitButton.style={default:KolSplitButtonDefaultStyle0},exports.kol_split_button=KolSplitButton;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-a40019ac.js"),i18n=require("./i18n-b01aa5d0.js"),componentNames=require("./component-names-82c4d68d.js"),clsx=require("./clsx-dd4d6dd1.js");require("./i18n-8c288a27.js"),require("./index-94c17ce6.js");const defaultStyleCss="/*\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  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * 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  .kol-input .input {\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    font-size: rem(16);\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    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  .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    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    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}",KolSplitButtonDefaultStyle0=defaultStyleCss,KolSplitButton=class{constructor(n){index.registerInstance(this,n),this.clickButtonHandler={onClick:n=>{var t,e;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.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 index.h("div",{key:"0c88a85fb8276e85ec24cb2e4c6d5b4ea5f4def5",class:"kol-split-button"},index.h("div",{key:"dc3714e07c2520223c2b8cad45898e9815282681",class:"kol-split-button__root"},index.h(componentNames.KolButtonWcTag,{key:"4ccd051dd3d8aab40f6c8e6f848cc61da8325d76",class:clsx.clsx("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_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,_buttonVariant:this._variant}),index.h("div",{key:"3e95b357440e81f95d3c318edf1ee7e5ddcd1966",class:"kol-split-button__horizontal-line"}),index.h(componentNames.KolButtonWcTag,{key:"4545c89c1f7edf6e75c4edce2c8a58a366d2cf52",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?i18n.translate(`${n}-close`):i18n.translate(`${n}-open`),_on:this.clickToggleHandler})),index.h(componentNames.KolPopoverWcTag,{key:"db83c79d566cd73b83c36bcf6bdb83a5296a7243",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},index.h("slot",{key:"81ff429669d7ac56bddadaffd1f733eeb10c0726"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};KolSplitButton.style={default:KolSplitButtonDefaultStyle0},exports.kol_split_button=KolSplitButton;

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

@@ -1 +1 @@
-{"file":"kol-split-button.entry.cjs.js","mappings":"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","names":["h","KolButtonWcTag","clsx","translate","KolPopoverWcTag"],"sources":["src/components/split-button/style.scss?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../popover/style.scss' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-split-button {\n\t\tdisplay: flex;\n\t\tfont-size: rem(16);\n\t\tposition: relative;\n\n\t\t&__root {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&__button {\n\t\t\tflex-grow: 1;\n\t\t\ttext-align: left;\n\t\t}\n\n\t\t.kol-popover {\n\t\t\t&__content {\n\t\t\t\tmargin-top: rem(2);\n\t\t\t}\n\n\t\t\t&__arrow {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelPropType,\n\tNamePropType,\n\tSplitButtonProps,\n\tSplitButtonStates,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolButtonWcTag, KolPopoverWcTag } from '../../core/component-names';\nimport clsx from 'clsx';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {\n\tprivate readonly clickButtonHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\t// TODO: this._on is not validated\n\t\t\t\tthis._on?.onClick(event, this._value);\n\t\t\t} else {\n\t\t\t\tthis.toggleDropdown();\n\t\t\t}\n\t\t},\n\t};\n\tprivate readonly clickToggleHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\t\t\tthis.toggleDropdown();\n\t\t},\n\t};\n\n\tprivate readonly toggleDropdown = () => {\n\t\tthis.state = { ...this.state, _show: !this.state._show };\n\t};\n\n\tprivate readonly handleOnClose = () => {\n\t\tthis.state = { ...this.state, _show: false };\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst i18nDropdownLabel = 'kol-split-button-dropdown-label';\n\t\treturn (\n\t\t\t<div class=\"kol-split-button\">\n\t\t\t\t<div class=\"kol-split-button__root\">\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-split-button__button', {\n\t\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t\t_name={this._name}\n\t\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t\t_role={this._role}\n\t\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_type={this._type}\n\t\t\t\t\t\t_value={this._value}\n\t\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t<div class=\"kol-split-button__horizontal-line\"></div>\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-split-button__secondary-button\"\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons=\"codicon codicon-triangle-down\"\n\t\t\t\t\t\t_label={this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}\n\t\t\t\t\t\t_on={this.clickToggleHandler}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t</div>\n\t\t\t\t<KolPopoverWcTag _show={this.state._show} _on={{ onClose: this.handleOnClose }} _align=\"bottom\">\n\t\t\t\t\t<slot />\n\t\t\t\t</KolPopoverWcTag>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Method()\n\tpublic async closePopup() {\n\t\tthis.handleOnClose();\n\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\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 technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\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 * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: SplitButtonStates = {\n\t\t_show: false,\n\t};\n}\n"],"version":3}
+{"file":"kol-split-button.entry.cjs.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,61MAA61M,CAAC;AACt3M,oCAAe,eAAe;;MCkCjB,cAAc;;;QACT,uBAAkB,GAAG;YACrC,OAAO,EAAE,CAAC,KAAiB;;gBAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;gBAExB,IAAI,QAAO,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;oBAE5C,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;iBACtC;qBAAM;oBACN,IAAI,CAAC,cAAc,EAAE,CAAC;iBACtB;aACD;SACD,CAAC;QACe,uBAAkB,GAAG;YACrC,OAAO,EAAE,CAAC,KAAiB;gBAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,IAAI,CAAC,cAAc,EAAE,CAAC;aACtB;SACD,CAAC;QAEe,mBAAc,GAAG;YACjC,IAAI,CAAC,KAAK,mCAAQ,IAAI,CAAC,KAAK,KAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAE,CAAC;SACzD,CAAC;QAEe,kBAAa,GAAG;YAChC,IAAI,CAAC,KAAK,mCAAQ,IAAI,CAAC,KAAK,KAAE,KAAK,EAAE,KAAK,GAAE,CAAC;SAC7C,CAAC;;;;;yBA4EmC,KAAK;0BAOJ,KAAK;;;;;;;;6BAyCW,KAAK;qBAKf,QAAQ;;wBAUF,QAAQ;qBAEf;YAC1C,KAAK,EAAE,KAAK;SACZ;;IA7IM,MAAM;QACZ,MAAM,iBAAiB,GAAG,iCAAiC,CAAC;QAC5D,QACCA,kEAAK,KAAK,EAAC,kBAAkB,IAC5BA,kEAAK,KAAK,EAAC,wBAAwB,IAClCA,QAACC,6BAAc,qDACd,KAAK,EAAEC,SAAI,CAAC,0BAA0B,EAAE;gBACvC,CAAC,IAAI,CAAC,QAAkB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;gBACrD,CAAC,IAAI,CAAC,YAAsB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;aAClI,CAAC,EACF,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,kBAAkB,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,cAAc,EAAE,IAAI,CAAC,QAAQ,GACZ,EAClBF,kEAAK,KAAK,EAAC,mCAAmC,GAAO,EACrDA,QAACC,6BAAc,qDACd,KAAK,EAAC,oCAAoC,EAC1C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,QACV,MAAM,EAAC,+BAA+B,EACtC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAGE,cAAS,CAAC,GAAG,iBAAiB,QAAQ,CAAC,GAAGA,cAAS,CAAC,GAAG,iBAAiB,OAAO,CAAC,EAC3G,GAAG,EAAE,IAAI,CAAC,kBAAkB,GACX,CACb,EACNH,QAACI,8BAAe,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAC,QAAQ,IAC9FJ,oEAAQ,CACS,CACb,EACL;KACF;IAGM,MAAM,UAAU;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;KACzB;;;;;;;;;","names":["h","KolButtonWcTag","clsx","translate","KolPopoverWcTag"],"sources":["src/components/split-button/style.scss?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../popover/style.scss' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-split-button {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\n\t\t&__root {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&__button {\n\t\t\tflex-grow: 1;\n\t\t\ttext-align: left;\n\t\t}\n\n\t\t.kol-popover {\n\t\t\t&__content {\n\t\t\t\tmargin-top: rem(2);\n\t\t\t}\n\n\t\t\t&__arrow {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelPropType,\n\tNamePropType,\n\tSplitButtonProps,\n\tSplitButtonStates,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolButtonWcTag, KolPopoverWcTag } from '../../core/component-names';\nimport clsx from 'clsx';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {\n\tprivate readonly clickButtonHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\t// TODO: this._on is not validated\n\t\t\t\tthis._on?.onClick(event, this._value);\n\t\t\t} else {\n\t\t\t\tthis.toggleDropdown();\n\t\t\t}\n\t\t},\n\t};\n\tprivate readonly clickToggleHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\t\t\tthis.toggleDropdown();\n\t\t},\n\t};\n\n\tprivate readonly toggleDropdown = () => {\n\t\tthis.state = { ...this.state, _show: !this.state._show };\n\t};\n\n\tprivate readonly handleOnClose = () => {\n\t\tthis.state = { ...this.state, _show: false };\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst i18nDropdownLabel = 'kol-split-button-dropdown-label';\n\t\treturn (\n\t\t\t<div class=\"kol-split-button\">\n\t\t\t\t<div class=\"kol-split-button__root\">\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-split-button__button', {\n\t\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t\t_name={this._name}\n\t\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t\t_role={this._role}\n\t\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_type={this._type}\n\t\t\t\t\t\t_value={this._value}\n\t\t\t\t\t\t_buttonVariant={this._variant}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t<div class=\"kol-split-button__horizontal-line\"></div>\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-split-button__secondary-button\"\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons=\"codicon codicon-triangle-down\"\n\t\t\t\t\t\t_label={this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}\n\t\t\t\t\t\t_on={this.clickToggleHandler}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t</div>\n\t\t\t\t<KolPopoverWcTag _show={this.state._show} _on={{ onClose: this.handleOnClose }} _align=\"bottom\">\n\t\t\t\t\t<slot />\n\t\t\t\t</KolPopoverWcTag>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t@Method()\n\tpublic async closePopup() {\n\t\tthis.handleOnClose();\n\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\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 technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\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 * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: SplitButtonStates = {\n\t\t_show: false,\n\t};\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-87e5e3ad.js"),i18n=require("./i18n-b9d16ebc.js"),componentNames=require("./component-names-82c4d68d.js"),events=require("./events-40771c95.js");require("./i18n-8c288a27.js"),require("./index-8b802221.js");const KolTableSettings=class{constructor(e){index.registerInstance(this,e),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],n=s.findIndex((t=>t.key===e)),a="up"===t?n-1:n+1,i=s[n],l=s[a],o=s.map((e=>e.key===i.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:i.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();this.tableSettings.columns.some((e=>e.visible))?this.host&&(this.errorMessage=null,events.dispatchDomEvent(this.host,events.KolEvent.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=i18n.translate("kol-table-settings-error-all-invisible")}render(){const e=[...this.tableSettings.columns].sort(((e,t)=>e.position-t.position));return index.h(componentNames.KolPopoverButtonWcTag,{key:"a3e0145a3399d8dee361f7e29e34198b1ec99b27",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:i18n.translate("kol-table-settings"),_popoverAlign:"top",_hideLabel:!0},index.h("div",{key:"66f2e14ac78f6d865a6a6ad9e2393c94c42fa8a7",class:"kol-table-settings__content"},index.h(componentNames.KolHeadingTag,{key:"558f2b97ac8c7f049147125a642e5e4862108dda",_label:i18n.translate("kol-table-settings"),_level:0}),this.errorMessage&&index.h(componentNames.KolAlertWcTag,{key:"433c0381c504eff423516b40d899751ae5ea4658",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),index.h("form",{key:"404aae1da74273e840c1980fe3a94d126cbfbe8b",onSubmit:this.handleSubmit.bind(this)},index.h("div",{key:"d18a3fe79c0f576dbf23444eb06a744d003b77af",class:"kol-table-settings__columns-container"},index.h("div",{key:"adb1ad8d4afc6e0dc062f7dfb2cbbfebbc5b83d1",class:"kol-table-settings__columns"},e.map(((t,s)=>index.h("div",{key:t.key,class:"kol-table-settings__column"},index.h(componentNames.KolInputCheckboxTag,{_checked:t.visible,_label:i18n.translate("kol-table-settings-show-column",{placeholders:{column:t.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(e,s)=>this.handleVisibilityChange(t.key,s)}}),index.h("span",null,t.label),index.h(componentNames.KolInputNumberTag,{_hideLabel:!0,_value:t.width,_label:i18n.translate("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_on:{onInput:(e,s)=>this.handleWidthChange(t.key,s)}}),index.h(componentNames.KolButtonWcTag,{_icons:"codicon codicon-arrow-up",_label:i18n.translate("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"up")},_disabled:0===s,"data-testid":"table-settings-move-up"}),index.h(componentNames.KolButtonWcTag,{_icons:"codicon codicon-arrow-down",_label:i18n.translate("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"down")},_disabled:s===e.length-1,"data-testid":"table-settings-move-down"})))))),index.h("div",{key:"d0f48d73ce013cbd5b185a437756482c855ac9dc",class:"kol-table-settings__actions"},index.h(componentNames.KolButtonWcTag,{key:"a7e5797e348e821f8054a92121ecff1d61b13135",_label:i18n.translate("kol-table-settings-cancel"),_variant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),index.h(componentNames.KolButtonWcTag,{key:"b42ca9c4f951fcc93a281f022dabafda59fe3373",_label:i18n.translate("kol-table-settings-apply"),_variant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return index.getElement(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};exports.kol_table_settings_wc=KolTableSettings;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-a40019ac.js"),i18n=require("./i18n-b01aa5d0.js"),componentNames=require("./component-names-82c4d68d.js"),events=require("./events-df7aa71f.js");require("./i18n-8c288a27.js"),require("./index-94c17ce6.js");const KolTableSettings=class{constructor(e){index.registerInstance(this,e),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],n=s.findIndex((t=>t.key===e)),a="up"===t?n-1:n+1,i=s[n],l=s[a],o=s.map((e=>e.key===i.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:i.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();this.tableSettings.columns.some((e=>e.visible))?this.host&&(this.errorMessage=null,events.dispatchDomEvent(this.host,events.KolEvent.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=i18n.translate("kol-table-settings-error-all-invisible")}render(){const e=[...this.tableSettings.columns].sort(((e,t)=>e.position-t.position));return index.h(componentNames.KolPopoverButtonWcTag,{key:"a3e0145a3399d8dee361f7e29e34198b1ec99b27",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:i18n.translate("kol-table-settings"),_popoverAlign:"top",_hideLabel:!0},index.h("div",{key:"66f2e14ac78f6d865a6a6ad9e2393c94c42fa8a7",class:"kol-table-settings__content"},index.h(componentNames.KolHeadingTag,{key:"558f2b97ac8c7f049147125a642e5e4862108dda",_label:i18n.translate("kol-table-settings"),_level:0}),this.errorMessage&&index.h(componentNames.KolAlertWcTag,{key:"433c0381c504eff423516b40d899751ae5ea4658",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),index.h("form",{key:"404aae1da74273e840c1980fe3a94d126cbfbe8b",onSubmit:this.handleSubmit.bind(this)},index.h("div",{key:"d18a3fe79c0f576dbf23444eb06a744d003b77af",class:"kol-table-settings__columns-container"},index.h("div",{key:"adb1ad8d4afc6e0dc062f7dfb2cbbfebbc5b83d1",class:"kol-table-settings__columns"},e.map(((t,s)=>index.h("div",{key:t.key,class:"kol-table-settings__column"},index.h(componentNames.KolInputCheckboxTag,{_checked:t.visible,_label:i18n.translate("kol-table-settings-show-column",{placeholders:{column:t.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(e,s)=>this.handleVisibilityChange(t.key,s)}}),index.h("span",null,t.label),index.h(componentNames.KolInputNumberTag,{_hideLabel:!0,_value:t.width,_label:i18n.translate("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_on:{onInput:(e,s)=>this.handleWidthChange(t.key,s)}}),index.h(componentNames.KolButtonWcTag,{_icons:"codicon codicon-arrow-up",_label:i18n.translate("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"up")},_disabled:0===s,"data-testid":"table-settings-move-up"}),index.h(componentNames.KolButtonWcTag,{_icons:"codicon codicon-arrow-down",_label:i18n.translate("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(t.key,"down")},_disabled:s===e.length-1,"data-testid":"table-settings-move-down"})))))),index.h("div",{key:"07f4257444c1093dd6ec20a2cf7dfadc85699d85",class:"kol-table-settings__actions"},index.h(componentNames.KolButtonWcTag,{key:"f190eb5faee74b857c23e1c5bb13ee8da9a5d96d",_label:i18n.translate("kol-table-settings-cancel"),_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),index.h(componentNames.KolButtonWcTag,{key:"e3954fe4f3bec3e0aff45b207e712efb352dca92",_label:i18n.translate("kol-table-settings-apply"),_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return index.getElement(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};exports.kol_table_settings_wc=KolTableSettings;

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

@@ -1 +1 @@
-{"file":"kol-table-settings-wc.entry.cjs.js","mappings":"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","names":["translate","dispatchDomEvent","KolEvent","h","KolPopoverButtonWcTag","KolHeadingTag","KolAlertWcTag","index","KolInputCheckboxTag","KolInputNumberTag","KolButtonWcTag"],"sources":["src/components/table-stateless/table-settings.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { translate } from '../../i18n';\nimport { KolAlertWcTag, KolButtonWcTag, KolHeadingTag, KolInputCheckboxTag, KolInputNumberTag, KolPopoverButtonWcTag } from '../../core/component-names';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport type { TableSettingsPropType } from '../../schema/props/table-settings';\nimport type { ColumnSettings } from '../../schema';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-table-settings-wc',\n\tshadow: false,\n})\nexport class KolTableSettings {\n\t@Element() private readonly host?: HTMLKolTableSettingsWcElement;\n\t@State() tableSettings: TableSettingsPropType = { columns: [] };\n\t@State() errorMessage: string | null = null;\n\t@Prop() _tableSettings: TableSettingsPropType = { columns: [] };\n\n\t@Watch('_tableSettings')\n\thandleTableSettingsChange(newValue: TableSettingsPropType) {\n\t\tthis.tableSettings = {\n\t\t\t...newValue,\n\t\t\tcolumns: this.sortColumnsByPosition(newValue.columns),\n\t\t};\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.handleTableSettingsChange(this._tableSettings);\n\t}\n\n\tprivate popoverRef: HTMLKolPopoverButtonWcElement | undefined;\n\n\tprivate sortColumnsByPosition(columns: ColumnSettings[]): ColumnSettings[] {\n\t\treturn [...columns].sort((colA, colB) => colA.position - colB.position);\n\t}\n\n\tprivate moveColumn(columnId: string, direction: 'up' | 'down'): void {\n\t\tconst columnSettings = [...this.tableSettings.columns];\n\n\t\tconst sourceIndex = columnSettings.findIndex((col) => col.key === columnId);\n\t\tconst targetIndex = direction === 'up' ? sourceIndex - 1 : sourceIndex + 1;\n\n\t\tconst source = columnSettings[sourceIndex];\n\t\tconst target = columnSettings[targetIndex];\n\n\t\tconst newCols = columnSettings.map((col) => {\n\t\t\tif (col.key === source.key) return { ...col, position: target.position };\n\t\t\tif (col.key === target.key) return { ...col, position: source.position };\n\t\t\treturn col;\n\t\t});\n\n\t\t// re-sort by position and update\n\t\tthis.tableSettings = {\n\t\t\t...this.tableSettings,\n\t\t\tcolumns: this.sortColumnsByPosition(newCols),\n\t\t};\n\t}\n\n\tprivate handleVisibilityChange(key: string, visible: unknown): void {\n\t\tthis.tableSettings = {\n\t\t\t...this.tableSettings,\n\t\t\tcolumns: this.tableSettings.columns.map((col) => (col.key === key ? { ...col, visible: Boolean(visible) } : col)),\n\t\t};\n\t}\n\n\tprivate handleWidthChange(key: string, width: unknown): void {\n\t\tthis.tableSettings = {\n\t\t\t...this.tableSettings,\n\t\t\tcolumns: this.tableSettings.columns.map((col) => (col.key === key ? { ...col, width: Number(width) } : col)),\n\t\t};\n\t}\n\n\tprivate handleCancel() {\n\t\tvoid this.popoverRef?.hidePopover();\n\t}\n\n\tprivate handleSubmit(event: Event): void {\n\t\tevent.preventDefault();\n\n\t\tconst hasVisibleColumn = this.tableSettings.columns.some((column) => column.visible);\n\n\t\tif (!hasVisibleColumn) {\n\t\t\tthis.errorMessage = translate('kol-table-settings-error-all-invisible');\n\t\t\treturn;\n\t\t} else if (this.host) {\n\t\t\tthis.errorMessage = null;\n\t\t\tdispatchDomEvent(this.host, KolEvent.settingsChange, this.tableSettings);\n\t\t\tvoid this.popoverRef?.hidePopover();\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst sortedColumns = [...this.tableSettings.columns].sort((a, b) => a.position - b.position);\n\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={(el) => (this.popoverRef = el)}\n\t\t\t\tclass=\"kol-table-settings\"\n\t\t\t\t_icons=\"codicon codicon-settings-gear\"\n\t\t\t\t_label={translate('kol-table-settings')}\n\t\t\t\t_popoverAlign=\"top\"\n\t\t\t\t_hideLabel\n\t\t\t>\n\t\t\t\t<div class=\"kol-table-settings__content\">\n\t\t\t\t\t<KolHeadingTag _label={translate('kol-table-settings')} _level={0} />\n\n\t\t\t\t\t{this.errorMessage && <KolAlertWcTag _type=\"error\" _label={this.errorMessage} _variant=\"msg\" class=\"kol-table-settings__error-message\" />}\n\n\t\t\t\t\t<form onSubmit={this.handleSubmit.bind(this)}>\n\t\t\t\t\t\t<div class=\"kol-table-settings__columns-container\">\n\t\t\t\t\t\t\t<div class=\"kol-table-settings__columns\">\n\t\t\t\t\t\t\t\t{sortedColumns.map((column, index) => (\n\t\t\t\t\t\t\t\t\t<div key={column.key} class=\"kol-table-settings__column\">\n\t\t\t\t\t\t\t\t\t\t<KolInputCheckboxTag\n\t\t\t\t\t\t\t\t\t\t\t_checked={column.visible}\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-show-column', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_value={true}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleVisibilityChange(column.key, value) }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span>{column.label}</span>\n\t\t\t\t\t\t\t\t\t\t<KolInputNumberTag\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_value={column.width}\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-column-width', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_min={1}\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleWidthChange(column.key, value) }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t\t_icons=\"codicon codicon-arrow-up\"\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-move-up', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key, 'up') }}\n\t\t\t\t\t\t\t\t\t\t\t_disabled={index === 0}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-up\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t\t_icons=\"codicon codicon-arrow-down\"\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-move-down', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key, 'down') }}\n\t\t\t\t\t\t\t\t\t\t\t_disabled={index === sortedColumns.length - 1}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-down\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"kol-table-settings__actions\">\n\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-cancel')}\n\t\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t\t_on={{ onClick: () => this.handleCancel() }}\n\t\t\t\t\t\t\t\tdata-testid=\"table-settings-cancel\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<KolButtonWcTag _label={translate('kol-table-settings-apply')} _variant=\"primary\" _type=\"submit\" data-testid=\"table-settings-apply\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</form>\n\t\t\t\t</div>\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-table-settings-wc.entry.cjs.js","mappings":"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","names":["translate","dispatchDomEvent","KolEvent","h","KolPopoverButtonWcTag","KolHeadingTag","KolAlertWcTag","index","KolInputCheckboxTag","KolInputNumberTag","KolButtonWcTag"],"sources":["src/components/table-stateless/table-settings.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { translate } from '../../i18n';\nimport { KolAlertWcTag, KolButtonWcTag, KolHeadingTag, KolInputCheckboxTag, KolInputNumberTag, KolPopoverButtonWcTag } from '../../core/component-names';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport type { TableSettingsPropType } from '../../schema/props/table-settings';\nimport type { ColumnSettings } from '../../schema';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-table-settings-wc',\n\tshadow: false,\n})\nexport class KolTableSettings {\n\t@Element() private readonly host?: HTMLKolTableSettingsWcElement;\n\t@State() tableSettings: TableSettingsPropType = { columns: [] };\n\t@State() errorMessage: string | null = null;\n\t@Prop() _tableSettings: TableSettingsPropType = { columns: [] };\n\n\t@Watch('_tableSettings')\n\thandleTableSettingsChange(newValue: TableSettingsPropType) {\n\t\tthis.tableSettings = {\n\t\t\t...newValue,\n\t\t\tcolumns: this.sortColumnsByPosition(newValue.columns),\n\t\t};\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.handleTableSettingsChange(this._tableSettings);\n\t}\n\n\tprivate popoverRef: HTMLKolPopoverButtonWcElement | undefined;\n\n\tprivate sortColumnsByPosition(columns: ColumnSettings[]): ColumnSettings[] {\n\t\treturn [...columns].sort((colA, colB) => colA.position - colB.position);\n\t}\n\n\tprivate moveColumn(columnId: string, direction: 'up' | 'down'): void {\n\t\tconst columnSettings = [...this.tableSettings.columns];\n\n\t\tconst sourceIndex = columnSettings.findIndex((col) => col.key === columnId);\n\t\tconst targetIndex = direction === 'up' ? sourceIndex - 1 : sourceIndex + 1;\n\n\t\tconst source = columnSettings[sourceIndex];\n\t\tconst target = columnSettings[targetIndex];\n\n\t\tconst newCols = columnSettings.map((col) => {\n\t\t\tif (col.key === source.key) return { ...col, position: target.position };\n\t\t\tif (col.key === target.key) return { ...col, position: source.position };\n\t\t\treturn col;\n\t\t});\n\n\t\t// re-sort by position and update\n\t\tthis.tableSettings = {\n\t\t\t...this.tableSettings,\n\t\t\tcolumns: this.sortColumnsByPosition(newCols),\n\t\t};\n\t}\n\n\tprivate handleVisibilityChange(key: string, visible: unknown): void {\n\t\tthis.tableSettings = {\n\t\t\t...this.tableSettings,\n\t\t\tcolumns: this.tableSettings.columns.map((col) => (col.key === key ? { ...col, visible: Boolean(visible) } : col)),\n\t\t};\n\t}\n\n\tprivate handleWidthChange(key: string, width: unknown): void {\n\t\tthis.tableSettings = {\n\t\t\t...this.tableSettings,\n\t\t\tcolumns: this.tableSettings.columns.map((col) => (col.key === key ? { ...col, width: Number(width) } : col)),\n\t\t};\n\t}\n\n\tprivate handleCancel() {\n\t\tvoid this.popoverRef?.hidePopover();\n\t}\n\n\tprivate handleSubmit(event: Event): void {\n\t\tevent.preventDefault();\n\n\t\tconst hasVisibleColumn = this.tableSettings.columns.some((column) => column.visible);\n\n\t\tif (!hasVisibleColumn) {\n\t\t\tthis.errorMessage = translate('kol-table-settings-error-all-invisible');\n\t\t\treturn;\n\t\t} else if (this.host) {\n\t\t\tthis.errorMessage = null;\n\t\t\tdispatchDomEvent(this.host, KolEvent.settingsChange, this.tableSettings);\n\t\t\tvoid this.popoverRef?.hidePopover();\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst sortedColumns = [...this.tableSettings.columns].sort((a, b) => a.position - b.position);\n\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={(el) => (this.popoverRef = el)}\n\t\t\t\tclass=\"kol-table-settings\"\n\t\t\t\t_icons=\"codicon codicon-settings-gear\"\n\t\t\t\t_label={translate('kol-table-settings')}\n\t\t\t\t_popoverAlign=\"top\"\n\t\t\t\t_hideLabel\n\t\t\t>\n\t\t\t\t<div class=\"kol-table-settings__content\">\n\t\t\t\t\t<KolHeadingTag _label={translate('kol-table-settings')} _level={0} />\n\n\t\t\t\t\t{this.errorMessage && <KolAlertWcTag _type=\"error\" _label={this.errorMessage} _variant=\"msg\" class=\"kol-table-settings__error-message\" />}\n\n\t\t\t\t\t<form onSubmit={this.handleSubmit.bind(this)}>\n\t\t\t\t\t\t<div class=\"kol-table-settings__columns-container\">\n\t\t\t\t\t\t\t<div class=\"kol-table-settings__columns\">\n\t\t\t\t\t\t\t\t{sortedColumns.map((column, index) => (\n\t\t\t\t\t\t\t\t\t<div key={column.key} class=\"kol-table-settings__column\">\n\t\t\t\t\t\t\t\t\t\t<KolInputCheckboxTag\n\t\t\t\t\t\t\t\t\t\t\t_checked={column.visible}\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-show-column', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_value={true}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleVisibilityChange(column.key, value) }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span>{column.label}</span>\n\t\t\t\t\t\t\t\t\t\t<KolInputNumberTag\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_value={column.width}\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-column-width', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_min={1}\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleWidthChange(column.key, value) }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t\t_icons=\"codicon codicon-arrow-up\"\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-move-up', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_buttonVariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key, 'up') }}\n\t\t\t\t\t\t\t\t\t\t\t_disabled={index === 0}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-up\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t\t_icons=\"codicon codicon-arrow-down\"\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-move-down', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_buttonVariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key, 'down') }}\n\t\t\t\t\t\t\t\t\t\t\t_disabled={index === sortedColumns.length - 1}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-down\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"kol-table-settings__actions\">\n\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-cancel')}\n\t\t\t\t\t\t\t\t_buttonVariant=\"secondary\"\n\t\t\t\t\t\t\t\t_on={{ onClick: () => this.handleCancel() }}\n\t\t\t\t\t\t\t\tdata-testid=\"table-settings-cancel\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<KolButtonWcTag _label={translate('kol-table-settings-apply')} _buttonVariant=\"primary\" _type=\"submit\" data-testid=\"table-settings-apply\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</form>\n\t\t\t\t</div>\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n}\n"],"version":3}