@public-ui/components 3.0.2-ab502d4896d9763f93bb8cce1b07a1b2f8d04439.0 → 3.0.2-d721ede5369345abe032367b7d05a7c5a20dca9b.0

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSplitButtonDefaultStyle0","KolSplitButton","this","clickButtonHandler","onClick","event","stopPropagation","_a","_on","_b","_value","toggleDropdown","clickToggleHandler","state","Object","assign","_show","handleOnClose","render","i18nDropdownLabel","h","key","class","KolButtonWcTag","clsx","_variant","_customClass","length","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_label","_name","_role","_syncValueBySelector","_tooltipAlign","_type","_buttonVariant","translate","KolPopoverWcTag","onClose","_align","closePopup","Promise","resolve"],"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"],"mappings":";;;6OAAA,MAAMA,EAAkB,81MACxB,MAAAC,EAAeD,E,MCkCFE,EAAc,M,yBACTC,KAAAC,mBAAqB,CACrCC,QAAUC,I,QACTA,EAAMC,kBAEN,WAAWC,EAAAL,KAAKM,OAAG,MAAAD,SAAA,SAAAA,EAAEH,WAAY,WAAY,EAE5CK,EAAAP,KAAKM,OAAG,MAAAC,SAAA,SAAAA,EAAEL,QAAQC,EAAOH,KAAKQ,O,KACxB,CACNR,KAAKS,gB,IAIST,KAAAU,mBAAqB,CACrCR,QAAUC,IACTA,EAAMC,kBACNJ,KAAKS,gBAAgB,GAINT,KAAAS,eAAiB,KACjCT,KAAKW,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQb,KAAKW,OAAK,CAAEG,OAAQd,KAAKW,MAAMG,OAAO,EAGxCd,KAAAe,cAAgB,KAChCf,KAAKW,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQb,KAAKW,OAAK,CAAEG,MAAO,OAAO,E,kIA6ER,M,gBAOC,M,mLAyCgB,M,WAKV,S,oCAUM,S,WAEP,CAC1CA,MAAO,M,CA5ID,MAAAE,GACN,MAAMC,EAAoB,kCAC1B,OACCC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACVF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACVF,EAACG,EAAc,CAAAF,IAAA,2CACdC,MAAOE,EAAK,2BAA4B,CACvC,CAACtB,KAAKuB,UAAqBvB,KAAKuB,WAAa,SAC7C,CAACvB,KAAKwB,cAAyBxB,KAAKuB,WAAa,iBAAmBvB,KAAKwB,eAAiB,UAAYxB,KAAKwB,aAAaC,OAAS,IAElIC,cAAe1B,KAAK0B,cACpBC,cAAe3B,KAAK2B,cACpBC,cAAe5B,KAAK4B,cACpBJ,aAAcxB,KAAKwB,aACnBK,UAAW7B,KAAK6B,UAChBC,OAAQ9B,KAAK8B,OACbC,WAAY/B,KAAK+B,WACjBC,OAAQhC,KAAKgC,OACbC,MAAOjC,KAAKiC,MACZ3B,IAAKN,KAAKC,mBACViC,MAAOlC,KAAKkC,MACZC,qBAAsBnC,KAAKmC,qBAC3BC,cAAepC,KAAKoC,cACpBC,MAAOrC,KAAKqC,MACZ7B,OAAQR,KAAKQ,OACb8B,eAAgBtC,KAAKuB,WAEtBL,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sCACXF,EAACG,EAAc,CAAAF,IAAA,2CACdC,MAAM,qCACNS,UAAW7B,KAAK6B,UAChBE,WAAU,KACVD,OAAO,gCACPE,OAAQhC,KAAKW,MAAMG,MAAQyB,EAAU,GAAGtB,WAA6BsB,EAAU,GAAGtB,UAClFX,IAAKN,KAAKU,sBAGZQ,EAACsB,EAAe,CAAArB,IAAA,2CAACL,MAAOd,KAAKW,MAAMG,MAAOR,IAAK,CAAEmC,QAASzC,KAAKe,eAAiB2B,OAAO,UACtFxB,EAAA,QAAAC,IAAA,8C,CAOG,gBAAMwB,GACZ3C,KAAKe,gBAEL,OAAO6B,QAAQC,S","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolSplitButtonDefaultStyle0","KolSplitButton","this","catchPrimaryRef","ref","primaryButtonWcRef","clickButtonHandler","onClick","event","stopPropagation","_a","_on","_b","_value","clickToggleHandler","toggleDropdown","state","Object","assign","_show","handleOnClose","getValue","kolFocus","render","i18nDropdownLabel","h","key","class","KolButtonWcTag","clsx","_variant","_customClass","length","_accessKey","_ariaControls","_ariaDescription","_ariaExpanded","_ariaSelected","_disabled","_icons","_id","_hideLabel","_label","_name","_role","_shortKey","_syncValueBySelector","_tooltipAlign","_type","_buttonVariant","translate","KolPopoverWcTag","onClose","_align","closePopup","Promise","resolve"],"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\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tSplitButtonProps,\n\tSplitButtonStates,\n\tStencilUnknown,\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 primaryButtonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchPrimaryRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.primaryButtonWcRef = ref;\n\t};\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\tpublic async kolFocus() {\n\t\tawait this.primaryButtonWcRef?.kolFocus();\n\t}\n\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}\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\tref={this.catchPrimaryRef}\n\t\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t\t_ariaDescription={this._ariaDescription}\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_id={this._id}\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_shortKey={this._shortKey}\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 key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\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 the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\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!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\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 * 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 * 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?: 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"],"mappings":";;;6OAAA,MAAMA,EAAkB,81MACxB,MAAAC,EAAeD,E,MCmCFE,EAAc,M,yBAGTC,KAAAC,gBAAmBC,IACnCF,KAAKG,mBAAqBD,CAAG,EAcbF,KAAAI,mBAAqB,CACrCC,QAAUC,I,QACTA,EAAMC,kBAEN,WAAWC,EAAAR,KAAKS,OAAG,MAAAD,SAAA,SAAAA,EAAEH,WAAY,WAAY,EAE5CK,EAAAV,KAAKS,OAAG,MAAAC,SAAA,SAAAA,EAAEL,QAAQC,EAAON,KAAKW,O,IAIhBX,KAAAY,mBAAqB,CACrCP,QAAUC,IACTA,EAAMC,kBACNP,KAAKa,gBAAgB,GAINb,KAAAa,eAAiB,KACjCb,KAAKc,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQhB,KAAKc,OAAK,CAAEG,OAAQjB,KAAKc,MAAMG,OAAO,EAGxCjB,KAAAkB,cAAgB,KAChClB,KAAKc,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQhB,KAAKc,OAAK,CAAEG,MAAO,OAAO,E,4LA4FR,M,gBAOC,M,4MA8CgB,M,WAKV,S,oCAUM,S,WAEP,CAC1CA,MAAO,M,CAlMD,cAAME,GACZ,OAAOnB,KAAKW,M,CAIN,cAAMS,G,aACNZ,EAAAR,KAAKG,sBAAkB,MAAAK,SAAA,SAAAA,EAAEY,W,CA4BzB,MAAAC,GACN,MAAMC,EAAoB,kCAC1B,OACCC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACVF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACVF,EAACG,EAAc,CAAAF,IAAA,2CACdC,MAAOE,EAAK,2BAA4B,CACvC,CAAC3B,KAAK4B,UAAqB5B,KAAK4B,WAAa,SAC7C,CAAC5B,KAAK6B,cAAyB7B,KAAK4B,WAAa,iBAAmB5B,KAAK6B,eAAiB,UAAY7B,KAAK6B,aAAaC,OAAS,IAElI5B,IAAKF,KAAKC,gBACV8B,WAAY/B,KAAK+B,WACjBC,cAAehC,KAAKgC,cACpBC,iBAAkBjC,KAAKiC,iBACvBC,cAAelC,KAAKkC,cACpBC,cAAenC,KAAKmC,cACpBN,aAAc7B,KAAK6B,aACnBO,UAAWpC,KAAKoC,UAChBC,OAAQrC,KAAKqC,OACbC,IAAKtC,KAAKsC,IACVC,WAAYvC,KAAKuC,WACjBC,OAAQxC,KAAKwC,OACbC,MAAOzC,KAAKyC,MACZhC,IAAKT,KAAKI,mBACVsC,MAAO1C,KAAK0C,MACZC,UAAW3C,KAAK2C,UAChBC,qBAAsB5C,KAAK4C,qBAC3BC,cAAe7C,KAAK6C,cACpBC,MAAO9C,KAAK8C,MACZnC,OAAQX,KAAKW,OACboC,eAAgB/C,KAAK4B,WAEtBL,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sCACXF,EAACG,EAAc,CAAAF,IAAA,2CACdC,MAAM,qCACNW,UAAWpC,KAAKoC,UAChBG,WAAU,KACVF,OAAO,gCACPG,OAAQxC,KAAKc,MAAMG,MAAQ+B,EAAU,GAAG1B,WAA6B0B,EAAU,GAAG1B,UAClFb,IAAKT,KAAKY,sBAGZW,EAAC0B,EAAe,CAAAzB,IAAA,2CAACP,MAAOjB,KAAKc,MAAMG,MAAOR,IAAK,CAAEyC,QAASlD,KAAKkB,eAAiBiC,OAAO,UACtF5B,EAAA,QAAAC,IAAA,8C,CAOG,gBAAM4B,GACZpD,KAAKkB,gBAEL,OAAOmC,QAAQC,S","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,g as s}from"./index-1704c42b.js";import{t as i}from"./i18n-260f0fe9.js";import{t as a,c as n,u as l,v as o,b as c,j as b}from"./component-names-553d8bfa.js";import{d,K as r}from"./events-bad0a075.js";import"./i18n-45224cc3.js";import"./index-ebe5a881.js";const h=class{constructor(e){t(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],i=s.findIndex((t=>t.key===e)),a="up"===t?i-1:i+1,n=s[i],l=s[a],o=s.map((e=>e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e));this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s))})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s))})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();const s=this.tableSettings.columns.some((e=>e.visible));s?this.host&&(this.errorMessage=null,d(this.host,r.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=i("kol-table-settings-error-all-invisible")}render(){const t=[...this.tableSettings.columns].sort(((e,t)=>e.position-t.position));return e(b,{key:"efbe65355597dcc6a5b5b5e23077b037ab90318c",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:i("kol-table-settings"),_popoverAlign:"top",_hideLabel:!0},e("div",{key:"5b149682787c1fb1fb73faab858b7ec7d4d753e4",class:"kol-table-settings__content"},e(a,{key:"3e651488c0b04dfcd1acf8a32a4f060e4b08d0a6",_label:i("kol-table-settings"),_level:0}),this.errorMessage&&e(n,{key:"5b5cfdfdce5ae3da8b378a574abfea48b0c04460",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),e("form",{key:"b9b80cd51c8ec1e89c1559201e6e0f0287c48c86",onSubmit:this.handleSubmit.bind(this)},e("div",{key:"0675d6796ab9e94592dad2649933e5c3905026b6",class:"kol-table-settings__columns-container"},e("div",{key:"76eca8bcb960febf13c5ecd7f64cb1b8c295edc7",class:"kol-table-settings__columns"},t.map(((s,a)=>e("div",{key:s.key,class:"kol-table-settings__column"},e(l,{_checked:s.visible,_label:i("kol-table-settings-show-column",{placeholders:{column:s.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(e,t)=>this.handleVisibilityChange(s.key,t)}}),e("span",null,s.label),e(o,{_hideLabel:!0,_value:s.width,_label:i("kol-table-settings-column-width",{placeholders:{column:s.label}}),_min:1,_on:{onInput:(e,t)=>this.handleWidthChange(s.key,t)}}),e(c,{_icons:"codicon codicon-arrow-up",_label:i("kol-table-settings-move-up",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"up")},_disabled:0===a,"data-testid":"table-settings-move-up"}),e(c,{_icons:"codicon codicon-arrow-down",_label:i("kol-table-settings-move-down",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"down")},_disabled:a===t.length-1,"data-testid":"table-settings-move-down"})))))),e("div",{key:"b48eb18949304209ed611de05ce4ea26f4035fd5",class:"kol-table-settings__actions"},e(c,{key:"6a5ec1307960f14e0c3fbb513ccf7ea79914793a",_label:i("kol-table-settings-cancel"),_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),e(c,{key:"4f40c7f57985ee0f9264a3f33fe819bd9e9467cc",_label:i("kol-table-settings-apply"),_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return s(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{h as kol_table_settings_wc};
+import{r as t,h as e,g as s}from"./index-4d380356.js";import{t as i}from"./i18n-260f0fe9.js";import{t as a,c as n,u as l,v as o,b as c,j as b}from"./component-names-553d8bfa.js";import{d,K as r}from"./events-bad0a075.js";import"./i18n-45224cc3.js";import"./index-ebe5a881.js";const h=class{constructor(e){t(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],i=s.findIndex((t=>t.key===e)),a="up"===t?i-1:i+1,n=s[i],l=s[a],o=s.map((e=>e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e));this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s))})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s))})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();const s=this.tableSettings.columns.some((e=>e.visible));s?this.host&&(this.errorMessage=null,d(this.host,r.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=i("kol-table-settings-error-all-invisible")}render(){const t=[...this.tableSettings.columns].sort(((e,t)=>e.position-t.position));return e(b,{key:"efbe65355597dcc6a5b5b5e23077b037ab90318c",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:i("kol-table-settings"),_popoverAlign:"top",_hideLabel:!0},e("div",{key:"5b149682787c1fb1fb73faab858b7ec7d4d753e4",class:"kol-table-settings__content"},e(a,{key:"3e651488c0b04dfcd1acf8a32a4f060e4b08d0a6",_label:i("kol-table-settings"),_level:0}),this.errorMessage&&e(n,{key:"5b5cfdfdce5ae3da8b378a574abfea48b0c04460",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),e("form",{key:"b9b80cd51c8ec1e89c1559201e6e0f0287c48c86",onSubmit:this.handleSubmit.bind(this)},e("div",{key:"0675d6796ab9e94592dad2649933e5c3905026b6",class:"kol-table-settings__columns-container"},e("div",{key:"76eca8bcb960febf13c5ecd7f64cb1b8c295edc7",class:"kol-table-settings__columns"},t.map(((s,a)=>e("div",{key:s.key,class:"kol-table-settings__column"},e(l,{_checked:s.visible,_label:i("kol-table-settings-show-column",{placeholders:{column:s.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(e,t)=>this.handleVisibilityChange(s.key,t)}}),e("span",null,s.label),e(o,{_hideLabel:!0,_value:s.width,_label:i("kol-table-settings-column-width",{placeholders:{column:s.label}}),_min:1,_on:{onInput:(e,t)=>this.handleWidthChange(s.key,t)}}),e(c,{_icons:"codicon codicon-arrow-up",_label:i("kol-table-settings-move-up",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"up")},_disabled:0===a,"data-testid":"table-settings-move-up"}),e(c,{_icons:"codicon codicon-arrow-down",_label:i("kol-table-settings-move-down",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"down")},_disabled:a===t.length-1,"data-testid":"table-settings-move-down"})))))),e("div",{key:"b48eb18949304209ed611de05ce4ea26f4035fd5",class:"kol-table-settings__actions"},e(c,{key:"6a5ec1307960f14e0c3fbb513ccf7ea79914793a",_label:i("kol-table-settings-cancel"),_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),e(c,{key:"4f40c7f57985ee0f9264a3f33fe819bd9e9467cc",_label:i("kol-table-settings-apply"),_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return s(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{h as kol_table_settings_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as e,g as i}from"./index-1704c42b.js";import{m as o,n as a}from"./component-names-553d8bfa.js";import{t as l}from"./i18n-260f0fe9.js";import{w as s,l as r,M as d,B as h,k as c,o as u,D as b}from"./index-ebe5a881.js";import{C as p}from"./keyboard-2483c6de.js";import{K as f,d as m}from"./events-bad0a075.js";import{v as _,a as g,b as k,c as v,d as y}from"./table-settings-c12356ed.js";import{v as w}from"./label-bf9966d0.js";import"./i18n-45224cc3.js";const x=["top","bottom","both"],S=(t,n)=>{s(t,"_paginationPosition",(t=>"string"==typeof t&&x.includes(t)),new Set([`PaginationPositionPropType {${x.join(", ")}`]),n,{defaultValue:"bottom"})},z="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\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  :host {\n    display: block;\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-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}\n@layer kol-component {\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}",j=z,C=[10,20,50,100],O=t=>!0===t||""===t||"object"==typeof t&&null!==t,P=class{constructor(t){n(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),r(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),r(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),r(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),r(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void r(this,"_sortedData",this.state._data);const t=[...this.state._data];this.sortData.length>0&&t.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0})),r(this,"_sortedData",t)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this._tableSettings=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){s(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){_(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){g(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){S(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key===(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){d(t,(()=>{u(t,(()=>{try{t=c(t)}catch(t){}s(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0)})),n&&setTimeout((()=>this.updateSortedData()))},l=t;null===(n=l.horizontal)||void 0===n||n.forEach(o),null===(e=l.vertical)||void 0===e||e.forEach(o),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=l.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,b("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){w(this,t,{required:!0})}validateMinWidth(t){h(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){k(this,t)}validateOn(t){v(this,t)}validateTableSettings(t){y(this,t)}validatePagination(t){try{t=c(t)}catch(t){}this.showPagination=O(t),s(this,"_pagination",O,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(f.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(f.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(n){const e=l("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${l(`kol-pagination-position-${n}`)})`}});return t("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},t("span",null,l("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),t("div",{class:"kol-table-stateful__pagination-wrapper"},t(o,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||C,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:e})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[p.onSelectionChange])&&this.state._on[p.onSelectionChange](t,a),this.host&&m(this.host,f.selectionChange,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var n,i,o,l,s,r;const d=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(i=null===(n=this.state._pagination)||void 0===n?void 0:n._pageSize)&&void 0!==i?i:10:this.state._sortedData.length,this.state._pagination._page||1),h="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,c="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,p={horizontal:null!==(l=null===(o=this.state._headers.horizontal)||void 0===o?void 0:o.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==l?l:[],vertical:null!==(r=null===(s=this.state._headers.vertical)||void 0===s?void 0:s.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==r?r:[]};return t(e,{key:"807cc711bfe34ca458ec8aecb858234761e8a1de",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&h,t(a,{key:"2d5f259e75c6f178a06237bef92bc72d3b182ec5",ref:this.catchRef,_data:d,_headerCells:p,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings}),this.pageEndSlice>0&&this.showPagination&&c)}get host(){return i(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}};P.style={default:j};export{P as kol_table_stateful};
+import{r as n,h as t,H as e,g as i}from"./index-4d380356.js";import{m as o,n as a}from"./component-names-553d8bfa.js";import{t as l}from"./i18n-260f0fe9.js";import{w as s,l as r,M as d,B as h,k as c,o as u,D as b}from"./index-ebe5a881.js";import{C as p}from"./keyboard-2483c6de.js";import{K as f,d as m}from"./events-bad0a075.js";import{v as _,a as g,b as k,c as v,d as y}from"./table-settings-c12356ed.js";import{v as w}from"./label-bf9966d0.js";import"./i18n-45224cc3.js";const x=["top","bottom","both"],S=(t,n)=>{s(t,"_paginationPosition",(t=>"string"==typeof t&&x.includes(t)),new Set([`PaginationPositionPropType {${x.join(", ")}`]),n,{defaultValue:"bottom"})},z="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\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  :host {\n    display: block;\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-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}\n@layer kol-component {\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}",j=z,C=[10,20,50,100],O=t=>!0===t||""===t||"object"==typeof t&&null!==t,P=class{constructor(t){n(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),r(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),r(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),r(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),r(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void r(this,"_sortedData",this.state._data);const t=[...this.state._data];this.sortData.length>0&&t.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0})),r(this,"_sortedData",t)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this._tableSettings=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){s(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){_(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){g(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){S(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key===(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){d(t,(()=>{u(t,(()=>{try{t=c(t)}catch(t){}s(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0)})),n&&setTimeout((()=>this.updateSortedData()))},l=t;null===(n=l.horizontal)||void 0===n||n.forEach(o),null===(e=l.vertical)||void 0===e||e.forEach(o),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=l.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,b("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){w(this,t,{required:!0})}validateMinWidth(t){h(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){k(this,t)}validateOn(t){v(this,t)}validateTableSettings(t){y(this,t)}validatePagination(t){try{t=c(t)}catch(t){}this.showPagination=O(t),s(this,"_pagination",O,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(f.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(f.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(n){const e=l("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${l(`kol-pagination-position-${n}`)})`}});return t("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},t("span",null,l("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),t("div",{class:"kol-table-stateful__pagination-wrapper"},t(o,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||C,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:e})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[p.onSelectionChange])&&this.state._on[p.onSelectionChange](t,a),this.host&&m(this.host,f.selectionChange,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var n,i,o,l,s,r;const d=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(i=null===(n=this.state._pagination)||void 0===n?void 0:n._pageSize)&&void 0!==i?i:10:this.state._sortedData.length,this.state._pagination._page||1),h="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,c="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,p={horizontal:null!==(l=null===(o=this.state._headers.horizontal)||void 0===o?void 0:o.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==l?l:[],vertical:null!==(r=null===(s=this.state._headers.vertical)||void 0===s?void 0:s.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==r?r:[]};return t(e,{key:"807cc711bfe34ca458ec8aecb858234761e8a1de",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&h,t(a,{key:"2d5f259e75c6f178a06237bef92bc72d3b182ec5",ref:this.catchRef,_data:d,_headerCells:p,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings}),this.pageEndSlice>0&&this.showPagination&&c)}get host(){return i(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}};P.style={default:j};export{P as kol_table_stateful};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,F as n,g as i}from"./index-1704c42b.js";import{c as r}from"./clsx-09a06a12.js";import{e as o,a,b as l,w as s}from"./component-names-553d8bfa.js";import{t as c}from"./i18n-260f0fe9.js";import{M as u,o as d,k as f,w as h,l as v}from"./index-ebe5a881.js";import{C as b}from"./keyboard-2483c6de.js";import{n as _}from"./dev.utils-7b2d1fa9.js";import{d as p,K as y}from"./events-bad0a075.js";import{v as j,a as k,e as m,b as w,d as g}from"./table-settings-c12356ed.js";import{b as S,r as A,a as O,f as $,i as x,S as C}from"./isArray-7a60fa7f.js";import{i as D}from"./isObject-ffcbbb76.js";import{v as M}from"./label-bf9966d0.js";import"./i18n-45224cc3.js";const W=(e,t)=>{u(t,(()=>{d(t,(()=>{try{t=f(t)}catch(e){}h(e,"_headerCells",(e=>"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find((e=>!Array.isArray(e))))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find((e=>!Array.isArray(e))))&&!0),new Set(["TableHeaderCellsPropType"]),t)}))}))};var F="[object AsyncFunction]",P="[object Function]",T="[object GeneratorFunction]",E="[object Proxy]";function K(e){if(!D(e))return!1;var t=S(e);return t==P||t==T||t==F||t==E}var R=A["__core-js_shared__"];const H=R;var I=function(){var e=/[^.]+$/.exec(H&&H.keys&&H.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();function N(e){return!!I&&I in e}var z=Function.prototype,B=z.toString;function U(e){if(null!=e){try{return B.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var L=/[\\^$.*+?()[\]{}|]/g,V=/^\[object .+?Constructor\]$/,q=Function.prototype,G=Object.prototype,J=q.toString,Q=G.hasOwnProperty,X=RegExp("^"+J.call(Q).replace(L,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function Y(e){return!(!D(e)||N(e))&&(K(e)?X:V).test(U(e))}function Z(e,t){return null==e?void 0:e[t]}function tt(e,t){var n=Z(e,t);return Y(n)?n:void 0}var et=tt(A,"WeakMap");const nt=et;var it=9007199254740991,rt=/^(?:0|[1-9]\d*)$/;function ot(e,t){var n=typeof e;return!!(t=null==t?it:t)&&("number"==n||"symbol"!=n&&rt.test(e))&&e>-1&&e%1==0&&e<t}function at(e,t){return e===t||e!=e&&t!=t}var lt=9007199254740991;function st(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=lt}function ct(e){return null!=e&&st(e.length)&&!K(e)}var ut=Object.prototype;function dt(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||ut)}function ft(e,t){for(var n=-1,i=Array(e);++n<e;)i[n]=t(n);return i}var ht="[object Arguments]";function vt(e){return O(e)&&S(e)==ht}var bt=Object.prototype,_t=bt.hasOwnProperty,pt=bt.propertyIsEnumerable,yt=vt(function(){return arguments}())?vt:function(e){return O(e)&&_t.call(e,"callee")&&!pt.call(e,"callee")};const jt=yt;function kt(){return!1}var mt="object"==typeof exports&&exports&&!exports.nodeType&&exports,wt=mt&&"object"==typeof module&&module&&!module.nodeType&&module,gt=wt&&wt.exports===mt,St=gt?A.Buffer:void 0,At=St?St.isBuffer:void 0,Ot=At||kt;const $t=Ot;var xt="[object Arguments]",Ct="[object Array]",Dt="[object Boolean]",Mt="[object Date]",Wt="[object Error]",Ft="[object Function]",Pt="[object Map]",Tt="[object Number]",Et="[object Object]",Kt="[object RegExp]",Rt="[object Set]",Ht="[object String]",It="[object WeakMap]",Nt="[object ArrayBuffer]",zt="[object DataView]",Bt="[object Float32Array]",Ut="[object Float64Array]",Lt="[object Int8Array]",Vt="[object Int16Array]",qt="[object Int32Array]",Gt="[object Uint8Array]",Jt="[object Uint8ClampedArray]",Qt="[object Uint16Array]",Xt="[object Uint32Array]",Yt={};function Zt(e){return O(e)&&st(e.length)&&!!Yt[S(e)]}function te(e){return function(t){return e(t)}}Yt[Bt]=Yt[Ut]=Yt[Lt]=Yt[Vt]=Yt[qt]=Yt[Gt]=Yt[Jt]=Yt[Qt]=Yt[Xt]=!0,Yt[xt]=Yt[Ct]=Yt[Nt]=Yt[Dt]=Yt[zt]=Yt[Mt]=Yt[Wt]=Yt[Ft]=Yt[Pt]=Yt[Tt]=Yt[Et]=Yt[Kt]=Yt[Rt]=Yt[Ht]=Yt[It]=!1;var ee="object"==typeof exports&&exports&&!exports.nodeType&&exports,ne=ee&&"object"==typeof module&&module&&!module.nodeType&&module,ie=ne&&ne.exports===ee,re=ie&&$.process,oe=function(){try{var e=ne&&ne.require&&ne.require("util").types;return e||re&&re.binding&&re.binding("util")}catch(e){}}();const ae=oe;var le=oe&&oe.isTypedArray,se=le?te(le):Zt;const ce=se;var ue=Object.prototype,de=ue.hasOwnProperty;function fe(e,t){var n=x(e),i=!n&&jt(e),a=!n&&!i&&$t(e),r=!n&&!i&&!a&&ce(e),o=n||i||a||r,l=o?ft(e.length,String):[],s=l.length;for(var c in e)!t&&!de.call(e,c)||o&&("length"==c||a&&("offset"==c||"parent"==c)||r&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||ot(c,s))||l.push(c);return l}function he(e,t){return function(n){return e(t(n))}}var ve=he(Object.keys,Object);const be=ve;var _e=Object.prototype,pe=_e.hasOwnProperty;function ye(e){if(!dt(e))return be(e);var t=[];for(var n in Object(e))pe.call(e,n)&&"constructor"!=n&&t.push(n);return t}function je(e){return ct(e)?fe(e):ye(e)}var ke=tt(Object,"create");const me=ke;function we(){this.__data__=me?me(null):{},this.size=0}function ge(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}var Se="__lodash_hash_undefined__",Ae=Object.prototype,Oe=Ae.hasOwnProperty;function $e(e){var t=this.__data__;if(me){var n=t[e];return n===Se?void 0:n}return Oe.call(t,e)?t[e]:void 0}var xe=Object.prototype,Ce=xe.hasOwnProperty;function De(e){var t=this.__data__;return me?void 0!==t[e]:Ce.call(t,e)}var Me="__lodash_hash_undefined__";function We(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=me&&void 0===t?Me:t,this}function Fe(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}function Pe(){this.__data__=[],this.size=0}function Te(e,t){for(var n=e.length;n--;)if(at(e[n][0],t))return n;return-1}Fe.prototype.clear=we,Fe.prototype.delete=ge,Fe.prototype.get=$e,Fe.prototype.has=De,Fe.prototype.set=We;var Ee=Array.prototype,Ke=Ee.splice;function Re(e){var t=this.__data__,n=Te(t,e);return!(n<0)&&(n==t.length-1?t.pop():Ke.call(t,n,1),--this.size,!0)}function He(e){var t=this.__data__,n=Te(t,e);return n<0?void 0:t[n][1]}function Ie(e){return Te(this.__data__,e)>-1}function Ne(e,t){var n=this.__data__,i=Te(n,e);return i<0?(++this.size,n.push([e,t])):n[i][1]=t,this}function ze(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}ze.prototype.clear=Pe,ze.prototype.delete=Re,ze.prototype.get=He,ze.prototype.has=Ie,ze.prototype.set=Ne;var Be=tt(A,"Map");const Ue=Be;function Le(){this.size=0,this.__data__={hash:new Fe,map:new(Ue||ze),string:new Fe}}function Ve(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}function qe(e,t){var n=e.__data__;return Ve(t)?n["string"==typeof t?"string":"hash"]:n.map}function Ge(e){var t=qe(this,e).delete(e);return this.size-=t?1:0,t}function Je(e){return qe(this,e).get(e)}function Qe(e){return qe(this,e).has(e)}function Xe(e,t){var n=qe(this,e),i=n.size;return n.set(e,t),this.size+=n.size==i?0:1,this}function Ye(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}function Ze(e,t){for(var n=-1,i=t.length,a=e.length;++n<i;)e[a+n]=t[n];return e}function tn(){this.__data__=new ze,this.size=0}function en(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n}function nn(e){return this.__data__.get(e)}function rn(e){return this.__data__.has(e)}Ye.prototype.clear=Le,Ye.prototype.delete=Ge,Ye.prototype.get=Je,Ye.prototype.has=Qe,Ye.prototype.set=Xe;var on=200;function an(e,t){var n=this.__data__;if(n instanceof ze){var i=n.__data__;if(!Ue||i.length<on-1)return i.push([e,t]),this.size=++n.size,this;n=this.__data__=new Ye(i)}return n.set(e,t),this.size=n.size,this}function ln(e){var t=this.__data__=new ze(e);this.size=t.size}function sn(e,t){for(var n=-1,i=null==e?0:e.length,a=0,r=[];++n<i;){var o=e[n];t(o,n,e)&&(r[a++]=o)}return r}function cn(){return[]}ln.prototype.clear=tn,ln.prototype.delete=en,ln.prototype.get=nn,ln.prototype.has=rn,ln.prototype.set=an;var un=Object.prototype,dn=un.propertyIsEnumerable,fn=Object.getOwnPropertySymbols,hn=fn?function(e){return null==e?[]:(e=Object(e),sn(fn(e),(function(t){return dn.call(e,t)})))}:cn;const vn=hn;function bn(e,t,n){var i=t(e);return x(e)?i:Ze(i,n(e))}function _n(e){return bn(e,je,vn)}var pn=tt(A,"DataView");const yn=pn;var jn=tt(A,"Promise");const kn=jn;var mn=tt(A,"Set");const wn=mn;var gn="[object Map]",Sn="[object Object]",An="[object Promise]",On="[object Set]",$n="[object WeakMap]",xn="[object DataView]",Cn=U(yn),Dn=U(Ue),Mn=U(kn),Wn=U(wn),Fn=U(nt),Pn=S;(yn&&Pn(new yn(new ArrayBuffer(1)))!=xn||Ue&&Pn(new Ue)!=gn||kn&&Pn(kn.resolve())!=An||wn&&Pn(new wn)!=On||nt&&Pn(new nt)!=$n)&&(Pn=function(e){var t=S(e),n=t==Sn?e.constructor:void 0,i=n?U(n):"";if(i)switch(i){case Cn:return xn;case Dn:return gn;case Mn:return An;case Wn:return On;case Fn:return $n}return t});const Tn=Pn;var En=A.Uint8Array;const Kn=En;var Rn="__lodash_hash_undefined__";function Hn(e){return this.__data__.set(e,Rn),this}function In(e){return this.__data__.has(e)}function Nn(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new Ye;++t<n;)this.add(e[t])}function zn(e,t){for(var n=-1,i=null==e?0:e.length;++n<i;)if(t(e[n],n,e))return!0;return!1}function Bn(e,t){return e.has(t)}Nn.prototype.add=Nn.prototype.push=Hn,Nn.prototype.has=In;var Un=1,Ln=2;function Vn(e,t,n,i,a,r){var o=n&Un,l=e.length,s=t.length;if(l!=s&&!(o&&s>l))return!1;var c=r.get(e),d=r.get(t);if(c&&d)return c==t&&d==e;var h=-1,u=!0,b=n&Ln?new Nn:void 0;for(r.set(e,t),r.set(t,e);++h<l;){var v=e[h],_=t[h];if(i)var f=o?i(_,v,h,t,e,r):i(v,_,h,e,t,r);if(void 0!==f){if(f)continue;u=!1;break}if(b){if(!zn(t,(function(e,t){if(!Bn(b,t)&&(v===e||a(v,e,n,i,r)))return b.push(t)}))){u=!1;break}}else if(v!==_&&!a(v,_,n,i,r)){u=!1;break}}return r.delete(e),r.delete(t),u}function qn(e){var t=-1,n=Array(e.size);return e.forEach((function(e,i){n[++t]=[i,e]})),n}function Gn(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}var Jn=1,Qn=2,Xn="[object Boolean]",Yn="[object Date]",Zn="[object Error]",ti="[object Map]",ei="[object Number]",ni="[object RegExp]",ii="[object Set]",ri="[object String]",oi="[object Symbol]",ai="[object ArrayBuffer]",li="[object DataView]",si=C?C.prototype:void 0,ci=si?si.valueOf:void 0;function ui(e,t,n,i,a,r,o){switch(n){case li:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case ai:return!(e.byteLength!=t.byteLength||!r(new Kn(e),new Kn(t)));case Xn:case Yn:case ei:return at(+e,+t);case Zn:return e.name==t.name&&e.message==t.message;case ni:case ri:return e==t+"";case ti:var l=qn;case ii:var s=i&Jn;if(l||(l=Gn),e.size!=t.size&&!s)return!1;var c=o.get(e);if(c)return c==t;i|=Qn,o.set(e,t);var d=Vn(l(e),l(t),i,a,r,o);return o.delete(e),d;case oi:if(ci)return ci.call(e)==ci.call(t)}return!1}var di=1,fi=Object.prototype,hi=fi.hasOwnProperty;function vi(e,t,n,i,a,r){var o=n&di,l=_n(e),s=l.length;if(s!=_n(t).length&&!o)return!1;for(var c=s;c--;){var d=l[c];if(!(o?d in t:hi.call(t,d)))return!1}var h=r.get(e),u=r.get(t);if(h&&u)return h==t&&u==e;var b=!0;r.set(e,t),r.set(t,e);for(var v=o;++c<s;){var _=e[d=l[c]],f=t[d];if(i)var p=o?i(f,_,d,t,e,r):i(_,f,d,e,t,r);if(!(void 0===p?_===f||a(_,f,n,i,r):p)){b=!1;break}v||(v="constructor"==d)}if(b&&!v){var y=e.constructor,g=t.constructor;y==g||!("constructor"in e)||!("constructor"in t)||"function"==typeof y&&y instanceof y&&"function"==typeof g&&g instanceof g||(b=!1)}return r.delete(e),r.delete(t),b}var bi=1,_i="[object Arguments]",pi="[object Array]",yi="[object Object]",ji=Object.prototype,ki=ji.hasOwnProperty;function mi(e,t,n,i,a,r){var o=x(e),l=x(t),s=o?pi:Tn(e),c=l?pi:Tn(t),d=(s=s==_i?yi:s)==yi,h=(c=c==_i?yi:c)==yi,u=s==c;if(u&&$t(e)){if(!$t(t))return!1;o=!0,d=!1}if(u&&!d)return r||(r=new ln),o||ce(e)?Vn(e,t,n,i,a,r):ui(e,t,s,n,i,a,r);if(!(n&bi)){var b=d&&ki.call(e,"__wrapped__"),v=h&&ki.call(t,"__wrapped__");if(b||v){var _=b?e.value():e,f=v?t.value():t;return r||(r=new ln),a(_,f,n,i,r)}}return!!u&&(r||(r=new ln),vi(e,t,n,i,a,r))}function wi(e,t,n,i,a){return e===t||(null==e||null==t||!O(e)&&!O(t)?e!=e&&t!=t:mi(e,t,n,i,wi,a))}function gi(e,t){return wi(e,t)}const Si=/^\d+(\.\d+)?([a-z]+|%)?$/,Ai=(e,t,n)=>{h(e,"_minWidth",(e=>"string"==typeof e&&Si.test(e)),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,n)},Oi=class{constructor(n){t(this,n),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(t,n,i,a=!1)=>{var o,l;let s=String(n);return this.horizontal&&(null===(o=t[0])||void 0===o?void 0:o.data)&&(s=null!==(l=this.getDataKey(t[0].data))&&void 0!==l?l:s),e("tr",{class:r("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${s}`},this.renderSelectionCell(t,n),t.map(((e,t)=>this.renderTableCell(e,n,t,i))))},this.renderTableCell=(t,n,i,a)=>{const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let l=`${n}-${i}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);l=e?`${e}-${this.horizontal?i:n}`:l}return t.headerCell?this.renderHeadingCell(t,n,i,a):e("td",{key:`cell-${l}`,class:r("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign}),colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")},this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto"},this.tableDivElementHasScrollbar=!1,this.previousHeaderCells=void 0,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0,this._tableSettings=void 0}validateData(e){j(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){k(this,e)}validateHeaderCells(e){W(this,e),gi(this.previousHeaderCells,this.state._headerCells)||this.initializeTableSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){M(this,e,{required:!0})}validateMinWidth(e){Ai(this,e)}validateOn(e){m(this,e)}validateSelection(e){w(this,e)}validateTableSettings(e){g(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const n=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let i=this.checkboxRefs.indexOf(n);i>-1&&(e.preventDefault(),"ArrowDown"===e.key?(i=(i+1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()):"ArrowUp"===e.key&&(e.preventDefault(),i=(i+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}handleSettingsChange(e){v(this,"_tableSettings",e.detail)}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,_())})),this.dataToKeyMap.forEach(((t,n)=>{e.includes(n)||this.dataToKeyMap.delete(n)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const n=e.render(t,e,e.data,this.state._data);"string"==typeof n&&(t.textContent=n)}}))))}getNumberOfCols(e,t){let n=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var n;return t+=null!==(n=e.colSpan)&&void 0!==n?n:1})),n<t&&(n=t)})),0===n&&(n=t.length),n}getNumberOfRows(e,t){var n;let i=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var n;return t+=null!==(n=e.rowSpan)&&void 0!==n?n:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(n=this.state._dataFoot)||void 0===n?void 0:n.length)||0,i}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,n;let i=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.getThePrimaryHeadersWithKeysIfExists(null!==(n=e.vertical)&&void 0!==n?n:[]),i.length>0&&(this.horizontal=!1)),i}getColumnPositionMap(){var e;const t=new Map;return null===(e=this.state._tableSettings)||void 0===e||e.columns.forEach((e=>{t.set(e.key,e.position)})),t}sortByColumnPosition(e){const t=this.getColumnPositionMap();return[...e].sort(((e,n)=>{var i,a,r,o;return(null!==(a=t.get(null!==(i=e.key)&&void 0!==i?i:""))&&void 0!==a?a:Number.MAX_SAFE_INTEGER)-(null!==(o=t.get(null!==(r=n.key)&&void 0!==r?r:""))&&void 0!==o?o:Number.MAX_SAFE_INTEGER)}))}createDataField(e,t,n){var i;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const a=this.getPrimaryHeaders(t),r=this.getNumberOfCols(t.horizontal,e);let o=this.getNumberOfRows(t.vertical,e),l=0;n&&(l=o,o+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const s=[],d=[],h=[];t.vertical.forEach(((e,t)=>{d[t]=0,h[t]=[]}));const u=this.sortByColumnPosition(a);for(let i=l;i<o;i++){const a=[];t.vertical.forEach(((e,t)=>{let n=0;if(h[t].forEach((e=>n+=e)),n<=i){const r=e[i-n+d[t]];if("object"==typeof r){a.push(Object.assign(Object.assign({},r),{headerCell:!0,data:{}}));let e=1;if("number"==typeof r.rowSpan&&r.rowSpan>1&&(e=r.rowSpan),h[t].push(e),"number"==typeof r.colSpan&&r.colSpan>1)for(let n=1;n<r.colSpan;n++)h[t+n].push(e);d[t]++}}}));for(let t=0;t<r;t++)if(!0===this.horizontal){const r=n&&this.state._dataFoot?this.state._dataFoot[i-l]:e[i];"object"==typeof u[t]&&null!==u[t]&&"string"==typeof u[t].key&&"object"==typeof r&&null!==r&&a.push(Object.assign(Object.assign({},u[t]),{colSpan:void 0,data:r,label:r[u[t].key],rowSpan:void 0}))}else"object"==typeof u[i]&&null!==u[i]&&"string"==typeof u[i].key&&"object"==typeof e[t]&&null!==e[t]&&a.push(Object.assign(Object.assign({},u[i]),{colSpan:void 0,data:e[t],label:e[t][u[i].key],rowSpan:void 0}));s.push(a)}if(0===e.length){let e=0,n=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{n+=e.rowSpan||1})));const i={colSpan:e,label:c("kol-no-entries"),render:void 0,rowSpan:Math.max(n,1)};0===s.length?s.push([i]):s[0].push(i)}return s}handleSelectionChangeCallbackAndEvent(e,t){var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[b.onSelectionChange])&&this.state._on[b.onSelectionChange](e,t),this.host&&p(this.host,y.selectionChange,t)}initializeTableSettings(){if(this._tableSettings)return;const e=this.getPrimaryHeaders(this.state._headerCells);this.state._tableSettings||(this.state._tableSettings={columns:[]}),this.state._tableSettings.columns=e.filter((e=>e.key)).map(((e,t)=>{var n;return{key:null!==(n=e.key)&&void 0!==n?n:_(),label:e.label,position:t,visible:!0}}))}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}renderSelectionCell(t,n){var i,l,s;const c=this.state._selection;if(!c)return"";const d=this.getSelectionKeyPropertyName(),h=null===(i=t[0])||void 0===i?void 0:i.data;if(!h)return"";const u=h[d],b=c.multiple||void 0===c.multiple,v=null===(l=null==c?void 0:c.selectedKeys)||void 0===l?void 0:l.includes(u),_=null===(s=null==c?void 0:c.disabledKeys)||void 0===s?void 0:s.includes(u),f=c.label(h),p={name:"selection",checked:v,disabled:_,id:u,"aria-label":f};return e("td",{key:`tbody-${n}-selection`,class:"kol-table__cell kol-table__cell--selection"},e("div",{class:r("kol-table__selection",{"kol-table__selection--checked":v})},b?e("label",{class:r("kol-table__selection-label",{"kol-table__selection-label--disabled":_})},e(o,{class:"kol-table__selection-icon",_icons:"codicon "+(v?"codicon-check":""),_label:""}),e("input",Object.assign({class:r("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},p,{type:"checkbox",onInput:e=>{var t,n;const i=v?null===(n=null==c?void 0:c.selectedKeys)||void 0===n?void 0:n.filter((e=>e!==u)):[...null!==(t=null==c?void 0:c.selectedKeys)&&void 0!==t?t:[],u];this.handleSelectionChangeCallbackAndEvent(e,null!=i?i:[])}}))):e("label",{class:"kol-table__selection-label"},e("input",Object.assign({class:r("kol-table__selection-input kol-table__selection-input--radio")},p,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,u)}}))),e(a,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${u}-label`,_label:f})))}getColumnSettings(e){var t;return null===(t=this.state._tableSettings)||void 0===t?void 0:t.columns.find((t=>t.key===e.key))}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter((t=>{var n,i;return!(null===(i=null===(n=this.state._selection)||void 0===n?void 0:n.disabledKeys)||void 0===i?void 0:i.includes(t[e]))}))}getSelectedKeysWithoutDisabledKeys(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,n;return!(null===(n=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===n?void 0:n.includes(e))}))}getSelectedKeysWithDisabledKeysOnly(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,n;return null===(n=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===n?void 0:n.includes(e)}))}getRevertedSelection(e){var t;const n=this.getSelectionKeyPropertyName(),i=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&i.push(...this.getDataWithSelectionEnabled().map((e=>null==e?void 0:e[n]))),i}getTableMinWidth(){var e,t;const n=null!==(t=null===(e=this.state._tableSettings)||void 0===e?void 0:e.columns.filter((e=>e.visible)).reduce(((e,t)=>{var n;return e+(null!==(n=t.width)&&void 0!==n?n:0)}),0))&&void 0!==t?t:0;return"auto"===this.state._minWidth?`${n}ch`:`max(${this.state._minWidth}, ${n}ch)`}renderHeadingSelectionCell(){var t,n;const i=this.state._selection;if(!i||!i.multiple&&void 0!==i.multiple)return e("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});const l=null!==(n=null===(t=this.getSelectedKeysWithoutDisabledKeys())||void 0===t?void 0:t.length)&&void 0!==n?n:0,s=l===this.getDataWithSelectionEnabled().length,d=0!==l&&!s;let h="kol-table-selection-indeterminate";s&&!d&&(h="kol-table-selection-none"),0===l&&(h="kol-table-selection-all");const u=c(h);return e("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header"},e("div",{class:r("kol-table__selection",{"kol-table__selection--indeterminate":d,"kol-table__selection--checked":s})},e("label",{class:"kol-table__selection-label"},e(o,{class:"kol-table__selection-icon",_icons:"codicon "+(d?"codicon-remove":s?"codicon-check":""),_label:""}),e("input",{class:r("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:s&&!d,indeterminate:d,"aria-label":u,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!s))}})),e(a,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${h}-label`,_label:u})))}renderHeaderTdCell(){return e(n,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&e("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(t,n,i,a){const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let s,c="codicon codicon-fold";if(t.sortDirection)switch(t.sortDirection){case"ASC":c="codicon codicon-chevron-up",s="ascending";break;case"DESC":c="codicon codicon-chevron-down",s="descending"}const d=a?"row":"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col";return e("th",{key:`${n}-${i}-${t.label}`,class:r("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign,[`kol-table__cell--${s}`]:s}),scope:d,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},"aria-sort":s,"data-sort":`sort-${t.sortDirection}`},t.sortDirection?e(l,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:c},_label:t.label,_on:{onClick:e=>{var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection}),this.host&&p(this.host,y.sort,{key:t.key,currentSortDirection:t.sortDirection})}}}):t.label)}renderSpacer(t,n){var i,a;const o=(null===(i=this.state._headerCells.vertical)||void 0===i?void 0:i.length)||0,l=null===(a=null==n?void 0:n[0])||void 0===a?void 0:a.reduce(((e,t)=>e+(t.colSpan||1)),0),s=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:r("kol-table__spacer",`kol-table__spacer--${t}`)},e("td",{class:r(`kol-table__spacer-line kol-table__spacer-line--${t}`),colSpan:o+l+s}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",t),t.map(((e,t)=>this.renderTableRow(e,t,!0,!0)))])}render(){var t;const n=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const i=null===(t=this.state._headerCells.horizontal)||void 0===t?void 0:t.map((e=>this.sortByColumnPosition(e)));return e("div",{key:"55c1614208608e7206bfde32af951f066267b629",class:"kol-table"},e(s,{key:"a6a176a7a90d134c6c99fae76b14d0dd6523a88b",_tableSettings:this.state._tableSettings}),e("div",{key:"7d1498c5925016efc03772480936bfd2d8d9bd27",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"41097ebc50e0913333e017d43206778c031add65",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},e("div",{key:"f0539b67aa7c7ef1271a67dd22c741e4a6f60d4e",class:"kol-table__focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),e("caption",{key:"7199792f023995a8964efaa2b9f11b79780717b1",class:"kol-table__caption",id:"caption"},this.state._label),Array.isArray(i)&&e("thead",{key:"86242ee062afb71d654b7e64698dca8178012bc3",class:"kol-table__head"},[i.map(((t,n)=>e("tr",{class:"kol-table__head-row",key:`thead-${n}`},this.state._selection&&this.renderHeadingSelectionCell(),0===n&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map(((e,t)=>this.renderHeadingCell(e,n,t,!1)))))),this.renderSpacer("head",i)]),e("tbody",{key:"b7866fe3430029ea01b05d747ea49e42c577d10c",class:"kol-table__body"},n.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot())))}get host(){return i(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"],_tableSettings:["validateTableSettings"]}}};export{Oi as kol_table_stateless_wc};
+import{r as t,h as e,F as n,g as i}from"./index-4d380356.js";import{c as r}from"./clsx-09a06a12.js";import{e as o,a,b as l,w as s}from"./component-names-553d8bfa.js";import{t as c}from"./i18n-260f0fe9.js";import{M as u,o as d,k as f,w as h,l as v}from"./index-ebe5a881.js";import{C as b}from"./keyboard-2483c6de.js";import{n as _}from"./dev.utils-2d90fdc8.js";import{d as p,K as y}from"./events-bad0a075.js";import{v as j,a as k,e as m,b as w,d as g}from"./table-settings-c12356ed.js";import{b as S,r as A,a as O,f as $,i as x,S as C}from"./isArray-7a60fa7f.js";import{i as D}from"./isObject-ffcbbb76.js";import{v as M}from"./label-bf9966d0.js";import"./i18n-45224cc3.js";const W=(e,t)=>{u(t,(()=>{d(t,(()=>{try{t=f(t)}catch(e){}h(e,"_headerCells",(e=>"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find((e=>!Array.isArray(e))))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find((e=>!Array.isArray(e))))&&!0),new Set(["TableHeaderCellsPropType"]),t)}))}))};var F="[object AsyncFunction]",P="[object Function]",T="[object GeneratorFunction]",E="[object Proxy]";function K(e){if(!D(e))return!1;var t=S(e);return t==P||t==T||t==F||t==E}var R=A["__core-js_shared__"];const H=R;var I=function(){var e=/[^.]+$/.exec(H&&H.keys&&H.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();function N(e){return!!I&&I in e}var z=Function.prototype,B=z.toString;function U(e){if(null!=e){try{return B.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var L=/[\\^$.*+?()[\]{}|]/g,V=/^\[object .+?Constructor\]$/,q=Function.prototype,G=Object.prototype,J=q.toString,Q=G.hasOwnProperty,X=RegExp("^"+J.call(Q).replace(L,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function Y(e){return!(!D(e)||N(e))&&(K(e)?X:V).test(U(e))}function Z(e,t){return null==e?void 0:e[t]}function tt(e,t){var n=Z(e,t);return Y(n)?n:void 0}var et=tt(A,"WeakMap");const nt=et;var it=9007199254740991,rt=/^(?:0|[1-9]\d*)$/;function ot(e,t){var n=typeof e;return!!(t=null==t?it:t)&&("number"==n||"symbol"!=n&&rt.test(e))&&e>-1&&e%1==0&&e<t}function at(e,t){return e===t||e!=e&&t!=t}var lt=9007199254740991;function st(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=lt}function ct(e){return null!=e&&st(e.length)&&!K(e)}var ut=Object.prototype;function dt(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||ut)}function ft(e,t){for(var n=-1,i=Array(e);++n<e;)i[n]=t(n);return i}var ht="[object Arguments]";function vt(e){return O(e)&&S(e)==ht}var bt=Object.prototype,_t=bt.hasOwnProperty,pt=bt.propertyIsEnumerable,yt=vt(function(){return arguments}())?vt:function(e){return O(e)&&_t.call(e,"callee")&&!pt.call(e,"callee")};const jt=yt;function kt(){return!1}var mt="object"==typeof exports&&exports&&!exports.nodeType&&exports,wt=mt&&"object"==typeof module&&module&&!module.nodeType&&module,gt=wt&&wt.exports===mt,St=gt?A.Buffer:void 0,At=St?St.isBuffer:void 0,Ot=At||kt;const $t=Ot;var xt="[object Arguments]",Ct="[object Array]",Dt="[object Boolean]",Mt="[object Date]",Wt="[object Error]",Ft="[object Function]",Pt="[object Map]",Tt="[object Number]",Et="[object Object]",Kt="[object RegExp]",Rt="[object Set]",Ht="[object String]",It="[object WeakMap]",Nt="[object ArrayBuffer]",zt="[object DataView]",Bt="[object Float32Array]",Ut="[object Float64Array]",Lt="[object Int8Array]",Vt="[object Int16Array]",qt="[object Int32Array]",Gt="[object Uint8Array]",Jt="[object Uint8ClampedArray]",Qt="[object Uint16Array]",Xt="[object Uint32Array]",Yt={};function Zt(e){return O(e)&&st(e.length)&&!!Yt[S(e)]}function te(e){return function(t){return e(t)}}Yt[Bt]=Yt[Ut]=Yt[Lt]=Yt[Vt]=Yt[qt]=Yt[Gt]=Yt[Jt]=Yt[Qt]=Yt[Xt]=!0,Yt[xt]=Yt[Ct]=Yt[Nt]=Yt[Dt]=Yt[zt]=Yt[Mt]=Yt[Wt]=Yt[Ft]=Yt[Pt]=Yt[Tt]=Yt[Et]=Yt[Kt]=Yt[Rt]=Yt[Ht]=Yt[It]=!1;var ee="object"==typeof exports&&exports&&!exports.nodeType&&exports,ne=ee&&"object"==typeof module&&module&&!module.nodeType&&module,ie=ne&&ne.exports===ee,re=ie&&$.process,oe=function(){try{var e=ne&&ne.require&&ne.require("util").types;return e||re&&re.binding&&re.binding("util")}catch(e){}}();const ae=oe;var le=oe&&oe.isTypedArray,se=le?te(le):Zt;const ce=se;var ue=Object.prototype,de=ue.hasOwnProperty;function fe(e,t){var n=x(e),i=!n&&jt(e),a=!n&&!i&&$t(e),r=!n&&!i&&!a&&ce(e),o=n||i||a||r,l=o?ft(e.length,String):[],s=l.length;for(var c in e)!t&&!de.call(e,c)||o&&("length"==c||a&&("offset"==c||"parent"==c)||r&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||ot(c,s))||l.push(c);return l}function he(e,t){return function(n){return e(t(n))}}var ve=he(Object.keys,Object);const be=ve;var _e=Object.prototype,pe=_e.hasOwnProperty;function ye(e){if(!dt(e))return be(e);var t=[];for(var n in Object(e))pe.call(e,n)&&"constructor"!=n&&t.push(n);return t}function je(e){return ct(e)?fe(e):ye(e)}var ke=tt(Object,"create");const me=ke;function we(){this.__data__=me?me(null):{},this.size=0}function ge(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}var Se="__lodash_hash_undefined__",Ae=Object.prototype,Oe=Ae.hasOwnProperty;function $e(e){var t=this.__data__;if(me){var n=t[e];return n===Se?void 0:n}return Oe.call(t,e)?t[e]:void 0}var xe=Object.prototype,Ce=xe.hasOwnProperty;function De(e){var t=this.__data__;return me?void 0!==t[e]:Ce.call(t,e)}var Me="__lodash_hash_undefined__";function We(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=me&&void 0===t?Me:t,this}function Fe(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}function Pe(){this.__data__=[],this.size=0}function Te(e,t){for(var n=e.length;n--;)if(at(e[n][0],t))return n;return-1}Fe.prototype.clear=we,Fe.prototype.delete=ge,Fe.prototype.get=$e,Fe.prototype.has=De,Fe.prototype.set=We;var Ee=Array.prototype,Ke=Ee.splice;function Re(e){var t=this.__data__,n=Te(t,e);return!(n<0)&&(n==t.length-1?t.pop():Ke.call(t,n,1),--this.size,!0)}function He(e){var t=this.__data__,n=Te(t,e);return n<0?void 0:t[n][1]}function Ie(e){return Te(this.__data__,e)>-1}function Ne(e,t){var n=this.__data__,i=Te(n,e);return i<0?(++this.size,n.push([e,t])):n[i][1]=t,this}function ze(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}ze.prototype.clear=Pe,ze.prototype.delete=Re,ze.prototype.get=He,ze.prototype.has=Ie,ze.prototype.set=Ne;var Be=tt(A,"Map");const Ue=Be;function Le(){this.size=0,this.__data__={hash:new Fe,map:new(Ue||ze),string:new Fe}}function Ve(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}function qe(e,t){var n=e.__data__;return Ve(t)?n["string"==typeof t?"string":"hash"]:n.map}function Ge(e){var t=qe(this,e).delete(e);return this.size-=t?1:0,t}function Je(e){return qe(this,e).get(e)}function Qe(e){return qe(this,e).has(e)}function Xe(e,t){var n=qe(this,e),i=n.size;return n.set(e,t),this.size+=n.size==i?0:1,this}function Ye(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var i=e[t];this.set(i[0],i[1])}}function Ze(e,t){for(var n=-1,i=t.length,a=e.length;++n<i;)e[a+n]=t[n];return e}function tn(){this.__data__=new ze,this.size=0}function en(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n}function nn(e){return this.__data__.get(e)}function rn(e){return this.__data__.has(e)}Ye.prototype.clear=Le,Ye.prototype.delete=Ge,Ye.prototype.get=Je,Ye.prototype.has=Qe,Ye.prototype.set=Xe;var on=200;function an(e,t){var n=this.__data__;if(n instanceof ze){var i=n.__data__;if(!Ue||i.length<on-1)return i.push([e,t]),this.size=++n.size,this;n=this.__data__=new Ye(i)}return n.set(e,t),this.size=n.size,this}function ln(e){var t=this.__data__=new ze(e);this.size=t.size}function sn(e,t){for(var n=-1,i=null==e?0:e.length,a=0,r=[];++n<i;){var o=e[n];t(o,n,e)&&(r[a++]=o)}return r}function cn(){return[]}ln.prototype.clear=tn,ln.prototype.delete=en,ln.prototype.get=nn,ln.prototype.has=rn,ln.prototype.set=an;var un=Object.prototype,dn=un.propertyIsEnumerable,fn=Object.getOwnPropertySymbols,hn=fn?function(e){return null==e?[]:(e=Object(e),sn(fn(e),(function(t){return dn.call(e,t)})))}:cn;const vn=hn;function bn(e,t,n){var i=t(e);return x(e)?i:Ze(i,n(e))}function _n(e){return bn(e,je,vn)}var pn=tt(A,"DataView");const yn=pn;var jn=tt(A,"Promise");const kn=jn;var mn=tt(A,"Set");const wn=mn;var gn="[object Map]",Sn="[object Object]",An="[object Promise]",On="[object Set]",$n="[object WeakMap]",xn="[object DataView]",Cn=U(yn),Dn=U(Ue),Mn=U(kn),Wn=U(wn),Fn=U(nt),Pn=S;(yn&&Pn(new yn(new ArrayBuffer(1)))!=xn||Ue&&Pn(new Ue)!=gn||kn&&Pn(kn.resolve())!=An||wn&&Pn(new wn)!=On||nt&&Pn(new nt)!=$n)&&(Pn=function(e){var t=S(e),n=t==Sn?e.constructor:void 0,i=n?U(n):"";if(i)switch(i){case Cn:return xn;case Dn:return gn;case Mn:return An;case Wn:return On;case Fn:return $n}return t});const Tn=Pn;var En=A.Uint8Array;const Kn=En;var Rn="__lodash_hash_undefined__";function Hn(e){return this.__data__.set(e,Rn),this}function In(e){return this.__data__.has(e)}function Nn(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new Ye;++t<n;)this.add(e[t])}function zn(e,t){for(var n=-1,i=null==e?0:e.length;++n<i;)if(t(e[n],n,e))return!0;return!1}function Bn(e,t){return e.has(t)}Nn.prototype.add=Nn.prototype.push=Hn,Nn.prototype.has=In;var Un=1,Ln=2;function Vn(e,t,n,i,a,r){var o=n&Un,l=e.length,s=t.length;if(l!=s&&!(o&&s>l))return!1;var c=r.get(e),d=r.get(t);if(c&&d)return c==t&&d==e;var h=-1,u=!0,b=n&Ln?new Nn:void 0;for(r.set(e,t),r.set(t,e);++h<l;){var v=e[h],_=t[h];if(i)var f=o?i(_,v,h,t,e,r):i(v,_,h,e,t,r);if(void 0!==f){if(f)continue;u=!1;break}if(b){if(!zn(t,(function(e,t){if(!Bn(b,t)&&(v===e||a(v,e,n,i,r)))return b.push(t)}))){u=!1;break}}else if(v!==_&&!a(v,_,n,i,r)){u=!1;break}}return r.delete(e),r.delete(t),u}function qn(e){var t=-1,n=Array(e.size);return e.forEach((function(e,i){n[++t]=[i,e]})),n}function Gn(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}var Jn=1,Qn=2,Xn="[object Boolean]",Yn="[object Date]",Zn="[object Error]",ti="[object Map]",ei="[object Number]",ni="[object RegExp]",ii="[object Set]",ri="[object String]",oi="[object Symbol]",ai="[object ArrayBuffer]",li="[object DataView]",si=C?C.prototype:void 0,ci=si?si.valueOf:void 0;function ui(e,t,n,i,a,r,o){switch(n){case li:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case ai:return!(e.byteLength!=t.byteLength||!r(new Kn(e),new Kn(t)));case Xn:case Yn:case ei:return at(+e,+t);case Zn:return e.name==t.name&&e.message==t.message;case ni:case ri:return e==t+"";case ti:var l=qn;case ii:var s=i&Jn;if(l||(l=Gn),e.size!=t.size&&!s)return!1;var c=o.get(e);if(c)return c==t;i|=Qn,o.set(e,t);var d=Vn(l(e),l(t),i,a,r,o);return o.delete(e),d;case oi:if(ci)return ci.call(e)==ci.call(t)}return!1}var di=1,fi=Object.prototype,hi=fi.hasOwnProperty;function vi(e,t,n,i,a,r){var o=n&di,l=_n(e),s=l.length;if(s!=_n(t).length&&!o)return!1;for(var c=s;c--;){var d=l[c];if(!(o?d in t:hi.call(t,d)))return!1}var h=r.get(e),u=r.get(t);if(h&&u)return h==t&&u==e;var b=!0;r.set(e,t),r.set(t,e);for(var v=o;++c<s;){var _=e[d=l[c]],f=t[d];if(i)var p=o?i(f,_,d,t,e,r):i(_,f,d,e,t,r);if(!(void 0===p?_===f||a(_,f,n,i,r):p)){b=!1;break}v||(v="constructor"==d)}if(b&&!v){var y=e.constructor,g=t.constructor;y==g||!("constructor"in e)||!("constructor"in t)||"function"==typeof y&&y instanceof y&&"function"==typeof g&&g instanceof g||(b=!1)}return r.delete(e),r.delete(t),b}var bi=1,_i="[object Arguments]",pi="[object Array]",yi="[object Object]",ji=Object.prototype,ki=ji.hasOwnProperty;function mi(e,t,n,i,a,r){var o=x(e),l=x(t),s=o?pi:Tn(e),c=l?pi:Tn(t),d=(s=s==_i?yi:s)==yi,h=(c=c==_i?yi:c)==yi,u=s==c;if(u&&$t(e)){if(!$t(t))return!1;o=!0,d=!1}if(u&&!d)return r||(r=new ln),o||ce(e)?Vn(e,t,n,i,a,r):ui(e,t,s,n,i,a,r);if(!(n&bi)){var b=d&&ki.call(e,"__wrapped__"),v=h&&ki.call(t,"__wrapped__");if(b||v){var _=b?e.value():e,f=v?t.value():t;return r||(r=new ln),a(_,f,n,i,r)}}return!!u&&(r||(r=new ln),vi(e,t,n,i,a,r))}function wi(e,t,n,i,a){return e===t||(null==e||null==t||!O(e)&&!O(t)?e!=e&&t!=t:mi(e,t,n,i,wi,a))}function gi(e,t){return wi(e,t)}const Si=/^\d+(\.\d+)?([a-z]+|%)?$/,Ai=(e,t,n)=>{h(e,"_minWidth",(e=>"string"==typeof e&&Si.test(e)),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,n)},Oi=class{constructor(n){t(this,n),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(t,n,i,a=!1)=>{var o,l;let s=String(n);return this.horizontal&&(null===(o=t[0])||void 0===o?void 0:o.data)&&(s=null!==(l=this.getDataKey(t[0].data))&&void 0!==l?l:s),e("tr",{class:r("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${s}`},this.renderSelectionCell(t,n),t.map(((e,t)=>this.renderTableCell(e,n,t,i))))},this.renderTableCell=(t,n,i,a)=>{const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let l=`${n}-${i}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);l=e?`${e}-${this.horizontal?i:n}`:l}return t.headerCell?this.renderHeadingCell(t,n,i,a):e("td",{key:`cell-${l}`,class:r("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign}),colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")},this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto"},this.tableDivElementHasScrollbar=!1,this.previousHeaderCells=void 0,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0,this._tableSettings=void 0}validateData(e){j(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){k(this,e)}validateHeaderCells(e){W(this,e),gi(this.previousHeaderCells,this.state._headerCells)||this.initializeTableSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){M(this,e,{required:!0})}validateMinWidth(e){Ai(this,e)}validateOn(e){m(this,e)}validateSelection(e){w(this,e)}validateTableSettings(e){g(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const n=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let i=this.checkboxRefs.indexOf(n);i>-1&&(e.preventDefault(),"ArrowDown"===e.key?(i=(i+1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()):"ArrowUp"===e.key&&(e.preventDefault(),i=(i+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}handleSettingsChange(e){v(this,"_tableSettings",e.detail)}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,_())})),this.dataToKeyMap.forEach(((t,n)=>{e.includes(n)||this.dataToKeyMap.delete(n)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const n=e.render(t,e,e.data,this.state._data);"string"==typeof n&&(t.textContent=n)}}))))}getNumberOfCols(e,t){let n=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var n;return t+=null!==(n=e.colSpan)&&void 0!==n?n:1})),n<t&&(n=t)})),0===n&&(n=t.length),n}getNumberOfRows(e,t){var n;let i=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var n;return t+=null!==(n=e.rowSpan)&&void 0!==n?n:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(n=this.state._dataFoot)||void 0===n?void 0:n.length)||0,i}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,n;let i=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.getThePrimaryHeadersWithKeysIfExists(null!==(n=e.vertical)&&void 0!==n?n:[]),i.length>0&&(this.horizontal=!1)),i}getColumnPositionMap(){var e;const t=new Map;return null===(e=this.state._tableSettings)||void 0===e||e.columns.forEach((e=>{t.set(e.key,e.position)})),t}sortByColumnPosition(e){const t=this.getColumnPositionMap();return[...e].sort(((e,n)=>{var i,a,r,o;return(null!==(a=t.get(null!==(i=e.key)&&void 0!==i?i:""))&&void 0!==a?a:Number.MAX_SAFE_INTEGER)-(null!==(o=t.get(null!==(r=n.key)&&void 0!==r?r:""))&&void 0!==o?o:Number.MAX_SAFE_INTEGER)}))}createDataField(e,t,n){var i;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const a=this.getPrimaryHeaders(t),r=this.getNumberOfCols(t.horizontal,e);let o=this.getNumberOfRows(t.vertical,e),l=0;n&&(l=o,o+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const s=[],d=[],h=[];t.vertical.forEach(((e,t)=>{d[t]=0,h[t]=[]}));const u=this.sortByColumnPosition(a);for(let i=l;i<o;i++){const a=[];t.vertical.forEach(((e,t)=>{let n=0;if(h[t].forEach((e=>n+=e)),n<=i){const r=e[i-n+d[t]];if("object"==typeof r){a.push(Object.assign(Object.assign({},r),{headerCell:!0,data:{}}));let e=1;if("number"==typeof r.rowSpan&&r.rowSpan>1&&(e=r.rowSpan),h[t].push(e),"number"==typeof r.colSpan&&r.colSpan>1)for(let n=1;n<r.colSpan;n++)h[t+n].push(e);d[t]++}}}));for(let t=0;t<r;t++)if(!0===this.horizontal){const r=n&&this.state._dataFoot?this.state._dataFoot[i-l]:e[i];"object"==typeof u[t]&&null!==u[t]&&"string"==typeof u[t].key&&"object"==typeof r&&null!==r&&a.push(Object.assign(Object.assign({},u[t]),{colSpan:void 0,data:r,label:r[u[t].key],rowSpan:void 0}))}else"object"==typeof u[i]&&null!==u[i]&&"string"==typeof u[i].key&&"object"==typeof e[t]&&null!==e[t]&&a.push(Object.assign(Object.assign({},u[i]),{colSpan:void 0,data:e[t],label:e[t][u[i].key],rowSpan:void 0}));s.push(a)}if(0===e.length){let e=0,n=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{n+=e.rowSpan||1})));const i={colSpan:e,label:c("kol-no-entries"),render:void 0,rowSpan:Math.max(n,1)};0===s.length?s.push([i]):s[0].push(i)}return s}handleSelectionChangeCallbackAndEvent(e,t){var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[b.onSelectionChange])&&this.state._on[b.onSelectionChange](e,t),this.host&&p(this.host,y.selectionChange,t)}initializeTableSettings(){if(this._tableSettings)return;const e=this.getPrimaryHeaders(this.state._headerCells);this.state._tableSettings||(this.state._tableSettings={columns:[]}),this.state._tableSettings.columns=e.filter((e=>e.key)).map(((e,t)=>{var n;return{key:null!==(n=e.key)&&void 0!==n?n:_(),label:e.label,position:t,visible:!0}}))}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}renderSelectionCell(t,n){var i,l,s;const c=this.state._selection;if(!c)return"";const d=this.getSelectionKeyPropertyName(),h=null===(i=t[0])||void 0===i?void 0:i.data;if(!h)return"";const u=h[d],b=c.multiple||void 0===c.multiple,v=null===(l=null==c?void 0:c.selectedKeys)||void 0===l?void 0:l.includes(u),_=null===(s=null==c?void 0:c.disabledKeys)||void 0===s?void 0:s.includes(u),f=c.label(h),p={name:"selection",checked:v,disabled:_,id:u,"aria-label":f};return e("td",{key:`tbody-${n}-selection`,class:"kol-table__cell kol-table__cell--selection"},e("div",{class:r("kol-table__selection",{"kol-table__selection--checked":v})},b?e("label",{class:r("kol-table__selection-label",{"kol-table__selection-label--disabled":_})},e(o,{class:"kol-table__selection-icon",_icons:"codicon "+(v?"codicon-check":""),_label:""}),e("input",Object.assign({class:r("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},p,{type:"checkbox",onInput:e=>{var t,n;const i=v?null===(n=null==c?void 0:c.selectedKeys)||void 0===n?void 0:n.filter((e=>e!==u)):[...null!==(t=null==c?void 0:c.selectedKeys)&&void 0!==t?t:[],u];this.handleSelectionChangeCallbackAndEvent(e,null!=i?i:[])}}))):e("label",{class:"kol-table__selection-label"},e("input",Object.assign({class:r("kol-table__selection-input kol-table__selection-input--radio")},p,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,u)}}))),e(a,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${u}-label`,_label:f})))}getColumnSettings(e){var t;return null===(t=this.state._tableSettings)||void 0===t?void 0:t.columns.find((t=>t.key===e.key))}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter((t=>{var n,i;return!(null===(i=null===(n=this.state._selection)||void 0===n?void 0:n.disabledKeys)||void 0===i?void 0:i.includes(t[e]))}))}getSelectedKeysWithoutDisabledKeys(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,n;return!(null===(n=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===n?void 0:n.includes(e))}))}getSelectedKeysWithDisabledKeysOnly(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,n;return null===(n=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===n?void 0:n.includes(e)}))}getRevertedSelection(e){var t;const n=this.getSelectionKeyPropertyName(),i=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&i.push(...this.getDataWithSelectionEnabled().map((e=>null==e?void 0:e[n]))),i}getTableMinWidth(){var e,t;const n=null!==(t=null===(e=this.state._tableSettings)||void 0===e?void 0:e.columns.filter((e=>e.visible)).reduce(((e,t)=>{var n;return e+(null!==(n=t.width)&&void 0!==n?n:0)}),0))&&void 0!==t?t:0;return"auto"===this.state._minWidth?`${n}ch`:`max(${this.state._minWidth}, ${n}ch)`}renderHeadingSelectionCell(){var t,n;const i=this.state._selection;if(!i||!i.multiple&&void 0!==i.multiple)return e("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});const l=null!==(n=null===(t=this.getSelectedKeysWithoutDisabledKeys())||void 0===t?void 0:t.length)&&void 0!==n?n:0,s=l===this.getDataWithSelectionEnabled().length,d=0!==l&&!s;let h="kol-table-selection-indeterminate";s&&!d&&(h="kol-table-selection-none"),0===l&&(h="kol-table-selection-all");const u=c(h);return e("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header"},e("div",{class:r("kol-table__selection",{"kol-table__selection--indeterminate":d,"kol-table__selection--checked":s})},e("label",{class:"kol-table__selection-label"},e(o,{class:"kol-table__selection-icon",_icons:"codicon "+(d?"codicon-remove":s?"codicon-check":""),_label:""}),e("input",{class:r("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:s&&!d,indeterminate:d,"aria-label":u,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!s))}})),e(a,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${h}-label`,_label:u})))}renderHeaderTdCell(){return e(n,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&e("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(t,n,i,a){const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let s,c="codicon codicon-fold";if(t.sortDirection)switch(t.sortDirection){case"ASC":c="codicon codicon-chevron-up",s="ascending";break;case"DESC":c="codicon codicon-chevron-down",s="descending"}const d=a?"row":"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col";return e("th",{key:`${n}-${i}-${t.label}`,class:r("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign,[`kol-table__cell--${s}`]:s}),scope:d,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},"aria-sort":s,"data-sort":`sort-${t.sortDirection}`},t.sortDirection?e(l,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:c},_label:t.label,_on:{onClick:e=>{var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection}),this.host&&p(this.host,y.sort,{key:t.key,currentSortDirection:t.sortDirection})}}}):t.label)}renderSpacer(t,n){var i,a;const o=(null===(i=this.state._headerCells.vertical)||void 0===i?void 0:i.length)||0,l=null===(a=null==n?void 0:n[0])||void 0===a?void 0:a.reduce(((e,t)=>e+(t.colSpan||1)),0),s=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:r("kol-table__spacer",`kol-table__spacer--${t}`)},e("td",{class:r(`kol-table__spacer-line kol-table__spacer-line--${t}`),colSpan:o+l+s}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",t),t.map(((e,t)=>this.renderTableRow(e,t,!0,!0)))])}render(){var t;const n=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const i=null===(t=this.state._headerCells.horizontal)||void 0===t?void 0:t.map((e=>this.sortByColumnPosition(e)));return e("div",{key:"55c1614208608e7206bfde32af951f066267b629",class:"kol-table"},e(s,{key:"a6a176a7a90d134c6c99fae76b14d0dd6523a88b",_tableSettings:this.state._tableSettings}),e("div",{key:"7d1498c5925016efc03772480936bfd2d8d9bd27",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"41097ebc50e0913333e017d43206778c031add65",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},e("div",{key:"f0539b67aa7c7ef1271a67dd22c741e4a6f60d4e",class:"kol-table__focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),e("caption",{key:"7199792f023995a8964efaa2b9f11b79780717b1",class:"kol-table__caption",id:"caption"},this.state._label),Array.isArray(i)&&e("thead",{key:"86242ee062afb71d654b7e64698dca8178012bc3",class:"kol-table__head"},[i.map(((t,n)=>e("tr",{class:"kol-table__head-row",key:`thead-${n}`},this.state._selection&&this.renderHeadingSelectionCell(),0===n&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map(((e,t)=>this.renderHeadingCell(e,n,t,!1)))))),this.renderSpacer("head",i)]),e("tbody",{key:"b7866fe3430029ea01b05d747ea49e42c577d10c",class:"kol-table__body"},n.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot())))}get host(){return i(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"],_tableSettings:["validateTableSettings"]}}};export{Oi as kol_table_stateless_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-1704c42b.js";import{n as t}from"./component-names-553d8bfa.js";const o="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\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  :host {\n    display: block;\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-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",i=o,l=class{constructor(e){n(this,e),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0,this._tableSettings=void 0}render(){return e(t,{key:"dedf6d73b1b7ac72b4e6c6dfe3144ebf9ea42f4a",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection,_tableSettings:this._tableSettings})}};l.style={default:i};export{l as kol_table_stateless};
+import{r as n,h as e}from"./index-4d380356.js";import{n as t}from"./component-names-553d8bfa.js";const o="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\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  :host {\n    display: block;\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-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",i=o,l=class{constructor(e){n(this,e),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0,this._tableSettings=void 0}render(){return e(t,{key:"dedf6d73b1b7ac72b4e6c6dfe3144ebf9ea42f4a",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection,_tableSettings:this._tableSettings})}};l.style={default:i};export{l as kol_table_stateless};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,g as e}from"./index-1704c42b.js";import{w as i,i as o,D as s,l as a,E as l,z as r,A as d,N as h}from"./index-ebe5a881.js";import{t as c}from"./i18n-260f0fe9.js";import{b as u}from"./component-names-553d8bfa.js";import{K as b}from"./keyboard-2483c6de.js";import{d as f,K as p}from"./events-bad0a075.js";import{c as m}from"./clsx-09a06a12.js";import{v as g}from"./align-d2572387.js";import{v}from"./label-bf9966d0.js";import"./i18n-45224cc3.js";const y=["select-automatic","select-manual"],k=(t,e)=>{i(t,"_behavior",(t=>"string"==typeof t&&y.includes(t)),new Set([`KoliBriTabBehavior {${y.join(", ")}`]),e)},_=(t,e)=>{o(t,"_hasCreateButton",e)},w="/*\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  :host {\n    display: block;\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-tabs {\n    display: var(--display);\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__content {\n    overflow: auto;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: var(--button-group-flex-direction);\n    order: var(--button-group-order);\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",x=w,T=class{constructor(e){t(this,e),this.onCreateLabel=`${c("kol-new")} …`,this.nextPossibleTabIndex=(t,e,n=1)=>{const a=e+n;return a<t.length?t[a]._disabled?this.nextPossibleTabIndex(t,e,n+1):a:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const a=e-n;return a>=0?t[a]._disabled?this.prevPossibleTabIndex(t,e,n+1):a:e},this.onKeyDown=t=>{switch(t.key){case b.ArrowRight:this.goToNextTab(t);break;case b.ArrowLeft:this.goToPreviousTab(t);break;case b.Space:case b.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,a)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,a||t);t=a||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,a||t);s("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,a)=>{let o,i;o="_selected"===a?t:this.state._selected,i="_tabs"===a?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,i))},this.refreshTabPanels=()=>{var t,e,n,a;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let o=0;o<(null===(t=this.state._tabs)||void 0===t?void 0:t.length);o++){const t=document.createElement("div");t.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),t.setAttribute("id",`tabpanel-${o}`),t.setAttribute("role","tabpanel"),t.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),t.appendChild(i),null===(e=this.tabPanelHost)||void 0===e||e.appendChild(t),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(a=this.host)||void 0===a?void 0:a.children[o])&&this.host.children[o].setAttribute("slot",`tabpanel-slot-${o}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach(((t,e)=>{e===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")}))},this.onCreate=t=>{var e,n;t.preventDefault(),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onCreate)||void 0===n||n.call(e,t),this.host&&f(this.host,p.create)},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._hasCreateButton=!1,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var a,o;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(o=null===(a=this.state._tabs[e]._on)||void 0===a?void 0:a.onSelect)||void 0===o||o.call(a,t,e),this.onSelect(t,e)}}renderButtonGroup(){return n("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((t,e)=>n(u,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_buttonVariant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.state._hasCreateButton&&n(u,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"codicon codicon-plus","data-testid":"tabs-create-button"}))}render(){return n("div",{key:"651b397e4e56da8694268e5670dd12da67fb4430",ref:t=>{this.tabPanelsElement=t},class:m("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),n("div",{key:"2583e66740101758cdf796a45961142384bf9fdf",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(t){g(this,t)}validateBehavior(t){k(this,t)}validateHasCreateButton(t){_(this,t)}validateLabel(t){v(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){const e={};"function"==typeof t.onCreate&&(e.onCreate=t.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),a(this,"_on",e)}}validateSelected(t){l(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){r(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),d("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior),this.validateHasCreateButton(this._hasCreateButton)}componentDidRender(){this.refreshTabPanels()}focusTabById(t){if(this.tabPanelsElement){const e=h(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,a;null===(a=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===a||a.call(n,t,e),this.host&&f(this.host,p.select,e),this.focusTabById(e)}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};T.style={default:x};export{T as kol_tabs};
+import{r as t,h as n,g as e}from"./index-4d380356.js";import{w as i,i as o,D as s,l as a,E as l,z as r,A as d,N as h}from"./index-ebe5a881.js";import{t as c}from"./i18n-260f0fe9.js";import{b as u}from"./component-names-553d8bfa.js";import{K as b}from"./keyboard-2483c6de.js";import{d as f,K as p}from"./events-bad0a075.js";import{c as m}from"./clsx-09a06a12.js";import{v as g}from"./align-d2572387.js";import{v}from"./label-bf9966d0.js";import"./i18n-45224cc3.js";const y=["select-automatic","select-manual"],k=(t,e)=>{i(t,"_behavior",(t=>"string"==typeof t&&y.includes(t)),new Set([`KoliBriTabBehavior {${y.join(", ")}`]),e)},_=(t,e)=>{o(t,"_hasCreateButton",e)},w="/*\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  :host {\n    display: block;\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-tabs {\n    display: var(--display);\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__content {\n    overflow: auto;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: var(--button-group-flex-direction);\n    order: var(--button-group-order);\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",x=w,T=class{constructor(e){t(this,e),this.onCreateLabel=`${c("kol-new")} …`,this.nextPossibleTabIndex=(t,e,n=1)=>{const a=e+n;return a<t.length?t[a]._disabled?this.nextPossibleTabIndex(t,e,n+1):a:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const a=e-n;return a>=0?t[a]._disabled?this.prevPossibleTabIndex(t,e,n+1):a:e},this.onKeyDown=t=>{switch(t.key){case b.ArrowRight:this.goToNextTab(t);break;case b.ArrowLeft:this.goToPreviousTab(t);break;case b.Space:case b.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,a)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,a||t);t=a||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,a||t);s("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,a)=>{let o,i;o="_selected"===a?t:this.state._selected,i="_tabs"===a?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,i))},this.refreshTabPanels=()=>{var t,e,n,a;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let o=0;o<(null===(t=this.state._tabs)||void 0===t?void 0:t.length);o++){const t=document.createElement("div");t.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),t.setAttribute("id",`tabpanel-${o}`),t.setAttribute("role","tabpanel"),t.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),t.appendChild(i),null===(e=this.tabPanelHost)||void 0===e||e.appendChild(t),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(a=this.host)||void 0===a?void 0:a.children[o])&&this.host.children[o].setAttribute("slot",`tabpanel-slot-${o}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach(((t,e)=>{e===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")}))},this.onCreate=t=>{var e,n;t.preventDefault(),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onCreate)||void 0===n||n.call(e,t),this.host&&f(this.host,p.create)},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._hasCreateButton=!1,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var a,o;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(o=null===(a=this.state._tabs[e]._on)||void 0===a?void 0:a.onSelect)||void 0===o||o.call(a,t,e),this.onSelect(t,e)}}renderButtonGroup(){return n("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((t,e)=>n(u,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_buttonVariant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.state._hasCreateButton&&n(u,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"codicon codicon-plus","data-testid":"tabs-create-button"}))}render(){return n("div",{key:"651b397e4e56da8694268e5670dd12da67fb4430",ref:t=>{this.tabPanelsElement=t},class:m("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),n("div",{key:"2583e66740101758cdf796a45961142384bf9fdf",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(t){g(this,t)}validateBehavior(t){k(this,t)}validateHasCreateButton(t){_(this,t)}validateLabel(t){v(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){const e={};"function"==typeof t.onCreate&&(e.onCreate=t.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),a(this,"_on",e)}}validateSelected(t){l(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){r(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),d("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior),this.validateHasCreateButton(this._hasCreateButton)}componentDidRender(){this.refreshTabPanels()}focusTabById(t){if(this.tabPanelsElement){const e=h(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,a;null===(a=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===a||a.call(n,t,e),this.host&&f(this.host,p.select,e),this.focusTabById(e)}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};T.style={default:x};export{T as kol_tabs};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,r as t,g as n}from"./index-1704c42b.js";import{c as i}from"./clsx-09a06a12.js";import{E as a,B as o,i as s,w as l,l as r}from"./index-ebe5a881.js";import{n as d}from"./dev.utils-7b2d1fa9.js";import{e as h,c,g as u,a as f,F as m}from"./getRenderStates-67595fa6.js";import{_ as p}from"./tslib.es6-1173d062.js";import{I as b,a as v}from"./controller-icon-256a4f31.js";import{v as k}from"./has-counter-3fc44829.js";import{v as y}from"./rows-225b4f43.js";import{v as g}from"./spell-check-5559a801.js";import"./events-bad0a075.js";import"./associated.controller-22684481.js";import"./bootstrap-dcdb1765.js";import"./component-names-553d8bfa.js";import"./i18n-45224cc3.js";import"./access-and-short-key-f743a5c4.js";import"./tooltip-align-465a8590.js";import"./align-d2572387.js";import"./hide-label-8b3a8709.js";import"./label-bf9966d0.js";import"./Alert-58253beb.js";import"./i18n-260f0fe9.js";import"./bem-e4c3a2e6.js";import"./browser-f629a56a.js";import"./Heading-1e98210c.js";import"./InternalUnderlinedBadgeText-ca1489f7.js";import"./isArray-7a60fa7f.js";import"./Icon-34fc4368.js";import"./isObject-ffcbbb76.js";import"./icons-a9c52ed8.js";const _=["vertical","none"],w=t=>{const{class:n,msg:a,touched:o,readonly:l,disabled:s,required:r,ariaDescribedBy:d,hideLabel:u,label:m}=t,v=p(t,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),f=c(a,o),_={"kol-textarea--disabled":Boolean(s),"kol-textarea--required":Boolean(r),"kol-textarea--touched":Boolean(o),"kol-textarea--readonly":Boolean(l),[`kol-textarea--${(null==a?void 0:a.type)||"error"}`]:f},b=Object.assign(Object.assign({class:i("kol-textarea",_,n),required:r,disabled:s,readonly:l},h({ariaDescribedBy:d,hideLabel:u,label:m})),v);return e("textarea",Object.assign({},b))};function x(e){const{ariaDescribedBy:t}=u(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,maxLength:e._maxLength,touched:e._touched,msg:f(e._msg)}}const j=t=>{var{state:n}=t,a=p(t,["state"]);return e(w,Object.assign({},x(n),a))};class z extends b{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){k(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){a(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){o(this.component,"_placeholder",e)}validateReadOnly(e){s(this.component,"_readOnly",e)}validateResize(e){l(this.component,"_resize",(e=>"string"==typeof e&&_.includes(e)),new Set(`String {${_.join(", ")}`),e,{defaultValue:"vertical"})}validateRequired(e){s(this.component,"_required",e)}validateRows(e){y(this.component,e)}validateSpellCheck(e){g(this.component,e)}validateValue(e){o(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const L="/*\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  :host {\n    display: block;\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-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}",S=L,B=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const a=Math.round(e.scrollHeight/n);return e.rows=t,a},O=class{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async kolFocus(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:i("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":!!this.state._hasCounter}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize}},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(m,Object.assign({key:"7561d490f442000a93a1cefd22593be40ed9cbb9"},this.getFormFieldProps()),e(v,{key:"0d83e48269354e9aecc39845cd7199a4a0df3691",state:this.state},e(j,Object.assign({key:"a984a131997c4196c52408696e1517fcbc7cc940"},this.getTextAreaProps()))))}constructor(e){t(this,e),this.catchRef=e=>{this.textareaRef=e},this.onInput=e=>{if(this.textareaRef instanceof HTMLTextAreaElement){const t=this.textareaRef.value;r(this,"_currentLength",t.length),this._value=t,this.state._adjustHeight&&(this._rows=B(this.textareaRef)),this.controller.onFacade.onInput(e)}},this._accessKey=void 0,this._adjustHeight=!1,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._shortKey=void 0,this._spellCheck=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${d()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.controller=new z(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout((()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>B(this.textareaRef)?this.state._rows:B(this.textareaRef):this._rows||(this._rows=1)}),0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return n(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};O.style={default:S};export{O as kol_textarea};
+import{h as e,r as t,g as n}from"./index-4d380356.js";import{c as i}from"./clsx-09a06a12.js";import{E as a,B as o,i as s,w as l,l as r}from"./index-ebe5a881.js";import{n as d}from"./dev.utils-2d90fdc8.js";import{e as h,c,g as u,a as f,F as m}from"./getRenderStates-d255cc7a.js";import{_ as p}from"./tslib.es6-1173d062.js";import{I as b,a as v}from"./controller-icon-64049794.js";import{v as k}from"./has-counter-3fc44829.js";import{v as y}from"./rows-225b4f43.js";import{v as g}from"./spell-check-5559a801.js";import"./events-bad0a075.js";import"./associated.controller-22684481.js";import"./bootstrap-dcdb1765.js";import"./component-names-553d8bfa.js";import"./i18n-45224cc3.js";import"./access-and-short-key-f743a5c4.js";import"./tooltip-align-465a8590.js";import"./align-d2572387.js";import"./hide-label-8b3a8709.js";import"./label-bf9966d0.js";import"./Alert-bea534f9.js";import"./i18n-260f0fe9.js";import"./bem-e4c3a2e6.js";import"./browser-f629a56a.js";import"./Heading-0a6e428a.js";import"./InternalUnderlinedBadgeText-1f0b9da7.js";import"./isArray-7a60fa7f.js";import"./Icon-5ed61d01.js";import"./isObject-ffcbbb76.js";import"./icons-a9c52ed8.js";const _=["vertical","none"],w=t=>{const{class:n,msg:a,touched:o,readonly:l,disabled:s,required:r,ariaDescribedBy:d,hideLabel:u,label:m}=t,v=p(t,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),f=c(a,o),_={"kol-textarea--disabled":Boolean(s),"kol-textarea--required":Boolean(r),"kol-textarea--touched":Boolean(o),"kol-textarea--readonly":Boolean(l),[`kol-textarea--${(null==a?void 0:a.type)||"error"}`]:f},b=Object.assign(Object.assign({class:i("kol-textarea",_,n),required:r,disabled:s,readonly:l},h({ariaDescribedBy:d,hideLabel:u,label:m})),v);return e("textarea",Object.assign({},b))};function x(e){const{ariaDescribedBy:t}=u(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,maxLength:e._maxLength,touched:e._touched,msg:f(e._msg)}}const j=t=>{var{state:n}=t,a=p(t,["state"]);return e(w,Object.assign({},x(n),a))};class z extends b{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){k(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){a(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){o(this.component,"_placeholder",e)}validateReadOnly(e){s(this.component,"_readOnly",e)}validateResize(e){l(this.component,"_resize",(e=>"string"==typeof e&&_.includes(e)),new Set(`String {${_.join(", ")}`),e,{defaultValue:"vertical"})}validateRequired(e){s(this.component,"_required",e)}validateRows(e){y(this.component,e)}validateSpellCheck(e){g(this.component,e)}validateValue(e){o(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const L="/*\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  :host {\n    display: block;\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-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}",S=L,B=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const a=Math.round(e.scrollHeight/n);return e.rows=t,a},O=class{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async kolFocus(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:i("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":!!this.state._hasCounter}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize}},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(m,Object.assign({key:"7561d490f442000a93a1cefd22593be40ed9cbb9"},this.getFormFieldProps()),e(v,{key:"0d83e48269354e9aecc39845cd7199a4a0df3691",state:this.state},e(j,Object.assign({key:"a984a131997c4196c52408696e1517fcbc7cc940"},this.getTextAreaProps()))))}constructor(e){t(this,e),this.catchRef=e=>{this.textareaRef=e},this.onInput=e=>{if(this.textareaRef instanceof HTMLTextAreaElement){const t=this.textareaRef.value;r(this,"_currentLength",t.length),this._value=t,this.state._adjustHeight&&(this._rows=B(this.textareaRef)),this.controller.onFacade.onInput(e)}},this._accessKey=void 0,this._adjustHeight=!1,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._shortKey=void 0,this._spellCheck=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${d()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.controller=new z(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout((()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>B(this.textareaRef)?this.state._rows:B(this.textareaRef):this._rows||(this._rows=1)}),0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return n(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};O.style={default:S};export{O as kol_textarea};