@public-ui/components 4.1.1-rc.2 → 4.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"kol-skeleton.entry.cjs.js","sources":["src/internal/props/count.ts","src/internal/props/name.ts","src/internal/functional-components/skeleton/component.tsx","src/internal/functional-components/skeleton/controller.ts","src/components/_skeleton/web-components/skeleton/component.tsx"],"sourcesContent":["import { createPropDefinition, type Prop } from './helpers/factory';\nimport { normalizeInteger } from './helpers/normalizers';\n\nexport type CountProp = Prop<'count', number | string, number>;\nexport const countProp = createPropDefinition<CountProp>(normalizeInteger, (v) => v >= 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>(normalizeString, () => true);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { bem } from '../../../schema/bem-registry';\nimport { ClickButtonFC } from '../click-button/component';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { SkeletonApi } from './api';\n\nconst skeletonBem = bem.forBlock('kol-skeleton');\nconst BEM_CLASS_SKELETON__ACTIONS = skeletonBem('actions');\nconst BEM_CLASS_SKELETON__CONTAINER = skeletonBem('container');\nconst BEM_CLASS_SKELETON__COUNTER = skeletonBem('counter');\nconst BEM_CLASS_SKELETON__NAME = skeletonBem('name');\n\nexport const SkeletonFC: FC<FunctionalComponentProps<SkeletonApi>> = (props) => {\n\tconst { count, label, name, show, handleClick, refButton } = props;\n\tconst hasName = !!(show && name?.trim());\n\tconst BEM_CLASS_ROOT = skeletonBem({\n\t\t'has-name': hasName,\n\t\t'is-hidden': !show,\n\t});\n\treturn (\n\t\t<div class={BEM_CLASS_ROOT}>\n\t\t\t<div class={BEM_CLASS_SKELETON__CONTAINER}>\n\t\t\t\t{hasName && <span class={BEM_CLASS_SKELETON__NAME}>{name}</span>}\n\t\t\t\t<div class={BEM_CLASS_SKELETON__COUNTER}>Count: {count}</div>\n\t\t\t</div>\n\t\t\t<div class={BEM_CLASS_SKELETON__ACTIONS}>\n\t\t\t\t<ClickButtonFC label={label} handleClick={handleClick} refButton={refButton} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n","import { Log } from '../../../schema';\nimport { countProp, labelProp, nameProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport { ClickButtonController } from '../click-button/controller';\nimport type { ControllerInterface, ResolvedInputProps } from '../generic-types';\nimport type { SkeletonApi } from './api';\n\nexport class SkeletonController extends BaseController<SkeletonApi> implements ControllerInterface<SkeletonApi> {\n\tprivate readonly clickButtonCtrl: ClickButtonController;\n\tprivate intervalId?: ReturnType<typeof setTimeout>;\n\n\tpublic constructor(states: SkeletonApi['States']) {\n\t\tsuper(states, {\n\t\t\tcount: 0,\n\t\t\tname: '',\n\t\t});\n\n\t\tthis.clickButtonCtrl = new ClickButtonController({});\n\t\tthis.startLoadedEventInterval();\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<SkeletonApi>): void {\n\t\tconst { count, name } = props;\n\t\tthis.watchCount(count);\n\t\tthis.watchName(name);\n\t\tthis.watchLabel(this.component.label);\n\t\tthis.clickButtonCtrl.componentWillLoad({\n\t\t\tlabel: this.component.label,\n\t\t});\n\t}\n\n\tpublic watchCount(value?: number | string): void {\n\t\tcountProp.apply(value, (v) => {\n\t\t\tthis.setProp('count', v);\n\t\t\tthis.setState('count', v);\n\t\t});\n\t}\n\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => {\n\t\t\tthis.setProp('name', v);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setState('label', v);\n\t\t\tthis.clickButtonCtrl.watchLabel(v);\n\t\t});\n\t}\n\n\tpublic toggle(): void {\n\t\tthis.setState('show', !this.component.show);\n\t}\n\n\tpublic onKeydown = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.log('Show should be toggled');\n\t\t\tvoid this.toggle();\n\t\t}\n\t};\n\n\tpublic handleClick = (): void => {\n\t\tLog.debug('Button clicked, count should be increased');\n\t\tconst { count } = this.getProps();\n\t\tconst nextCount = count + 1;\n\t\tthis.setProp('count', nextCount);\n\t\tthis.setState('count', nextCount);\n\t};\n\n\tpublic focus(): void {\n\t\treturn this.clickButtonCtrl.focus();\n\t}\n\n\tpublic setButtonRef = (element?: HTMLButtonElement): void => {\n\t\tthis.clickButtonCtrl.setButtonRef(element);\n\t};\n\n\tprivate startLoadedEventInterval(): void {\n\t\t// Emit loaded event every 2 seconds with current count value\n\t\tthis.intervalId = setInterval(() => {\n\t\t\tconst { count } = this.getProps();\n\t\t\tthis.emitLoaded(count);\n\t\t}, 2000);\n\t}\n\n\tprivate emitLoaded(count: number): void {\n\t\t// This method will be used by the web component to emit the loaded event\n\t\t// The web component needs to call this method to actually emit the event\n\t\t// We use a callback approach to let the web component handle the emission\n\t\tif (this.onLoadedCallback) {\n\t\t\tthis.onLoadedCallback(count);\n\t\t}\n\t}\n\n\tprivate onLoadedCallback?: (count: number) => void;\n\n\tpublic setOnLoadedCallback(callback: (count: number) => void): void {\n\t\tthis.onLoadedCallback = callback;\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.intervalId) {\n\t\t\tclearInterval(this.intervalId);\n\t\t\tthis.intervalId = undefined;\n\t\t}\n\t}\n}\n","import type { EventEmitter, JSX } from '@stencil/core';\nimport { Component, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { SkeletonApi } from '../../../../internal/functional-components/skeleton/api';\nimport { SkeletonFC } from '../../../../internal/functional-components/skeleton/component';\nimport { SkeletonController } from '../../../../internal/functional-components/skeleton/controller';\nimport { Log } from '../../../../schema';\n\n@Component({\n\ttag: 'kol-skeleton',\n\tshadow: true,\n})\nexport class KolSkeleton implements WebComponentInterface<SkeletonApi> {\n\tprivate readonly ctrl = new SkeletonController(this);\n\n\t/**\n\t * Focuses the interactive element of the component.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.focus());\n\t}\n\n\t/**\n\t * Toggles the visibility of the skeleton component.\n\t */\n\t@Method()\n\tpublic async toggle(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.toggle());\n\t}\n\n\t/**\n\t * Sets the count of the skeleton component.\n\t */\n\t@Prop()\n\tpublic _count?: number | string;\n\n\t@Watch('_count')\n\tpublic watchCount(value?: number | string): void {\n\t\tthis.ctrl.watchCount(value);\n\t}\n\n\t/**\n\t * Sets the name of the skeleton component.\n\t */\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\t@State()\n\tpublic label: string = 'Label';\n\n\t@State()\n\tpublic show: boolean = true;\n\n\t@State()\n\tpublic count: number = 0;\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent): void {\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tLog.debug('button pressed');\n\t\t\tthis.ctrl.handleClick();\n\t\t}\n\t}\n\n\t/**\n\t * Emitted when the skeleton has finished loading.\n\t */\n\t@Event() public loaded!: EventEmitter<number>;\n\n\t/**\n\t * Emitted when the skeleton has been rendered for the first time.\n\t */\n\t@Event() public rendered!: EventEmitter<void>;\n\n\t@Listen('keydown', { target: 'window' })\n\tpublic onKeydown(event: KeyboardEvent): void {\n\t\tthis.ctrl.onKeydown(event);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tcount: this._count,\n\t\t\tname: this._name,\n\t\t});\n\n\t\t// Set up the callback for emitting loaded events\n\t\tthis.ctrl.setOnLoadedCallback((count: number) => {\n\t\t\tthis.loaded.emit(count);\n\t\t});\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.rendered.emit();\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { count, name } = this.ctrl.getProps();\n\t\tconst { label, show } = this;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<SkeletonFC\n\t\t\t\t\tcount={count}\n\t\t\t\t\tlabel={label}\n\t\t\t\t\tname={name}\n\t\t\t\t\thandleClick={() => this.ctrl.handleClick()}\n\t\t\t\t\tonLoaded={this.loaded}\n\t\t\t\t\tonRendered={this.rendered}\n\t\t\t\t\tshow={show}\n\t\t\t\t\trefButton={(element) => this.ctrl.setButtonRef(element)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":["createPropDefinition","normalizeInteger","normalizeString","bem","h","ClickButtonFC","BaseController","Log","ClickButtonController","labelProp","Host"],"mappings":"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"}
+{"version":3,"file":"kol-skeleton.entry.cjs.js","sources":["src/internal/props/name.ts","src/internal/functional-components/skeleton/component.tsx","src/internal/functional-components/skeleton/controller.ts","src/components/_skeleton/web-components/skeleton/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>(normalizeString, () => true);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { bem } from '../../../schema/bem-registry';\nimport { ClickButtonFC } from '../click-button/component';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { SkeletonApi } from './api';\n\nconst skeletonBem = bem.forBlock('kol-skeleton');\nconst BEM_CLASS_SKELETON__ACTIONS = skeletonBem('actions');\nconst BEM_CLASS_SKELETON__CONTAINER = skeletonBem('container');\nconst BEM_CLASS_SKELETON__COUNTER = skeletonBem('counter');\nconst BEM_CLASS_SKELETON__NAME = skeletonBem('name');\n\nexport const SkeletonFC: FC<FunctionalComponentProps<SkeletonApi>> = (props) => {\n\tconst { count, label, name, show, handleClick, refButton } = props;\n\tconst hasName = !!(show && name?.trim());\n\tconst BEM_CLASS_ROOT = skeletonBem({\n\t\t'has-name': hasName,\n\t\t'is-hidden': !show,\n\t});\n\treturn (\n\t\t<div class={BEM_CLASS_ROOT}>\n\t\t\t<div class={BEM_CLASS_SKELETON__CONTAINER}>\n\t\t\t\t{hasName && <span class={BEM_CLASS_SKELETON__NAME}>{name}</span>}\n\t\t\t\t<div class={BEM_CLASS_SKELETON__COUNTER}>Count: {count}</div>\n\t\t\t</div>\n\t\t\t<div class={BEM_CLASS_SKELETON__ACTIONS}>\n\t\t\t\t<ClickButtonFC label={label} handleClick={handleClick} refButton={refButton} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n","import { Log } from '../../../schema';\nimport { nameProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport { ClickButtonController } from '../click-button/controller';\nimport type { ControllerInterface, ResolvedInputProps } from '../generic-types';\nimport type { SkeletonApi } from './api';\n\nexport class SkeletonController extends BaseController<SkeletonApi> implements ControllerInterface<SkeletonApi> {\n\tprivate readonly clickButtonCtrl: ClickButtonController;\n\tprivate intervalId?: ReturnType<typeof setTimeout>;\n\n\tpublic constructor(states: SkeletonApi['States']) {\n\t\tsuper(states);\n\n\t\tthis.clickButtonCtrl = new ClickButtonController({});\n\t\tthis.startLoadedEventInterval();\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<SkeletonApi>): void {\n\t\tconst { name } = props;\n\t\tthis.watchName(name);\n\t\tthis.clickButtonCtrl.componentWillLoad({\n\t\t\tlabel: this.component.label,\n\t\t});\n\t}\n\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setProp('name', v);\n\t\t\t},\n\t\t\t'',\n\t\t);\n\t}\n\n\tpublic toggle(): void {\n\t\tthis.setState('show', !this.component.show);\n\t}\n\n\tpublic onKeydown = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.log('Show should be toggled');\n\t\t\tvoid this.toggle();\n\t\t}\n\t};\n\n\tpublic handleClick = (): void => {\n\t\tLog.debug('Button clicked, count should be increased');\n\t\tconst { count } = this.component;\n\t\tconst nextCount = count + 1;\n\t\tthis.setState('count', nextCount);\n\t};\n\n\tpublic focus(): void {\n\t\treturn this.clickButtonCtrl.focus();\n\t}\n\n\tpublic setButtonRef = (element?: HTMLButtonElement): void => {\n\t\tthis.clickButtonCtrl.setButtonRef(element);\n\t};\n\n\tprivate startLoadedEventInterval(): void {\n\t\t// Emit loaded event every 2 seconds with current count value\n\t\tthis.intervalId = setInterval(() => {\n\t\t\tconst { count } = this.component;\n\t\t\tthis.emitLoaded(count);\n\t\t}, 2000);\n\t}\n\n\tprivate emitLoaded(count: number): void {\n\t\t// This method will be used by the web component to emit the loaded event\n\t\t// The web component needs to call this method to actually emit the event\n\t\t// We use a callback approach to let the web component handle the emission\n\t\tif (this.onLoadedCallback) {\n\t\t\tthis.onLoadedCallback(count);\n\t\t}\n\t}\n\n\tprivate onLoadedCallback?: (count: number) => void;\n\n\tpublic setOnLoadedCallback(callback: (count: number) => void): void {\n\t\tthis.onLoadedCallback = callback;\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.intervalId) {\n\t\t\tclearInterval(this.intervalId);\n\t\t\tthis.intervalId = undefined;\n\t\t}\n\t}\n}\n","import type { EventEmitter, JSX } from '@stencil/core';\nimport { Component, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { SkeletonApi } from '../../../../internal/functional-components/skeleton/api';\nimport { SkeletonFC } from '../../../../internal/functional-components/skeleton/component';\nimport { SkeletonController } from '../../../../internal/functional-components/skeleton/controller';\nimport { Log } from '../../../../schema';\n\n@Component({\n\ttag: 'kol-skeleton',\n\tshadow: true,\n})\nexport class KolSkeleton implements WebComponentInterface<SkeletonApi> {\n\tprivate readonly ctrl = new SkeletonController(this);\n\n\t/**\n\t * Focuses the interactive element of the component.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.focus());\n\t}\n\n\t/**\n\t * Toggles the visibility of the skeleton component.\n\t */\n\t@Method()\n\tpublic async toggle(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.toggle());\n\t}\n\n\t/**\n\t * Sets the name of the skeleton component.\n\t */\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\t@State()\n\tpublic count: number = 0;\n\n\t@State()\n\tpublic label: string = 'Label';\n\n\t@State()\n\tpublic show: boolean = true;\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent): void {\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tLog.debug('button pressed');\n\t\t\tthis.ctrl.handleClick();\n\t\t}\n\t}\n\n\t/**\n\t * Emitted when the skeleton has finished loading.\n\t */\n\t@Event() public loaded!: EventEmitter<number>;\n\n\t/**\n\t * Emitted when the skeleton has been rendered for the first time.\n\t */\n\t@Event() public rendered!: EventEmitter<void>;\n\n\t@Listen('keydown', { target: 'window' })\n\tpublic onKeydown(event: KeyboardEvent): void {\n\t\tthis.ctrl.onKeydown(event);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tname: this._name,\n\t\t});\n\n\t\t// Set up the callback for emitting loaded events\n\t\tthis.ctrl.setOnLoadedCallback((count: number) => {\n\t\t\tthis.loaded.emit(count);\n\t\t});\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.rendered.emit();\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { name } = this.ctrl.getProps();\n\t\tconst { count, label, show } = this;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<SkeletonFC\n\t\t\t\t\tcount={count}\n\t\t\t\t\tlabel={label}\n\t\t\t\t\tname={name}\n\t\t\t\t\thandleClick={() => this.ctrl.handleClick()}\n\t\t\t\t\tonLoaded={this.loaded}\n\t\t\t\t\tonRendered={this.rendered}\n\t\t\t\t\tshow={show}\n\t\t\t\t\trefButton={(element) => this.ctrl.setButtonRef(element)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":["createPropDefinition","normalizeString","bem","h","ClickButtonFC","BaseController","Log","ClickButtonController","Host"],"mappings":"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"}

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-0zHTL6Wf.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),componentNames=require("./component-names-BcQqUL7D.js"),i18n=require("./i18n-BWA16k5X.js"),events=require("./events-Cd8febUV.js");require("./common-BDQKBMeS.js"),require("./i18n-yHKQt1gl.js");const parseColumnWidth=e=>Number.isFinite(e)&&void 0!==e&&e>0?e:void 0,KolTableSettings=class{constructor(e){index.registerInstance(this,e),this.headerCells=[],this.editingHeaderCells=[],this.errorMessage=null,this.translateTableSettings=i18n.translate("kol-table-settings"),this.translateTableSettingsCancel=i18n.translate("kol-table-settings-cancel"),this.translateTableSettingsApply=i18n.translate("kol-table-settings-apply"),this.translateErrorAllInvisible=i18n.translate("kol-table-settings-error-all-invisible"),this.translateColumnNotHidable=i18n.translate("kol-table-settings-column-not-hidable"),this._horizontalHeaderCells=[]}handleHeaderCellsChange(e){this.headerCells=e.map(e=>[...e]),this.editingHeaderCells=e.map(e=>e.map(e=>Object.assign({},e)))}componentWillLoad(){this.handleHeaderCellsChange(this._horizontalHeaderCells)}getPrimaryRow(){var e;return null!==(e=this.editingHeaderCells[this.editingHeaderCells.length-1])&&void 0!==e?e:[]}updatePrimaryRow(e){this.editingHeaderCells=this.editingHeaderCells.map((t,a,l)=>a===l.length-1?e:t)}moveColumn(e,t){const a=[...this.getPrimaryRow()],l=a.findIndex(t=>t.key===e);if(-1===l)return;let s;if("up"===t){if(0===l)return;s=l-1}else{if(l===a.length-1)return;s=l+1}const[i]=a.splice(l,1);a.splice(s,0,i),this.updatePrimaryRow(a)}handleVisibilityChange(e,t){const a=this.getPrimaryRow().map(a=>a.key===e&&!1!==a.hidable?Object.assign(Object.assign({},a),{visible:Boolean(t)}):a);this.updatePrimaryRow(a)}handleWidthChange(e,t){const a=this.getPrimaryRow().map(a=>a.key===e&&!1!==a.resizable?Object.assign(Object.assign({},a),{width:Number(t)}):a);this.updatePrimaryRow(a)}handleCancel(){var e;this.editingHeaderCells=this.headerCells.map(e=>[...e]),this.errorMessage=null,null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();if(this.getPrimaryRow().some(e=>!1!==e.visible)){if(this.host){this.errorMessage=null,this.headerCells=this.editingHeaderCells.map(e=>e.map(e=>Object.assign({},e)));const e=this.editingHeaderCells.map(e=>e.map(e=>{const t=e,{hidable:a,resizable:l,sortable:s,visible:i,width:n}=t,o=tslib_es6.__rest(t,["hidable","resizable","sortable","visible","width"]),r=Object.assign({},o);return void 0!==i&&(r.visible=i),void 0!==a&&(r.hidable=a),void 0!==s&&(r.sortable=s),void 0!==l&&(r.resizable=l),null!=n&&(r.width=n),r}));events.dispatchDomEvent(this.host,events.KolEvent.changeHeaderCells,e),null===(t=this.popoverRef)||void 0===t||t.hidePopover()}}else this.errorMessage=this.translateErrorAllInvisible}render(){const e=this.getPrimaryRow();return index.h(componentNames.KolPopoverButtonWcTag,{key:"6b14b66960b20d563cb179151d92bd5ad637ee70",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"kolicon-settings",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},index.h("div",{key:"c74cdedbe619d4a1645fd1ce81710f0a74252261",class:"kol-table-settings__content"},index.h(componentNames.KolHeadingTag,{key:"815873c0a097ec6c2687600da1220edc2d1a73e7",_label:this.translateTableSettings,_level:0}),this.errorMessage&&index.h(componentNames.KolAlertWcTag,{key:"d2fdd21fbaa2cfc12c92aa14e47e5c7786098224",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),index.h("form",{key:"6b09b4361de06b27ca7e6caba3a6f33d1f984ec6",onSubmit:this.handleSubmit.bind(this)},index.h("div",{key:"90221e20a5b9af7885fb1f562a03e78966cc8927",class:"kol-table-settings__columns-container"},index.h("div",{key:"08005a0dd7c15640e93871ad2e013b05eefde867",class:"kol-table-settings__columns"},e.map((t,a)=>index.h("div",{key:t.key,class:"kol-table-settings__column"},index.h(componentNames.KolInputCheckboxTag,{_checked:!1!==t.visible,_label:`${t.label}${!1===t.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===t.hidable,_on:{onInput:(e,a)=>{var l;return this.handleVisibilityChange(null!==(l=t.key)&&void 0!==l?l:"",a)}}}),index.h("span",{class:"kol-table-settings__column-label"},t.label),index.h(componentNames.KolInputNumberTag,{_hideLabel:!0,_value:parseColumnWidth(t.width),_label:i18n.translate("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_disabled:!1===t.resizable,_on:{onInput:(e,a)=>{var l;return this.handleWidthChange(null!==(l=t.key)&&void 0!==l?l:"",a)}}}),index.h(componentNames.KolButtonWcTag,{_icons:"kolicon-chevron-up",_label:i18n.translate("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>{var e;return this.moveColumn(null!==(e=t.key)&&void 0!==e?e:"","up")}},_disabled:!1===t.sortable||0===a,"data-testid":"table-settings-move-up"}),index.h(componentNames.KolButtonWcTag,{_icons:"kolicon-chevron-down",_label:i18n.translate("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>{var e;return this.moveColumn(null!==(e=t.key)&&void 0!==e?e:"","down")}},_disabled:!1===t.sortable||a===e.length-1,"data-testid":"table-settings-move-down"}))))),index.h("div",{key:"97508d969aded22fdb44a598f831dadf50a12d12",class:"kol-table-settings__actions"},index.h(componentNames.KolButtonWcTag,{key:"86b461aa0c52eb41fea1c52cca06a69b57f403ce",_label:this.translateTableSettingsCancel,_variant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),index.h(componentNames.KolButtonWcTag,{key:"117088cffd7c22f19528f12b14df6ef239e08339",_label:this.translateTableSettingsApply,_variant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return index.getElement(this)}static get watchers(){return{_horizontalHeaderCells:["handleHeaderCellsChange"]}}};exports.kol_table_settings_wc=KolTableSettings;
+"use strict";var index=require("./index-Do5QHQux.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),componentNames=require("./component-names-BcQqUL7D.js"),i18n=require("./i18n-BWA16k5X.js"),events=require("./events-Cd8febUV.js");require("./common-BDQKBMeS.js"),require("./i18n-yHKQt1gl.js");const parseColumnWidth=e=>Number.isFinite(e)&&void 0!==e&&e>0?e:void 0,KolTableSettings=class{constructor(e){index.registerInstance(this,e),this.headerCells=[],this.editingHeaderCells=[],this.errorMessage=null,this.translateTableSettings=i18n.translate("kol-table-settings"),this.translateTableSettingsCancel=i18n.translate("kol-table-settings-cancel"),this.translateTableSettingsApply=i18n.translate("kol-table-settings-apply"),this.translateErrorAllInvisible=i18n.translate("kol-table-settings-error-all-invisible"),this.translateColumnNotHidable=i18n.translate("kol-table-settings-column-not-hidable"),this._horizontalHeaderCells=[]}handleHeaderCellsChange(e){this.headerCells=e.map(e=>[...e]),this.editingHeaderCells=e.map(e=>e.map(e=>Object.assign({},e)))}componentWillLoad(){this.handleHeaderCellsChange(this._horizontalHeaderCells)}getPrimaryRow(){var e;return null!==(e=this.editingHeaderCells[this.editingHeaderCells.length-1])&&void 0!==e?e:[]}updatePrimaryRow(e){this.editingHeaderCells=this.editingHeaderCells.map((t,a,l)=>a===l.length-1?e:t)}moveColumn(e,t){const a=[...this.getPrimaryRow()],l=a.findIndex(t=>t.key===e);if(-1===l)return;let s;if("up"===t){if(0===l)return;s=l-1}else{if(l===a.length-1)return;s=l+1}const[i]=a.splice(l,1);a.splice(s,0,i),this.updatePrimaryRow(a)}handleVisibilityChange(e,t){const a=this.getPrimaryRow().map(a=>a.key===e&&!1!==a.hidable?Object.assign(Object.assign({},a),{visible:Boolean(t)}):a);this.updatePrimaryRow(a)}handleWidthChange(e,t){const a=this.getPrimaryRow().map(a=>a.key===e&&!1!==a.resizable?Object.assign(Object.assign({},a),{width:Number(t)}):a);this.updatePrimaryRow(a)}handleCancel(){var e;this.editingHeaderCells=this.headerCells.map(e=>[...e]),this.errorMessage=null,null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();if(this.getPrimaryRow().some(e=>!1!==e.visible)){if(this.host){this.errorMessage=null,this.headerCells=this.editingHeaderCells.map(e=>e.map(e=>Object.assign({},e)));const e=this.editingHeaderCells.map(e=>e.map(e=>{const t=e,{hidable:a,resizable:l,sortable:s,visible:i,width:n}=t,o=tslib_es6.__rest(t,["hidable","resizable","sortable","visible","width"]),r=Object.assign({},o);return void 0!==i&&(r.visible=i),void 0!==a&&(r.hidable=a),void 0!==s&&(r.sortable=s),void 0!==l&&(r.resizable=l),null!=n&&(r.width=n),r}));events.dispatchDomEvent(this.host,events.KolEvent.changeHeaderCells,e),null===(t=this.popoverRef)||void 0===t||t.hidePopover()}}else this.errorMessage=this.translateErrorAllInvisible}render(){const e=this.getPrimaryRow();return index.h(componentNames.KolPopoverButtonWcTag,{key:"6b14b66960b20d563cb179151d92bd5ad637ee70",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"kolicon-settings",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},index.h("div",{key:"c74cdedbe619d4a1645fd1ce81710f0a74252261",class:"kol-table-settings__content"},index.h(componentNames.KolHeadingTag,{key:"815873c0a097ec6c2687600da1220edc2d1a73e7",_label:this.translateTableSettings,_level:0}),this.errorMessage&&index.h(componentNames.KolAlertWcTag,{key:"d2fdd21fbaa2cfc12c92aa14e47e5c7786098224",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),index.h("form",{key:"6b09b4361de06b27ca7e6caba3a6f33d1f984ec6",onSubmit:this.handleSubmit.bind(this)},index.h("div",{key:"90221e20a5b9af7885fb1f562a03e78966cc8927",class:"kol-table-settings__columns-container"},index.h("div",{key:"08005a0dd7c15640e93871ad2e013b05eefde867",class:"kol-table-settings__columns"},e.map((t,a)=>index.h("div",{key:t.key,class:"kol-table-settings__column"},index.h(componentNames.KolInputCheckboxTag,{_checked:!1!==t.visible,_label:`${t.label}${!1===t.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===t.hidable,_on:{onInput:(e,a)=>{var l;return this.handleVisibilityChange(null!==(l=t.key)&&void 0!==l?l:"",a)}}}),index.h("span",{class:"kol-table-settings__column-label"},t.label),index.h(componentNames.KolInputNumberTag,{_hideLabel:!0,_value:parseColumnWidth(t.width),_label:i18n.translate("kol-table-settings-column-width",{placeholders:{column:t.label}}),_min:1,_disabled:!1===t.resizable,_on:{onInput:(e,a)=>{var l;return this.handleWidthChange(null!==(l=t.key)&&void 0!==l?l:"",a)}}}),index.h(componentNames.KolButtonWcTag,{_icons:"kolicon-chevron-up",_label:i18n.translate("kol-table-settings-move-up",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>{var e;return this.moveColumn(null!==(e=t.key)&&void 0!==e?e:"","up")}},_disabled:!1===t.sortable||0===a,"data-testid":"table-settings-move-up"}),index.h(componentNames.KolButtonWcTag,{_icons:"kolicon-chevron-down",_label:i18n.translate("kol-table-settings-move-down",{placeholders:{column:t.label}}),_hideLabel:!0,_variant:"ghost",_on:{onClick:()=>{var e;return this.moveColumn(null!==(e=t.key)&&void 0!==e?e:"","down")}},_disabled:!1===t.sortable||a===e.length-1,"data-testid":"table-settings-move-down"}))))),index.h("div",{key:"97508d969aded22fdb44a598f831dadf50a12d12",class:"kol-table-settings__actions"},index.h(componentNames.KolButtonWcTag,{key:"86b461aa0c52eb41fea1c52cca06a69b57f403ce",_label:this.translateTableSettingsCancel,_variant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),index.h(componentNames.KolButtonWcTag,{key:"117088cffd7c22f19528f12b14df6ef239e08339",_label:this.translateTableSettingsApply,_variant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return index.getElement(this)}static get watchers(){return{_horizontalHeaderCells:["handleHeaderCellsChange"]}}};exports.kol_table_settings_wc=KolTableSettings;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-0zHTL6Wf.js"),componentNames=require("./component-names-BcQqUL7D.js"),i18n=require("./i18n-BWA16k5X.js"),common=require("./common-BDQKBMeS.js"),tableSelection=require("./table-selection-AQ4G1V6h.js"),label=require("./label-CU8lZiLE.js"),keyboard=require("./keyboard-BfFtSnNy.js"),events=require("./events-Cd8febUV.js");require("./i18n-yHKQt1gl.js");const validateAllowMultiSort=(t,n,e={})=>{common.watchBoolean(t,"_allowMultiSort",n,Object.assign({defaultValue:!1},e))},paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,n)=>{common.watchValidator(t,"_paginationPosition",t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),n,{defaultValue:"bottom"})},defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    --kol-table-selection-col-width: var(--a11y-min-size);\n    display: block;\n    position: relative;\n    max-width: 100%;\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__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\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    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    background-color: white;\n    position: sticky !important;\n    left: 0;\n    z-index: 2;\n    width: var(--kol-table-selection-col-width, auto);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions {\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n    background-color: white;\n    position: sticky !important;\n    z-index: 1;\n  }\n  .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n    border-right: 2px solid black;\n  }\n  .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n    border-left: 2px solid black;\n  }\n  .kol-table__cell-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection {\n    position: relative;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\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    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\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  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-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:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}',PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful=class{constructor(t){index.registerInstance(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this._paginationPosition="bottom",this.state={_allowMultiSort:!1,_fixedCols:[0,0],_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom",_hasSettingsMenu:!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),common.setState(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),common.setState(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),common.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),common.setState(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void common.setState(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],o=i.compareFn(t,n,i.direction);if(0!==o)return"ASC"===i.direction?o:-o}return 0}),common.setState(this,"_sortedData",t)}}validateAllowMultiSort(t){validateAllowMultiSort(this,t,{defaultValue:!1})}validateData(t){tableSelection.validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){tableSelection.validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateFixedCols(t){tableSelection.validateFixedCols(this,t)}validatePaginationPosition(t){validatePaginationPosition(this,t)}validateHasSettingsMenu(t){tableSelection.validateHasSettingsMenu(this,t)}changeCellSort(t){var n;if(void 0===t.type||"default"===t.type){if("function"!=typeof t.compareFn)return;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){common.emptyStringByArrayHandler(t,()=>{common.objectObjectHandler(t,()=>{try{t=common.parseJson(t)}catch(t){}common.watchValidator(this,"_headers",t=>"object"==typeof t&&null!==t,new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,o;const a=t=>{let n=!1;this.sortData=[],t.forEach(t=>{if(void 0!==t.type&&"default"!==t.type)return;if("function"==typeof t.compareFn&&!t.key)return void common.devHint("[KolTableStateful] A sortable column requires the 'key' property.");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(a),null===(e=l.vertical)||void 0===e||e.forEach(a),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(o=l.vertical)||void 0===o?void 0:o.length)>0&&(this.disableSort=!0,common.devHint("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){label.validateLabel(this,t,{required:!0})}validateSelection(t){tableSelection.validateTableSelection(this,t)}validateOn(t){tableSelection.validateTableStatefulCallbacks(this,t)}validatePagination(t){try{t=common.parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),common.watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(events.KolEvent.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(events.KolEvent.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateFixedCols(this._fixedCols),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateHasSettingsMenu(this._hasSettingsMenu)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const n=i18n.translate("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${i18n.translate(`kol-pagination-position-${t}`)})`}});return index.h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},index.h("div",{class:"kol-table-stateful__pagination-wrapper"},index.h(componentNames.KolPaginationWcTag,{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_hasButtons:this.state._pagination._hasButtons,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:n})))}getHeaderCellSortState(t){if((void 0===t.type||"default"===t.type)&&!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"}}getHeaderCellSortOrder(t){if((void 0===t.type||"default"===t.type)&&!this.disableSort&&this.state._allowMultiSort&&"function"==typeof t.compareFn&&t.key){const n=this.sortData.findIndex(n=>n.key===t.key);if(n>=0)return n+1}}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",o=new Set(t.map(String)),a=this.state._sortedData.filter(t=>o.has(String(t[i])));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:n})}));const o=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[keyboard.Callback.onSelectionChange])&&this.state._on[keyboard.Callback.onSelectionChange](t,o),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.selectionChange,o)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var t,n,e,i,o,a;const l=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(n=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==n?n:10:this.state._sortedData.length,this.state._pagination._page||1),s="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,r="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,c={horizontal:null!==(i=null===(e=this.state._headers.horizontal)||void 0===e?void 0:e.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t),sortOrder:this.getHeaderCellSortOrder(t)}))))&&void 0!==i?i:[],vertical:null!==(a=null===(o=this.state._headers.vertical)||void 0===o?void 0:o.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t),sortOrder:this.getHeaderCellSortOrder(t)}))))&&void 0!==a?a:[]};return index.h(index.Host,{key:"95f418596db6eecceeba755b1a264b36bf2d31ac",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&s,index.h(componentNames.KolTableStatelessWcTag,{key:"4a3d37bc195e5d6414f4208087045f2e4ed17630",ref:this.catchRef,_data:l,_fixedCols:this._fixedCols,_headerCells:c,_label:this.state._label,_dataFoot:this.state._dataFoot,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_hasSettingsMenu:this.state._hasSettingsMenu}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return index.getElement(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_fixedCols:["validateFixedCols"],_paginationPosition:["validatePaginationPosition"],_hasSettingsMenu:["validateHasSettingsMenu"],_headers:["validateHeaders"],_label:["validateLabel"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};KolTableStateful.style={default:defaultStyleCss},exports.kol_table_stateful=KolTableStateful;
+"use strict";var index=require("./index-Do5QHQux.js"),componentNames=require("./component-names-BcQqUL7D.js"),i18n=require("./i18n-BWA16k5X.js"),common=require("./common-BDQKBMeS.js"),tableSelection=require("./table-selection-AQ4G1V6h.js"),label=require("./label-CU8lZiLE.js"),keyboard=require("./keyboard-BfFtSnNy.js"),events=require("./events-Cd8febUV.js");require("./i18n-yHKQt1gl.js");const validateAllowMultiSort=(t,n,e={})=>{common.watchBoolean(t,"_allowMultiSort",n,Object.assign({defaultValue:!1},e))},paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,n)=>{common.watchValidator(t,"_paginationPosition",t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),n,{defaultValue:"bottom"})},defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    --kol-table-selection-col-width: var(--a11y-min-size);\n    display: block;\n    position: relative;\n    max-width: 100%;\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__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\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    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    background-color: white;\n    position: sticky !important;\n    left: 0;\n    z-index: 2;\n    width: var(--kol-table-selection-col-width, auto);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions {\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n    background-color: white;\n    position: sticky !important;\n    z-index: 1;\n  }\n  .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n    border-right: 2px solid black;\n  }\n  .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n    border-left: 2px solid black;\n  }\n  .kol-table__cell-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection {\n    position: relative;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\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    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\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  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-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:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}',PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful=class{constructor(t){index.registerInstance(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this._paginationPosition="bottom",this.state={_allowMultiSort:!1,_fixedCols:[0,0],_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom",_hasSettingsMenu:!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),common.setState(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),common.setState(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),common.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),common.setState(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void common.setState(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],o=i.compareFn(t,n,i.direction);if(0!==o)return"ASC"===i.direction?o:-o}return 0}),common.setState(this,"_sortedData",t)}}validateAllowMultiSort(t){validateAllowMultiSort(this,t,{defaultValue:!1})}validateData(t){tableSelection.validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){tableSelection.validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateFixedCols(t){tableSelection.validateFixedCols(this,t)}validatePaginationPosition(t){validatePaginationPosition(this,t)}validateHasSettingsMenu(t){tableSelection.validateHasSettingsMenu(this,t)}changeCellSort(t){var n;if(void 0===t.type||"default"===t.type){if("function"!=typeof t.compareFn)return;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){common.emptyStringByArrayHandler(t,()=>{common.objectObjectHandler(t,()=>{try{t=common.parseJson(t)}catch(t){}common.watchValidator(this,"_headers",t=>"object"==typeof t&&null!==t,new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,o;const a=t=>{let n=!1;this.sortData=[],t.forEach(t=>{if(void 0!==t.type&&"default"!==t.type)return;if("function"==typeof t.compareFn&&!t.key)return void common.devHint("[KolTableStateful] A sortable column requires the 'key' property.");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(a),null===(e=l.vertical)||void 0===e||e.forEach(a),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(o=l.vertical)||void 0===o?void 0:o.length)>0&&(this.disableSort=!0,common.devHint("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){label.validateLabel(this,t,{required:!0})}validateSelection(t){tableSelection.validateTableSelection(this,t)}validateOn(t){tableSelection.validateTableStatefulCallbacks(this,t)}validatePagination(t){try{t=common.parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),common.watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(events.KolEvent.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(events.KolEvent.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateFixedCols(this._fixedCols),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateHasSettingsMenu(this._hasSettingsMenu)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const n=i18n.translate("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${i18n.translate(`kol-pagination-position-${t}`)})`}});return index.h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},index.h("div",{class:"kol-table-stateful__pagination-wrapper"},index.h(componentNames.KolPaginationWcTag,{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_hasButtons:this.state._pagination._hasButtons,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:n})))}getHeaderCellSortState(t){if((void 0===t.type||"default"===t.type)&&!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"}}getHeaderCellSortOrder(t){if((void 0===t.type||"default"===t.type)&&!this.disableSort&&this.state._allowMultiSort&&"function"==typeof t.compareFn&&t.key){const n=this.sortData.findIndex(n=>n.key===t.key);if(n>=0)return n+1}}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",o=new Set(t.map(String)),a=this.state._sortedData.filter(t=>o.has(String(t[i])));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:n})}));const o=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[keyboard.Callback.onSelectionChange])&&this.state._on[keyboard.Callback.onSelectionChange](t,o),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.selectionChange,o)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var t,n,e,i,o,a;const l=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(n=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==n?n:10:this.state._sortedData.length,this.state._pagination._page||1),s="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,r="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,c={horizontal:null!==(i=null===(e=this.state._headers.horizontal)||void 0===e?void 0:e.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t),sortOrder:this.getHeaderCellSortOrder(t)}))))&&void 0!==i?i:[],vertical:null!==(a=null===(o=this.state._headers.vertical)||void 0===o?void 0:o.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t),sortOrder:this.getHeaderCellSortOrder(t)}))))&&void 0!==a?a:[]};return index.h(index.Host,{key:"95f418596db6eecceeba755b1a264b36bf2d31ac",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&s,index.h(componentNames.KolTableStatelessWcTag,{key:"4a3d37bc195e5d6414f4208087045f2e4ed17630",ref:this.catchRef,_data:l,_fixedCols:this._fixedCols,_headerCells:c,_label:this.state._label,_dataFoot:this.state._dataFoot,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_hasSettingsMenu:this.state._hasSettingsMenu}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return index.getElement(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_fixedCols:["validateFixedCols"],_paginationPosition:["validatePaginationPosition"],_hasSettingsMenu:["validateHasSettingsMenu"],_headers:["validateHeaders"],_label:["validateLabel"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};KolTableStateful.style={default:defaultStyleCss},exports.kol_table_stateful=KolTableStateful;