@public-ui/components 3.0.3-rc.0 → 3.0.3

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import"./common.js";import{v as validateLabel}from"./label.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{f as KolLinkWcTag}from"./component-names.js";const defaultStyleCss="/* 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(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav__list {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}",KolSkipNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.state={_label:"",_links:[]}}render(){return h("nav",{key:"912f8ac6ce63cddd0fa738db9ef6ff987b2a2db9",class:"kol-skip-nav","aria-label":this.state._label},h("ul",{key:"79991f7d918e9bbf6891d479804f2520356f2a41",class:"kol-skip-nav__list"},this.state._links.map(((n,e)=>h("li",{class:"kol-skip-nav__list-item",key:e},h(KolLinkWcTag,Object.assign({},n)))))))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-skip-nav",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-skip-nav"].forEach((n=>{if("kol-skip-nav"===n)customElements.get(n)||customElements.define(n,KolSkipNav$1)}))}const KolSkipNav=KolSkipNav$1,defineCustomElement=defineCustomElement$1;export{KolSkipNav,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import"./common.js";import{v as validateLabel}from"./label.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{f as KolLinkWcTag}from"./component-names.js";const defaultStyleCss="/* 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(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * 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    /*\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * 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    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav__list {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}",KolSkipNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.state={_label:"",_links:[]}}render(){return h("nav",{key:"912f8ac6ce63cddd0fa738db9ef6ff987b2a2db9",class:"kol-skip-nav","aria-label":this.state._label},h("ul",{key:"79991f7d918e9bbf6891d479804f2520356f2a41",class:"kol-skip-nav__list"},this.state._links.map(((n,e)=>h("li",{class:"kol-skip-nav__list-item",key:e},h(KolLinkWcTag,Object.assign({},n)))))))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-skip-nav",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-skip-nav"].forEach((n=>{if("kol-skip-nav"===n)customElements.get(n)||customElements.define(n,KolSkipNav$1)}))}const KolSkipNav=KolSkipNav$1,defineCustomElement=defineCustomElement$1;export{KolSkipNav,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-skip-nav.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,iqJAAiqJ;;MCgB5qJA,YAAU,GAAAC,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AAPvB,IAAA,WAAA,GAAA;;;;QAkCiB,IAAA,CAAA,KAAK,GAAkB;AACtC,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,MAAM,EAAE,EAAE;SACV;AA0BD;IAvDO,MAAM,GAAA;QACZ,QACC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,gBAAa,IAAI,CAAC,KAAK,CAAC,MAAM,EAAA,EACtD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,oBAAoB,EAC5B,EAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,KAAa,KAAI;AACzD,YAAA,QACC,UAAI,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAE,KAAK,EAAA,EAC7C,CAAA,CAAC,YAAY,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAiB,CAAA,CACnC;AAEP,SAAC,CAAC,CACE,CACA;;AAoBD,IAAA,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK,EAAA;QACrF,IAAI,CAAC,OAAO,EAAE;AACb,YAAA,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;AAElC,QAAA,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;AAC1B,YAAA,QAAQ,EAAE,IAAI;AACd,SAAA,CAAC;AACF,QAAA,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;AAIxB,IAAA,aAAa,CAAC,KAAgC,EAAA;AACpD,QAAA,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC;;IAGlC,iBAAiB,GAAA;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC;AAChD,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;;IAGzB,oBAAoB,GAAA;AAC1B,QAAA,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSkipNav","__stencil_proxyCustomElement"],"sources":["src/components/skip-nav/style.scss?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-skip-nav {\n\t\t&__list {\n\t\t\tdisplay: grid;\n\t\t\tlist-style: none;\n\t\t\tplace-items: center;\n\t\t}\n\n\t\t&__list-item {\n\t\t\theight: 0;\n\t\t}\n\n\t\t.kol-link {\n\t\t\tleft: to-rem(-99999);\n\t\t\toverflow: hidden;\n\t\t\tposition: absolute;\n\t\t\tz-index: 9999999;\n\t\t\tline-height: 1;\n\n\t\t\t&:focus {\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tleft: unset;\n\t\t\t\tposition: unset;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements SkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-skip-nav\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-skip-nav__list\">\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class=\"kol-skip-nav__list-item\" key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag {...link}></KolLinkWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}
+{"file":"kol-skip-nav.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,+1JAA+1J;;MCgB12JA,YAAU,GAAAC,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AAPvB,IAAA,WAAA,GAAA;;;;QAkCiB,IAAA,CAAA,KAAK,GAAkB;AACtC,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,MAAM,EAAE,EAAE;SACV;AA0BD;IAvDO,MAAM,GAAA;QACZ,QACC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,gBAAa,IAAI,CAAC,KAAK,CAAC,MAAM,EAAA,EACtD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,oBAAoB,EAC5B,EAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,KAAa,KAAI;AACzD,YAAA,QACC,UAAI,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAE,KAAK,EAAA,EAC7C,CAAA,CAAC,YAAY,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAiB,CAAA,CACnC;AAEP,SAAC,CAAC,CACE,CACA;;AAoBD,IAAA,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK,EAAA;QACrF,IAAI,CAAC,OAAO,EAAE;AACb,YAAA,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;AAElC,QAAA,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;AAC1B,YAAA,QAAQ,EAAE,IAAI;AACd,SAAA,CAAC;AACF,QAAA,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;AAIxB,IAAA,aAAa,CAAC,KAAgC,EAAA;AACpD,QAAA,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC;;IAGlC,iBAAiB,GAAA;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC;AAChD,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;;IAGzB,oBAAoB,GAAA;AAC1B,QAAA,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSkipNav","__stencil_proxyCustomElement"],"sources":["src/components/skip-nav/style.scss?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-skip-nav {\n\t\t&__list {\n\t\t\tdisplay: grid;\n\t\t\tlist-style: none;\n\t\t\tplace-items: center;\n\t\t}\n\n\t\t&__list-item {\n\t\t\theight: 0;\n\t\t}\n\n\t\t.kol-link {\n\t\t\tleft: to-rem(-99999);\n\t\t\toverflow: hidden;\n\t\t\tposition: absolute;\n\t\t\tz-index: 9999999;\n\t\t\tline-height: 1;\n\n\t\t\t&:focus {\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tleft: unset;\n\t\t\t\tposition: unset;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements SkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-skip-nav\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-skip-nav__list\">\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class=\"kol-skip-nav__list-item\" key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag {...link}></KolLinkWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}

package/dist/components/kol-spin.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{w as watchValidator}from"./common.js";import{v as validateLabel}from"./label.js";import{v as validateShow}from"./show.js";import{t as translate}from"./i18n.js";import{c as clsx}from"./clsx.js";const spinVariantPropTypeOptions=["cycle","dot","none"],validateSpinVariant=(n,e)=>{watchValidator(n,"_variant",(n=>"string"==typeof n&&spinVariantPropTypeOptions.includes(n)),new Set(spinVariantPropTypeOptions),e)},defaultStyleCss="/* forward the rem function */\n/*\n * This file 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(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--cycle {\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .kol-spin__loader::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    border: 5px solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__loader {\n      animation-duration: 4s;\n    }\n    .kol-spin__loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--dot {\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n    height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--1 {\n    background-color: #000;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--2 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--3 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--neutral {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n  }\n  @keyframes spin1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes spin2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__spinner-element {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}";function renderSpin(n){switch(n){case"cycle":return h("span",{class:"kol-spin__loader"});case"none":return h("slot",{name:"expert"});default:return h(Fragment,null,h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const KolSpin$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.showToggled=!1,this.translateActionRunning=translate("kol-action-running"),this.translateActionDone=translate("kol-action-done"),this._show=!1,this._variant="dot",this.state={_variant:"dot",_label:void 0}}render(){var n,e;return h(Host,{key:"c93b62db81e8d08c9758963db96b9c493913ea57",class:"kol-spin","aria-live":"polite"},this.state._label&&(this.state._show||this.showToggled)&&h("span",{key:"b4015521e2461e12607aab303be8e86482d826e6",class:"visually-hidden"},this.state._label),this.state._show?h("span",{"aria-busy":"true","aria-label":null!==(n=this.state._label)&&void 0!==n?n:this.translateActionRunning,class:clsx("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`),role:"alert"},renderSpin(this.state._variant)):this.showToggled&&h("span",{"aria-label":null!==(e=this.state._label)&&void 0!==e?e:this.translateActionDone,"aria-busy":"false",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,validateShow(this,n)}validateLabel(n){validateLabel(this,n)}validateVariant(n){validateSpinVariant(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant),this.validateLabel(this._label)}static get watchers(){return{_show:["validateShow"],_label:["validateLabel"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-spin",{_show:[1540],_label:[1],_variant:[1],state:[32]},void 0,{_show:["validateShow"],_label:["validateLabel"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-spin"].forEach((n=>{if("kol-spin"===n)customElements.get(n)||customElements.define(n,KolSpin$1)}))}const KolSpin=KolSpin$1,defineCustomElement=defineCustomElement$1;export{KolSpin,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{w as watchValidator}from"./common.js";import{v as validateLabel}from"./label.js";import{v as validateShow}from"./show.js";import{t as translate}from"./i18n.js";import{c as clsx}from"./clsx.js";const spinVariantPropTypeOptions=["cycle","dot","none"],validateSpinVariant=(n,e)=>{watchValidator(n,"_variant",(n=>"string"==typeof n&&spinVariantPropTypeOptions.includes(n)),new Set(spinVariantPropTypeOptions),e)},defaultStyleCss="/* forward the rem function */\n/*\n * This file 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(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * 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    /*\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * 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    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--cycle {\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .kol-spin__loader::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    border: 5px solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__loader {\n      animation-duration: 4s;\n    }\n    .kol-spin__loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--dot {\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n    height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--1 {\n    background-color: #000;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--2 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--3 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--neutral {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n  }\n  @keyframes spin1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes spin2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__spinner-element {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}";function renderSpin(n){switch(n){case"cycle":return h("span",{class:"kol-spin__loader"});case"none":return h("slot",{name:"expert"});default:return h(Fragment,null,h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),h("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const KolSpin$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.showToggled=!1,this.translateActionRunning=translate("kol-action-running"),this.translateActionDone=translate("kol-action-done"),this._show=!1,this._variant="dot",this.state={_variant:"dot",_label:void 0}}render(){var n,e;return h(Host,{key:"c93b62db81e8d08c9758963db96b9c493913ea57",class:"kol-spin","aria-live":"polite"},this.state._label&&(this.state._show||this.showToggled)&&h("span",{key:"b4015521e2461e12607aab303be8e86482d826e6",class:"visually-hidden"},this.state._label),this.state._show?h("span",{"aria-busy":"true","aria-label":null!==(n=this.state._label)&&void 0!==n?n:this.translateActionRunning,class:clsx("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`),role:"alert"},renderSpin(this.state._variant)):this.showToggled&&h("span",{"aria-label":null!==(e=this.state._label)&&void 0!==e?e:this.translateActionDone,"aria-busy":"false",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,validateShow(this,n)}validateLabel(n){validateLabel(this,n)}validateVariant(n){validateSpinVariant(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant),this.validateLabel(this._label)}static get watchers(){return{_show:["validateShow"],_label:["validateLabel"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-spin",{_show:[1540],_label:[1],_variant:[1],state:[32]},void 0,{_show:["validateShow"],_label:["validateLabel"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-spin"].forEach((n=>{if("kol-spin"===n)customElements.get(n)||customElements.define(n,KolSpin$1)}))}const KolSpin=KolSpin$1,defineCustomElement=defineCustomElement$1;export{KolSpin,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-spin.js","mappings":"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","names":["KolSpin","__stencil_proxyCustomElement"],"sources":["src/schema/props/variant/spin.ts","src/components/spin/style.scss?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\n/**\n * Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n */\nconst spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const;\nexport type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number];\n\n/**\n * Defines the variant of spin navigation.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value),\n\t\tnew Set(spinVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use './cycle' as *;\n@use './dot' as *;\n\n@layer kol-component {\n\t.kol-spin {\n\t\t&__spinner {\n\t\t\tdisplay: block;\n\t\t\tpadding: to-rem(2);\n\t\t\tposition: relative;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { validateLabel, validateShow, validateSpinVariant } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { LabelPropType, ShowPropType, SpinAPI, SpinStates, SpinVariantPropType } from '../../schema';\nimport clsx from 'clsx';\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"kol-spin__loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--1\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--2\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--3\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--neutral\"></span>\n\t\t\t\t</>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements SpinAPI {\n\tprivate showToggled = false;\n\tprivate readonly translateActionRunning = translate('kol-action-running');\n\tprivate readonly translateActionDone = translate('kol-action-done');\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-spin\" aria-live=\"polite\">\n\t\t\t\t{this.state._label && (this.state._show || this.showToggled) && <span class=\"visually-hidden\">{this.state._label}</span>}\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={this.state._label ?? this.translateActionRunning}\n\t\t\t\t\t\tclass={clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`)}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={this.state._label ?? this.translateActionDone} aria-busy=\"false\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: SpinStates = {\n\t\t_variant: 'dot',\n\t\t_label: undefined,\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}
+{"file":"kol-spin.js","mappings":";;;;;;;;;;AASA,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAU;AAW7D,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAA2B,KAAU;AAC9G,IAAA,cAAc,CACb,SAAS,EACT,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL;AACF,CAAC;;AC5BD,MAAM,eAAe,GAAG,mgQAAmgQ;;ACQ3hQ,SAAS,UAAU,CAAC,OAA4B,EAAA;IAC/C,QAAQ,OAAO;AACd,QAAA,KAAK,OAAO;YACX,OAAO,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,GAAQ;AAC9C,QAAA,KAAK,MAAM;YACV,OAAO,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,GAAQ;AACnC,QAAA;YACC,QACC,CAAA,CAAA,QAAA,EAAA,IAAA,EACC,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,wDAAwD,EAAQ,CAAA,EAC5E,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,wDAAwD,EAAQ,CAAA,EAC5E,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,wDAAwD,EAAQ,CAAA,EAC5E,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,8DAA8D,EAAQ,CAAA,CAChF;;AAGP;MASaA,SAAO,GAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AAPpB,IAAA,WAAA,GAAA;;;;AAQS,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AACV,QAAA,IAAA,CAAA,sBAAsB,GAAG,SAAS,CAAC,oBAAoB,CAAC;AACxD,QAAA,IAAA,CAAA,mBAAmB,GAAG,SAAS,CAAC,iBAAiB,CAAC;AA0BpB,QAAA,IAAK,CAAA,KAAA,GAAa,KAAK;AAUvD,QAAA,IAAQ,CAAA,QAAA,GAAyB,KAAK;QAErC,IAAA,CAAA,KAAK,GAAe;AACnC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,MAAM,EAAE,SAAS;SACjB;AAuBD;IA9DO,MAAM,GAAA;;QACZ,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,UAAU,eAAW,QAAQ,EAAA,EACvC,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ,EACvH,IAAI,CAAC,KAAK,CAAC,KAAK,IAChB,CACW,CAAA,MAAA,EAAA,EAAA,WAAA,EAAA,MAAM,gBACJ,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,CAAC,MAAM,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,sBAAsB,EAC5D,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAA,mBAAA,EAAsB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,CAAE,CAAC,EAC7E,IAAI,EAAC,OAAO,EAEX,EAAA,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC1B,KAEP,IAAI,CAAC,WAAW,IAAI,CAAkB,CAAA,MAAA,EAAA,EAAA,YAAA,EAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,CAAC,MAAM,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,mBAAmB,EAAA,WAAA,EAAY,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC3H,CACK;;AA0BF,IAAA,YAAY,CAAC,KAAoB,EAAA;AACvC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK;AACpE,QAAA,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC;;AAInB,IAAA,aAAa,CAAC,KAAqB,EAAA;AACzC,QAAA,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC;;AAIpB,IAAA,eAAe,CAAC,KAA2B,EAAA;AACjD,QAAA,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC;;IAG1B,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;AACnC,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSpin","__stencil_proxyCustomElement"],"sources":["src/schema/props/variant/spin.ts","src/components/spin/style.scss?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\n/**\n * Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n */\nconst spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const;\nexport type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number];\n\n/**\n * Defines the variant of spin navigation.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value),\n\t\tnew Set(spinVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use './cycle' as *;\n@use './dot' as *;\n\n@layer kol-component {\n\t.kol-spin {\n\t\t&__spinner {\n\t\t\tdisplay: block;\n\t\t\tpadding: to-rem(2);\n\t\t\tposition: relative;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { validateLabel, validateShow, validateSpinVariant } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { LabelPropType, ShowPropType, SpinAPI, SpinStates, SpinVariantPropType } from '../../schema';\nimport clsx from 'clsx';\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"kol-spin__loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--1\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--2\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--3\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--neutral\"></span>\n\t\t\t\t</>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements SpinAPI {\n\tprivate showToggled = false;\n\tprivate readonly translateActionRunning = translate('kol-action-running');\n\tprivate readonly translateActionDone = translate('kol-action-done');\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-spin\" aria-live=\"polite\">\n\t\t\t\t{this.state._label && (this.state._show || this.showToggled) && <span class=\"visually-hidden\">{this.state._label}</span>}\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={this.state._label ?? this.translateActionRunning}\n\t\t\t\t\t\tclass={clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`)}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={this.state._label ?? this.translateActionDone} aria-busy=\"false\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: SpinStates = {\n\t\t_variant: 'dot',\n\t\t_label: undefined,\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{t as translate}from"./i18n.js";import{d as KolButtonWcTag,m as KolPopoverWcTag}from"./component-names.js";import{c as clsx}from"./clsx.js";const defaultStyleCss="/* 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(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-popover {\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    contain: layout;\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",KolSplitButton$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),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 kolFocus(){var n;await(null===(n=this.primaryButtonWcRef)||void 0===n?void 0:n.kolFocus())}render(){const n="kol-split-button-dropdown-label";return h("div",{key:"5a243be782c854c759a1e649624435137918b698",class:"kol-split-button"},h("div",{key:"98eae8fe12b95afa454c6b788020f7a56d592425",class:"kol-split-button__root"},h(KolButtonWcTag,{key:"34adb06e52b29b536e7f723b786dcb7aa735150d",class:clsx("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),ref:this.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,_id:this._id,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_buttonVariant:this._variant}),h("div",{key:"2f5d4c5be26a742220521c287a3c11f77cf7c31e",class:"kol-split-button__horizontal-line"}),h(KolButtonWcTag,{key:"be42e359513bef4f0621346adecc1093282a89b0",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?translate(`${n}-close`):translate(`${n}-open`),_on:this.clickToggleHandler})),h(KolPopoverWcTag,{key:"39a539a6fd3321881642bae6c023cc59f8c4a81e",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},h("slot",{key:"e391b468016ffcf0f18a4780ad844fa7dc6d7125"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}static get style(){return{default:defaultStyleCss}}},[49,"kol-split-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],state:[32],getValue:[64],kolFocus:[64],closePopup:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-split-button"].forEach((n=>{if("kol-split-button"===n)customElements.get(n)||customElements.define(n,KolSplitButton$1)}))}const KolSplitButton=KolSplitButton$1,defineCustomElement=defineCustomElement$1;export{KolSplitButton,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{t as translate}from"./i18n.js";import{d as KolButtonWcTag,m as KolPopoverWcTag}from"./component-names.js";import{c as clsx}from"./clsx.js";const defaultStyleCss="/* 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(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * 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    /*\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * 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    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-popover {\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    contain: layout;\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",KolSplitButton$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),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 kolFocus(){var n;await(null===(n=this.primaryButtonWcRef)||void 0===n?void 0:n.kolFocus())}render(){const n="kol-split-button-dropdown-label";return h("div",{key:"5a243be782c854c759a1e649624435137918b698",class:"kol-split-button"},h("div",{key:"98eae8fe12b95afa454c6b788020f7a56d592425",class:"kol-split-button__root"},h(KolButtonWcTag,{key:"34adb06e52b29b536e7f723b786dcb7aa735150d",class:clsx("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),ref:this.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,_id:this._id,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_buttonVariant:this._variant}),h("div",{key:"2f5d4c5be26a742220521c287a3c11f77cf7c31e",class:"kol-split-button__horizontal-line"}),h(KolButtonWcTag,{key:"be42e359513bef4f0621346adecc1093282a89b0",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?translate(`${n}-close`):translate(`${n}-open`),_on:this.clickToggleHandler})),h(KolPopoverWcTag,{key:"39a539a6fd3321881642bae6c023cc59f8c4a81e",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},h("slot",{key:"e391b468016ffcf0f18a4780ad844fa7dc6d7125"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}static get style(){return{default:defaultStyleCss}}},[49,"kol-split-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],state:[32],getValue:[64],kolFocus:[64],closePopup:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-split-button"].forEach((n=>{if("kol-split-button"===n)customElements.get(n)||customElements.define(n,KolSplitButton$1)}))}const KolSplitButton=KolSplitButton$1,defineCustomElement=defineCustomElement$1;export{KolSplitButton,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-split-button.js","mappings":"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","names":["KolSplitButton","__stencil_proxyCustomElement"],"sources":["src/components/split-button/style.scss?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../popover/style.scss' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-split-button {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\n\t\t&__root {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&__button {\n\t\t\tflex-grow: 1;\n\t\t\ttext-align: left;\n\t\t}\n\n\t\t.kol-popover {\n\t\t\t&__content {\n\t\t\t\tmargin-top: to-rem(2);\n\t\t\t}\n\n\t\t\t&__arrow {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tSplitButtonProps,\n\tSplitButtonStates,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolButtonWcTag, KolPopoverWcTag } from '../../core/component-names';\nimport clsx from 'clsx';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {\n\tprivate primaryButtonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchPrimaryRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.primaryButtonWcRef = ref;\n\t};\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.primaryButtonWcRef?.kolFocus();\n\t}\n\n\tprivate readonly clickButtonHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\t// TODO: this._on is not validated\n\t\t\t\tthis._on?.onClick(event, this._value);\n\t\t\t}\n\t\t},\n\t};\n\tprivate readonly clickToggleHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\t\t\tthis.toggleDropdown();\n\t\t},\n\t};\n\n\tprivate readonly toggleDropdown = () => {\n\t\tthis.state = { ...this.state, _show: !this.state._show };\n\t};\n\n\tprivate readonly handleOnClose = () => {\n\t\tthis.state = { ...this.state, _show: false };\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst i18nDropdownLabel = 'kol-split-button-dropdown-label';\n\t\treturn (\n\t\t\t<div class=\"kol-split-button\">\n\t\t\t\t<div class=\"kol-split-button__root\">\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-split-button__button', {\n\t\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tref={this.catchPrimaryRef}\n\t\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t\t_id={this._id}\n\t\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t\t_name={this._name}\n\t\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t\t_role={this._role}\n\t\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_type={this._type}\n\t\t\t\t\t\t_value={this._value}\n\t\t\t\t\t\t_buttonVariant={this._variant}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t<div class=\"kol-split-button__horizontal-line\"></div>\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-split-button__secondary-button\"\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons=\"codicon codicon-triangle-down\"\n\t\t\t\t\t\t_label={this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}\n\t\t\t\t\t\t_on={this.clickToggleHandler}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t</div>\n\t\t\t\t<KolPopoverWcTag _show={this.state._show} _on={{ onClose: this.handleOnClose }} _align=\"bottom\">\n\t\t\t\t\t<slot />\n\t\t\t\t</KolPopoverWcTag>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Closes the dropdown.\n\t */\n\t@Method()\n\tpublic async closePopup() {\n\t\tthis.handleOnClose();\n\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: SplitButtonStates = {\n\t\t_show: false,\n\t};\n}\n"],"version":3}
+{"file":"kol-split-button.js","mappings":"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","names":["KolSplitButton","__stencil_proxyCustomElement"],"sources":["src/components/split-button/style.scss?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../popover/style.scss' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-split-button {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\n\t\t&__root {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&__button {\n\t\t\tflex-grow: 1;\n\t\t\ttext-align: left;\n\t\t}\n\n\t\t.kol-popover {\n\t\t\t&__content {\n\t\t\t\tmargin-top: to-rem(2);\n\t\t\t}\n\n\t\t\t&__arrow {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tSplitButtonProps,\n\tSplitButtonStates,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolButtonWcTag, KolPopoverWcTag } from '../../core/component-names';\nimport clsx from 'clsx';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {\n\tprivate primaryButtonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchPrimaryRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.primaryButtonWcRef = ref;\n\t};\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.primaryButtonWcRef?.kolFocus();\n\t}\n\n\tprivate readonly clickButtonHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\t// TODO: this._on is not validated\n\t\t\t\tthis._on?.onClick(event, this._value);\n\t\t\t}\n\t\t},\n\t};\n\tprivate readonly clickToggleHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\t\t\tthis.toggleDropdown();\n\t\t},\n\t};\n\n\tprivate readonly toggleDropdown = () => {\n\t\tthis.state = { ...this.state, _show: !this.state._show };\n\t};\n\n\tprivate readonly handleOnClose = () => {\n\t\tthis.state = { ...this.state, _show: false };\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst i18nDropdownLabel = 'kol-split-button-dropdown-label';\n\t\treturn (\n\t\t\t<div class=\"kol-split-button\">\n\t\t\t\t<div class=\"kol-split-button__root\">\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-split-button__button', {\n\t\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tref={this.catchPrimaryRef}\n\t\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t\t_id={this._id}\n\t\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t\t_name={this._name}\n\t\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t\t_role={this._role}\n\t\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_type={this._type}\n\t\t\t\t\t\t_value={this._value}\n\t\t\t\t\t\t_buttonVariant={this._variant}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t<div class=\"kol-split-button__horizontal-line\"></div>\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-split-button__secondary-button\"\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons=\"codicon codicon-triangle-down\"\n\t\t\t\t\t\t_label={this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}\n\t\t\t\t\t\t_on={this.clickToggleHandler}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t</div>\n\t\t\t\t<KolPopoverWcTag _show={this.state._show} _on={{ onClose: this.handleOnClose }} _align=\"bottom\">\n\t\t\t\t\t<slot />\n\t\t\t\t</KolPopoverWcTag>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Closes the dropdown.\n\t */\n\t@Method()\n\tpublic async closePopup() {\n\t\tthis.handleOnClose();\n\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: SplitButtonStates = {\n\t\t_show: false,\n\t};\n}\n"],"version":3}

package/dist/components/kol-table-stateful.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{i as KolPaginationWcTag,q as KolTableStatelessWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{c as watchBoolean,w as watchValidator,s as setState,Q as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,e as watchString,q as devHint}from"./common.js";import{v as validateLabel}from"./label.js";import{v as validateTableData,a as validateTableDataFoot,b as validateTableSelection,c as validateTableStatefulCallbacks,d as validateTableSettings}from"./table-settings.js";import{C as Callback}from"./keyboard.js";import{K as KolEvent,d as dispatchDomEvent}from"./events.js";const validateAllowMultiSort=(t,n,e={})=>{watchBoolean(t,"_allowMultiSort",n,Object.assign({defaultValue:!1},e))},paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,n)=>{watchValidator(t,"_paginationPosition",(t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t)),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),n,{defaultValue:"bottom"})},defaultStyleCss='@charset "UTF-8";\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(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    contain: layout;\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 0;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: "";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}\n@layer kol-component {\n  .kol-pagination {\n    align-items: center;\n    display: grid;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n}\n@layer kol-component {\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}',PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),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,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"},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),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),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),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),setState(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void 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 a=this.sortData[e],i=a.compareFn(t,n);if(0!==i)return"ASC"===a.direction?i:-i}return 0})),setState(this,"_sortedData",t)}}validateAllowMultiSort(t){validateAllowMultiSort(this,t,{defaultValue:!1})}validateData(t){validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){validatePaginationPosition(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key===(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,a,i;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const a=t.sortDirection;"ASC"!==a&&"DESC"!==a||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:a}),n=!0)})),n&&setTimeout((()=>this.updateSortedData()))},l=t;null===(n=l.horizontal)||void 0===n||n.forEach(o),null===(e=l.vertical)||void 0===e||e.forEach(o),l.horizontal&&l.vertical&&(null===(a=l.horizontal)||void 0===a?void 0:a.length)>0&&(null===(i=l.vertical)||void 0===i?void 0:i.length)>0&&(this.disableSort=!0,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){validateLabel(this,t,{required:!0})}validateMinWidth(t){watchString(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){validateTableSelection(this,t)}validateOn(t){validateTableStatefulCallbacks(this,t)}validateTableSettings(t){validateTableSettings(this,t)}validatePagination(t){try{t=parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),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(KolEvent.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(KolEvent.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const n=translate("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${translate(`kol-pagination-position-${t}`)})`}});return h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},h("span",null,translate("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),h("div",{class:"kol-table-stateful__pagination-wrapper"},h(KolPaginationWcTag,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||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(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const a=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",i=this.state._sortedData.filter((n=>t.includes(n[a])));if(!1===(null==e?void 0:e.multiple))return i[0];if(a)return i}return null}handleSelectionChange(t,n){var e;const a=this.state._selection;a&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},a),{selectedKeys:"object"==typeof n?n:[n]})}));const i=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](t,i),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,i)}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,a,i,o;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,d={horizontal:null!==(a=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)}))))))&&void 0!==a?a:[],vertical:null!==(o=null===(i=this.state._headers.vertical)||void 0===i?void 0:i.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==o?o:[]};return h(Host,{key:"f4d7920efb2142e1e0b9c2dd3498490874eb9d80",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&s,h(KolTableStatelessWcTag,{key:"61746f51c9447486bf9cd17a82128a6078a65fde",ref:this.catchRef,_data:l,_headerCells:d,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return this}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-table-stateful",{_allowMultiSort:[4,"_allow-multi-sort"],_data:[1],_dataFoot:[1,"_data-foot"],_headers:[1],_label:[1],_minWidth:[1,"_min-width"],_pagination:[8],_paginationPosition:[1,"_pagination-position"],_selection:[1],_on:[16],_tableSettings:[16,"_table-settings"],state:[32],getSelection:[64]},void 0,{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-table-stateful"].forEach((t=>{if("kol-table-stateful"===t)customElements.get(t)||customElements.define(t,KolTableStateful$1)}))}const KolTableStateful=KolTableStateful$1,defineCustomElement=defineCustomElement$1;export{KolTableStateful,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{i as KolPaginationWcTag,q as KolTableStatelessWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{c as watchBoolean,w as watchValidator,s as setState,Q as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,e as watchString,q as devHint}from"./common.js";import{v as validateLabel}from"./label.js";import{v as validateTableData,a as validateTableDataFoot,b as validateTableSelection,c as validateTableStatefulCallbacks,d as validateTableSettings}from"./table-settings.js";import{C as Callback}from"./keyboard.js";import{K as KolEvent,d as dispatchDomEvent}from"./events.js";const validateAllowMultiSort=(t,n,e={})=>{watchBoolean(t,"_allowMultiSort",n,Object.assign({defaultValue:!1},e))},paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,n)=>{watchValidator(t,"_paginationPosition",(t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t)),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),n,{defaultValue:"bottom"})},defaultStyleCss='@charset "UTF-8";\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(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * 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    /*\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * 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    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    contain: layout;\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 0;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: "";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}\n@layer kol-component {\n  .kol-pagination {\n    align-items: center;\n    display: grid;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n}\n@layer kol-component {\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}',PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),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,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"},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),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),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),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),setState(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void 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 a=this.sortData[e],i=a.compareFn(t,n);if(0!==i)return"ASC"===a.direction?i:-i}return 0})),setState(this,"_sortedData",t)}}validateAllowMultiSort(t){validateAllowMultiSort(this,t,{defaultValue:!1})}validateData(t){validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){validatePaginationPosition(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key===(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,a,i;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const a=t.sortDirection;"ASC"!==a&&"DESC"!==a||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:a}),n=!0)})),n&&setTimeout((()=>this.updateSortedData()))},l=t;null===(n=l.horizontal)||void 0===n||n.forEach(o),null===(e=l.vertical)||void 0===e||e.forEach(o),l.horizontal&&l.vertical&&(null===(a=l.horizontal)||void 0===a?void 0:a.length)>0&&(null===(i=l.vertical)||void 0===i?void 0:i.length)>0&&(this.disableSort=!0,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){validateLabel(this,t,{required:!0})}validateMinWidth(t){watchString(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){validateTableSelection(this,t)}validateOn(t){validateTableStatefulCallbacks(this,t)}validateTableSettings(t){validateTableSettings(this,t)}validatePagination(t){try{t=parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),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(KolEvent.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(KolEvent.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const n=translate("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${translate(`kol-pagination-position-${t}`)})`}});return h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},h("span",null,translate("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),h("div",{class:"kol-table-stateful__pagination-wrapper"},h(KolPaginationWcTag,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||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(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const a=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",i=this.state._sortedData.filter((n=>t.includes(n[a])));if(!1===(null==e?void 0:e.multiple))return i[0];if(a)return i}return null}handleSelectionChange(t,n){var e;const a=this.state._selection;a&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},a),{selectedKeys:"object"==typeof n?n:[n]})}));const i=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](t,i),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,i)}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,a,i,o;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,d={horizontal:null!==(a=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)}))))))&&void 0!==a?a:[],vertical:null!==(o=null===(i=this.state._headers.vertical)||void 0===i?void 0:i.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))))&&void 0!==o?o:[]};return h(Host,{key:"f4d7920efb2142e1e0b9c2dd3498490874eb9d80",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&s,h(KolTableStatelessWcTag,{key:"61746f51c9447486bf9cd17a82128a6078a65fde",ref:this.catchRef,_data:l,_headerCells:d,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return this}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-table-stateful",{_allowMultiSort:[4,"_allow-multi-sort"],_data:[1],_dataFoot:[1,"_data-foot"],_headers:[1],_label:[1],_minWidth:[1,"_min-width"],_pagination:[8],_paginationPosition:[1,"_pagination-position"],_selection:[1],_on:[16],_tableSettings:[16,"_table-settings"],state:[32],getSelection:[64]},void 0,{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-table-stateful"].forEach((t=>{if("kol-table-stateful"===t)customElements.get(t)||customElements.define(t,KolTableStateful$1)}))}const KolTableStateful=KolTableStateful$1,defineCustomElement=defineCustomElement$1;export{KolTableStateful,defineCustomElement};