@public-ui/components 1.4.0 → 1.4.1-rc.1

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o}from"./index-50adf9a0.js";import{b as r}from"./a11y.tipps-a876ebb7.js";import{w as t}from"./prop.validators-dd337216.js";import{w as e}from"./validation-68f4e65e.js";import"./dev.utils-ec1c1b88.js";import"./reuse-9dd1192b.js";import"./index-599f5430.js";const a=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}:host *{box-sizing:border-box}:host kol-icon{color:inherit}:host kol-span-wc{display:grid;place-items:center;width:100%}:host kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}:host button{margin:0;min-height:44px;min-width:44px;padding:0}:host a,:host button,:host input,:host select,:host textarea{cursor:pointer}:host a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}:host a{display:inline-flex;place-items:baseline}:host button{background-color:transparent;border-width:0}:host ul{display:grid;list-style:none;place-items:center}:host ul li{height:0}",s=class{constructor(o){i(this,o),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return o("nav",{"aria-label":this.state._ariaLabel},o("ul",null,this.state._links.map(((i,a)=>o("li",{key:a},o("kol-link",Object.assign({},i,{_stealth:!0})))))))}validateAriaLabel(i){t(this,"_ariaLabel",i,{required:!0}),r(i)}validateLinks(i){e("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};s.style={default:a};export{s as kol_skip_nav};
+import{r as i,h as r}from"./index-50adf9a0.js";import{b as o}from"./a11y.tipps-a876ebb7.js";import{w as a}from"./prop.validators-dd337216.js";import{w as e}from"./validation-68f4e65e.js";import"./dev.utils-ec1c1b88.js";import"./reuse-9dd1192b.js";import"./index-599f5430.js";const l=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0;margin:0;min-height:44px;min-width:44px;padding:0}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}",t=class{constructor(r){i(this,r),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return r("nav",{"aria-label":this.state._ariaLabel},r("ul",null,this.state._links.map(((i,a)=>r("li",{key:a},r("kol-link",Object.assign({},i,{_stealth:!0})))))))}validateAriaLabel(i){a(this,"_ariaLabel",i,{required:!0}),o(i)}validateLinks(i){e("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};t.style={default:l};export{t as kol_skip_nav};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNav","_ariaLabel","_links","render","h","this","state","map","link","index","key","Object","assign","_stealth","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","./src/components/skip-nav/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host ul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\n:host ul li {\n\theight: 0;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\nimport { Stringified } from '../../types/common';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @part link - Ermöglicht das Stylen der Links.\n */\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: NavLinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link {...link} _stealth={true}></kol-link>\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 * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Ist die Liste der unsichtbaren Links.\n\t */\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mRAAA,MAAMA,EAAkB,63C,MCoCXC,EAAU,M,oFA8BU,CAC/BC,WAAY,IACZC,OAAQ,G,CA/BFC,SACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,YAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAoBC,IAE1CL,EAAA,MAAIM,IAAKD,GACRL,EAAA,WAAAO,OAAAC,OAAA,GAAcJ,EAAI,CAAEK,SAAU,Y,CA+B9BC,kBAAkBC,GACxBC,EAAYX,KAAM,aAAcU,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAOpBI,cAAcJ,GACpBK,EAAc,aAAcf,KAAMU,E,CAM5BM,oBACNhB,KAAKS,kBAAkBT,KAAKJ,YAC5BI,KAAKc,cAAcd,KAAKH,O"}
+{"version":3,"names":["defaultStyleCss","KolSkipNav","_ariaLabel","_links","render","h","this","state","map","link","index","key","Object","assign","_stealth","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","./src/components/skip-nav/component.tsx"],"sourcesContent":["@import '../style.css';\n\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\nimport { Stringified } from '../../types/common';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @part link - Ermöglicht das Stylen der Links.\n */\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: NavLinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link {...link} _stealth={true}></kol-link>\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 * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Ist die Liste der unsichtbaren Links.\n\t */\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mRAAA,MAAMA,EAAkB,yxC,MCoCXC,EAAU,M,oFA8BU,CAC/BC,WAAY,IACZC,OAAQ,G,CA/BFC,SACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,YAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAoBC,IAE1CL,EAAA,MAAIM,IAAKD,GACRL,EAAA,WAAAO,OAAAC,OAAA,GAAcJ,EAAI,CAAEK,SAAU,Y,CA+B9BC,kBAAkBC,GACxBC,EAAYX,KAAM,aAAcU,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAOpBI,cAAcJ,GACpBK,EAAc,aAAcf,KAAMU,E,CAM5BM,oBACNhB,KAAKS,kBAAkBT,KAAKJ,YAC5BI,KAAKc,cAAcd,KAAKH,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as o,h as i}from"./index-50adf9a0.js";const r=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}:host *{box-sizing:border-box}:host kol-icon{color:inherit}:host kol-span-wc{display:grid;place-items:center;width:100%}:host kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}:host button{margin:0;min-height:44px;min-width:44px;padding:0}:host a,:host button,:host input,:host select,:host textarea{cursor:pointer}:host a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}:host a{display:inline-flex;place-items:baseline}:host button{background-color:transparent;border-width:0}",t=class{constructor(i){o(this,i),this._icon=void 0,this._iconOnly=!1,this._label=void 0}render(){return i("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label},i("slot",{name:"expert",slot:"expert"}))}};t.style={default:r};export{t as kol_span};
+import{r as i,h as o}from"./index-50adf9a0.js";const r=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0;margin:0;min-height:44px;min-width:44px;padding:0}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}",n=class{constructor(o){i(this,o),this._icon=void 0,this._iconOnly=!1,this._label=void 0}render(){return o("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label},o("slot",{name:"expert",slot:"expert"}))}};n.style={default:r};export{n as kol_span};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSpan","render","h","_icon","this","_iconOnly","_label","name","slot"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import '../style.css';\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}>\n\t\t\t\t{/*\n\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t*/}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt einen beschreibenden Text für das Text-Element an.\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,+yC,MCaXC,EAAO,M,6DAqBmC,M,sBApB/CC,SACN,OACCC,EAAA,eAAaC,MAAOC,KAAKD,MAAOE,UAAWD,KAAKC,UAAWC,OAAQF,KAAKE,QAKvEJ,EAAA,QAAMK,KAAK,SAASC,KAAK,W"}
+{"version":3,"names":["defaultStyleCss","KolSpan","render","h","_icon","this","_iconOnly","_label","name","slot"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import '../style.css';\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}>\n\t\t\t\t{/*\n\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t*/}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt einen beschreibenden Text für das Text-Element an.\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,utC,MCaXC,EAAO,M,6DAqBmC,M,sBApB/CC,SACN,OACCC,EAAA,eAAaC,MAAOC,KAAKD,MAAOE,UAAWD,KAAKC,UAAWC,OAAQF,KAAKE,QAKvEJ,EAAA,QAAMK,KAAK,SAASC,KAAK,W"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,H as r}from"./index-50adf9a0.js";import{b as s}from"./prop.validators-dd337216.js";import{a as t}from"./i18n-e297566c.js";import"./index-599f5430.js";import"./a11y.tipps-a876ebb7.js";import"./dev.utils-ec1c1b88.js";import"./reuse-9dd1192b.js";const n=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}:host *{box-sizing:border-box}:host kol-icon{color:inherit}:host kol-span-wc{display:grid;place-items:center;width:100%}:host kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}:host button{margin:0;min-height:44px;min-width:44px;padding:0}:host a,:host button,:host input,:host select,:host textarea{cursor:pointer}:host a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}:host a{display:inline-flex;place-items:baseline}:host button{background-color:transparent;border-width:0}:host .spin{display:inline-block;height:1rem;position:relative;width:3rem}:host .spin span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-color:#fff;border-radius:50%;border-style:solid;border-width:0.1rem;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}:host .spin span:nth-child(1){background-color:#fc0;z-index:0;animation:spin1 2s infinite;left:0.1rem}:host .spin span:nth-child(2){background-color:#f00;z-index:1;animation:spin2 2s infinite;left:0.1rem}:host .spin span:nth-child(3){background-color:#000;z-index:1;animation:spin2 2s infinite;left:1.1rem}:host .spin span:nth-child(4){background-color:#666;z-index:0;animation:spin3 2s infinite;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}",a=class{constructor(o){i(this,o),this.showToggled=!1,this._show=!1,this.state={}}render(){return o(r,null,this.state._show?o("span",{"aria-busy":"true","aria-label":t("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},o("span",{class:"bg-spin-1"}),o("span",{class:"bg-spin-2"}),o("span",{class:"bg-spin-3"}),o("span",{class:"bg-neutral"})):this.showToggled&&o("span",{"aria-label":t("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,s(this,"_show",i)}componentWillLoad(){this.validateShow(this._show)}static get watchers(){return{_show:["validateShow"]}}};a.style={default:n};export{a as kol_spin};
+import{r as i,h as r,H as o}from"./index-50adf9a0.js";import{b as n}from"./prop.validators-dd337216.js";import{a as s}from"./i18n-e297566c.js";import"./index-599f5430.js";import"./a11y.tipps-a876ebb7.js";import"./dev.utils-ec1c1b88.js";import"./reuse-9dd1192b.js";const a=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0;margin:0;min-height:44px;min-width:44px;padding:0}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-color:#fff;border-radius:50%;border-style:solid;border-width:0.1rem;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin span:nth-child(1){background-color:#fc0;z-index:0;animation:spin1 2s infinite;left:0.1rem}.spin span:nth-child(2){background-color:#f00;z-index:1;animation:spin2 2s infinite;left:0.1rem}.spin span:nth-child(3){background-color:#000;z-index:1;animation:spin2 2s infinite;left:1.1rem}.spin span:nth-child(4){background-color:#666;z-index:0;animation:spin3 2s infinite;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}",e=class{constructor(o){i(this,o),this.showToggled=!1,this._show=!1,this.state={}}render(){return r(o,null,this.state._show?r("span",{"aria-busy":"true","aria-label":s("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},r("span",{class:"bg-spin-1"}),r("span",{class:"bg-spin-2"}),r("span",{class:"bg-spin-3"}),r("span",{class:"bg-neutral"})):this.showToggled&&r("span",{"aria-label":s("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,n(this,"_show",i)}componentWillLoad(){this.validateShow(this._show)}static get watchers(){return{_show:["validateShow"]}}};e.style={default:a};export{e as kol_spin};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSpin","this","showToggled","render","h","Host","state","_show","translate","class","role","validateShow","value","watchBoolean","componentWillLoad"],"sources":["./src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","./src/components/spin/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host .spin {\n\tdisplay: inline-block;\n\theight: 1rem;\n\tposition: relative;\n\twidth: 3rem;\n}\n:host .spin span {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tborder-color: #fff;\n\tborder-radius: 50%;\n\tborder-style: solid;\n\tborder-width: 0.1rem;\n\theight: 0.8rem;\n\tposition: absolute;\n\ttop: 0.1rem;\n\twidth: 0.8rem;\n}\n:host .spin span:nth-child(1) {\n\tbackground-color: #fc0;\n\tz-index: 0;\n\tanimation: spin1 2s infinite;\n\tleft: 0.1rem;\n}\n:host .spin span:nth-child(2) {\n\tbackground-color: #f00;\n\tz-index: 1;\n\tanimation: spin2 2s infinite;\n\tleft: 0.1rem;\n}\n:host .spin span:nth-child(3) {\n\tbackground-color: #000;\n\tz-index: 1;\n\tanimation: spin2 2s infinite;\n\tleft: 1.1rem;\n}\n:host .spin span:nth-child(4) {\n\tbackground-color: #666;\n\tz-index: 0;\n\tanimation: spin3 2s infinite;\n\tleft: 2.1rem;\n}\n\n@keyframes spin1 {\n\t0% {\n\t\ttransform: scale(0);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n\n@keyframes spin2 {\n\t0% {\n\t\ttransform: translate(0, 0);\n\t}\n\t100% {\n\t\ttransform: translate(1rem, 0);\n\t}\n}\n\n@keyframes spin3 {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { translate } from '../../i18n';\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tshow: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span aria-busy=\"true\" aria-label={translate('kol-action-running')} aria-live=\"polite\" class=\"spin\" role=\"alert\">\n\t\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {};\n\n\tprivate showToggled = false;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"mappings":";;;wQAAA,MAAMA,EAAkB,yqE,MC0BXC,EAAO,M,yBA4BXC,KAAAC,YAAc,M,WAP4B,M,WAKlB,E,CAzBzBC,SACN,OACCC,EAACC,EAAI,KACHJ,KAAKK,MAAMC,MACXH,EAAA,oBAAgB,OAAM,aAAaI,EAAU,sBAAqB,YAAY,SAASC,MAAM,OAAOC,KAAK,SACxGN,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,gBAGbR,KAAKC,aAAeE,EAAA,qBAAkBI,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAsB3GC,aAAaC,GACnBX,KAAKC,YAAcD,KAAKK,MAAMC,QAAU,MAAQN,KAAKM,QAAU,MAC/DM,EAAaZ,KAAM,QAASW,E,CAMtBE,oBACNb,KAAKU,aAAaV,KAAKM,M"}
+{"version":3,"names":["defaultStyleCss","KolSpin","this","showToggled","render","h","Host","state","_show","translate","class","role","validateShow","value","watchBoolean","componentWillLoad"],"sources":["./src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","./src/components/spin/component.tsx"],"sourcesContent":["@import '../style.css';\n\n.spin {\n\tdisplay: inline-block;\n\theight: 1rem;\n\tposition: relative;\n\twidth: 3rem;\n}\n.spin span {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tborder-color: #fff;\n\tborder-radius: 50%;\n\tborder-style: solid;\n\tborder-width: 0.1rem;\n\theight: 0.8rem;\n\tposition: absolute;\n\ttop: 0.1rem;\n\twidth: 0.8rem;\n}\n.spin span:nth-child(1) {\n\tbackground-color: #fc0;\n\tz-index: 0;\n\tanimation: spin1 2s infinite;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(2) {\n\tbackground-color: #f00;\n\tz-index: 1;\n\tanimation: spin2 2s infinite;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(3) {\n\tbackground-color: #000;\n\tz-index: 1;\n\tanimation: spin2 2s infinite;\n\tleft: 1.1rem;\n}\n.spin span:nth-child(4) {\n\tbackground-color: #666;\n\tz-index: 0;\n\tanimation: spin3 2s infinite;\n\tleft: 2.1rem;\n}\n\n@keyframes spin1 {\n\t0% {\n\t\ttransform: scale(0);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n\n@keyframes spin2 {\n\t0% {\n\t\ttransform: translate(0, 0);\n\t}\n\t100% {\n\t\ttransform: translate(1rem, 0);\n\t}\n}\n\n@keyframes spin3 {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { translate } from '../../i18n';\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tshow: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span aria-busy=\"true\" aria-label={translate('kol-action-running')} aria-live=\"polite\" class=\"spin\" role=\"alert\">\n\t\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {};\n\n\tprivate showToggled = false;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"mappings":";;;wQAAA,MAAMA,EAAkB,6iE,MC0BXC,EAAO,M,yBA4BXC,KAAAC,YAAc,M,WAP4B,M,WAKlB,E,CAzBzBC,SACN,OACCC,EAACC,EAAI,KACHJ,KAAKK,MAAMC,MACXH,EAAA,oBAAgB,OAAM,aAAaI,EAAU,sBAAqB,YAAY,SAASC,MAAM,OAAOC,KAAK,SACxGN,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,gBAGbR,KAAKC,aAAeE,EAAA,qBAAkBI,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAsB3GC,aAAaC,GACnBX,KAAKC,YAAcD,KAAKK,MAAMC,QAAU,MAAQN,KAAKM,QAAU,MAC/DM,EAAaZ,KAAM,QAASW,E,CAMtBE,oBACNb,KAAKU,aAAaV,KAAKM,M"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-50adf9a0.js";import{s as o,w as s,g as n,p as a,a as r,o as l}from"./prop.validators-dd337216.js";import{a as h}from"./i18n-e297566c.js";import"./index-599f5430.js";import"./a11y.tipps-a876ebb7.js";import"./dev.utils-ec1c1b88.js";import"./reuse-9dd1192b.js";const d=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}:host *{box-sizing:border-box}:host kol-icon{color:inherit}:host kol-span-wc{display:grid;place-items:center;width:100%}:host kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}:host button{margin:0;min-height:44px;min-width:44px;padding:0}:host a,:host button,:host input,:host select,:host textarea{cursor:pointer}:host a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}:host a{display:inline-flex;place-items:baseline}:host button{background-color:transparent;border-width:0}:host>div{overflow-x:auto;overflow-y:hidden}:host table{width:100%}:host th>div{display:grid;grid-template-columns:1fr auto;place-items:center;gap:0.25em}:host div.pagination{padding:0.5em}:host div.pagination,:host div.pagination>div:last-child{display:grid;place-items:center;gap:0.5em}@media (min-width: 1024px){:host div.pagination,:host div.pagination>div:last-child{grid-auto-flow:column}:host div.pagination kol-pagination{display:flex;gap:calc(4 * var(--kolibri-spacing))}}",f=[10,20,50,100],c=new Map,p=class{constructor(i){t(this,i),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),o(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),o(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),o(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),o(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,o,e)=>{"_pagination"===e&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=()=>{let t=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"NOS":t=[...this.state._data];break;case"ASC":t=this.sortFunction([...this.state._data]);break;default:t=this.sortFunction([...this.state._data]).reverse()}o(this,"_sortedData",t)},this._caption=void 0,this._data=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"",_data:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){s(this,"_caption",t,{required:!0})}validateData(t){n(t,(()=>{l(t,(()=>{void 0===t&&(t=[]);try{t=a(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&o(this,"_data",t,{afterPatch:()=>{const t=setTimeout((()=>{clearTimeout(t),this.updateSortedData()}))}})}))}))}validateHeaders(t){n(t,(()=>{l(t,(()=>{try{t=a(t)}catch(t){}r(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,o;const e=t;null===(i=e.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(o=e.vertical)||void 0===o||o.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))}))}}})}))}))}validateMinWidth(t){s(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=a(t)}catch(t){}r(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let o=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var o;return i+=null!==(o=t.colSpan)&&void 0!==o?o:1})),o<i&&(o=i)})),0===o&&(o=i.length),o}getNumberOfRows(t,i){let o=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var o;return i+=null!==(o=t.rowSpan)&&void 0!==o?o:1})),o<i&&(o=i)})),0===o&&(o=i.length),o}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,o;let e=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===e.length&&(e=this.filterHeaderKeys(null!==(o=t.vertical)&&void 0!==o?o:[]),e.length>0&&(this.horizontal=!1)),e}createDataField(t,i){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const o=this.getPrimaryHeader(i),e=this.getNumberOfCols(i.horizontal,t),a=this.getNumberOfRows(i.vertical,t),n=[],s=[],r=[];i.vertical.forEach(((t,i)=>{s[i]=0,r[i]=[]}));for(let l=0;l<a;l++){const a=[];i.vertical.forEach(((t,i)=>{let o=0;if(r[i].forEach((t=>o+=t)),o<=l){const e=t[l-o+s[i]];if("object"==typeof e){a.push(Object.assign(Object.assign({},e),{asTd:!1,data:{}}));let t=1;if("number"==typeof e.rowSpan&&e.rowSpan>1&&(t=e.rowSpan),r[i].push(t),"number"==typeof e.colSpan&&e.colSpan>1)for(let o=1;o<e.colSpan;o++)r[i+o].push(t);s[i]++}}}));for(let i=0;i<e;i++)!0===this.horizontal?"object"==typeof o[i]&&null!==o[i]&&"string"==typeof o[i].key&&"object"==typeof t[l]&&null!==t[l]&&a.push(Object.assign(Object.assign({},o[i]),{colSpan:void 0,data:t[l],label:t[l][o[i].key],rowSpan:void 0})):"object"==typeof o[l]&&null!==o[l]&&"string"==typeof o[l].key&&"object"==typeof t[i]&&null!==t[i]&&a.push(Object.assign(Object.assign({},o[l]),{colSpan:void 0,data:t[i],label:t[i][o[l].key],rowSpan:void 0}));n.push(a)}if(0===t.length){let t=0,o=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{o+=t.rowSpan||1})));const e={colSpan:t,label:h("kol-no-entries"),render:void 0,rowSpan:Math.max(o,1)};0===n.length?n.push([e]):n[0].push(e)}return n}selectDisplayedData(t,i,o){return"number"==typeof i&&i>0&&"number"==typeof o&&o>0?(this.pageStartSlice=i*(o-1),this.pageEndSlice=i*o>t.length?t.length:i*o,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(c.get(i)),c.set(i,setTimeout((()=>{if(clearTimeout(c.get(i)),"function"==typeof t.render){const o=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof o&&(i.innerHTML=o)}}))))}render(){var t,o;const a=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(o=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==o?o:10:this.state._sortedData.length,this.state._pagination._page||1),n=this.createDataField(a,this.state._headers);return i(e,null,i("div",{tabindex:"0"},i("table",{style:{minWidth:this.state._minWidth}},i("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&i("thead",null,this.state._headers.horizontal.map(((t,o)=>i("tr",{key:`thead-${o}`},t.map(((t,e)=>!0===t.asTd?i("td",{key:`thead-${o}-${e}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}):i("th",{key:`thead-${o}-${e}-${t.label}`,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"button,ghost",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"fas fa-sort":"ASC"===this.sortDirections.get(t.sort)?"fas fa-sort-up":"fas fa-sort-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))))))))),i("tbody",null,n.map(((t,o)=>i("tr",{key:`tbody-${o}`},t.map(((t,e)=>!1===t.asTd?i("th",{key:`tbody-${o}-${e}-${t.label}`,scope:"number"==typeof t.rowSpan&&t.rowSpan>1?"rowgroup":"row",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"button,ghost",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"fas fa-sort":"ASC"===this.sortDirections.get(t.sort)?"fas fa-sort-up":"fas fa-sort-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))):i("td",{key:`tbody-${o}-${e}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}))))))))),this.pageEndSlice>0&&this.showPagination&&i("div",{class:"pagination"},i("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),i("div",null,i("kol-pagination",{_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||f,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};p.style={default:d};export{p as kol_table};
+import{r as t,h as i,H as e}from"./index-50adf9a0.js";import{s as o,w as n,g as s,p as a,a as r,o as l}from"./prop.validators-dd337216.js";import{a as h}from"./i18n-e297566c.js";import"./index-599f5430.js";import"./a11y.tipps-a876ebb7.js";import"./dev.utils-ec1c1b88.js";import"./reuse-9dd1192b.js";const d=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0;margin:0;min-height:44px;min-width:44px;padding:0}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}:host>div{overflow-x:auto;overflow-y:hidden}table{width:100%}th>div{display:grid;grid-template-columns:1fr auto;place-items:center;gap:0.25em}div.pagination{padding:0.5em}div.pagination,div.pagination>div:last-child{display:grid;place-items:center;gap:0.5em}@media (min-width: 1024px){div.pagination,div.pagination>div:last-child{grid-auto-flow:column}div.pagination kol-pagination{display:flex;gap:calc(4 * var(--kolibri-spacing))}}",f=[10,20,50,100],c=new Map,p=class{constructor(i){t(this,i),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),o(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),o(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),o(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),o(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,e,a)=>{"_pagination"===a&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=()=>{let t=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"NOS":t=[...this.state._data];break;case"ASC":t=this.sortFunction([...this.state._data]);break;default:t=this.sortFunction([...this.state._data]).reverse()}o(this,"_sortedData",t)},this._caption=void 0,this._data=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"",_data:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){n(this,"_caption",t,{required:!0})}validateData(t){s(t,(()=>{l(t,(()=>{void 0===t&&(t=[]);try{t=a(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&o(this,"_data",t,{afterPatch:()=>{const t=setTimeout((()=>{clearTimeout(t),this.updateSortedData()}))}})}))}))}validateHeaders(t){s(t,(()=>{l(t,(()=>{try{t=a(t)}catch(t){}r(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,e;const a=t;null===(i=a.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(e=a.vertical)||void 0===e||e.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))}))}}})}))}))}validateMinWidth(t){n(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=a(t)}catch(t){}r(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.colSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}getNumberOfRows(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.rowSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,e;let a=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(e=t.vertical)&&void 0!==e?e:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,i){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const e=this.getPrimaryHeader(i),a=this.getNumberOfCols(i.horizontal,t),o=this.getNumberOfRows(i.vertical,t),n=[],s=[],r=[];i.vertical.forEach(((t,i)=>{s[i]=0,r[i]=[]}));for(let l=0;l<o;l++){const o=[];i.vertical.forEach(((t,i)=>{let e=0;if(r[i].forEach((t=>e+=t)),e<=l){const a=t[l-e+s[i]];if("object"==typeof a){o.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),r[i].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let e=1;e<a.colSpan;e++)r[i+e].push(t);s[i]++}}}));for(let i=0;i<a;i++)!0===this.horizontal?"object"==typeof e[i]&&null!==e[i]&&"string"==typeof e[i].key&&"object"==typeof t[l]&&null!==t[l]&&o.push(Object.assign(Object.assign({},e[i]),{colSpan:void 0,data:t[l],label:t[l][e[i].key],rowSpan:void 0})):"object"==typeof e[l]&&null!==e[l]&&"string"==typeof e[l].key&&"object"==typeof t[i]&&null!==t[i]&&o.push(Object.assign(Object.assign({},e[l]),{colSpan:void 0,data:t[i],label:t[i][e[l].key],rowSpan:void 0}));n.push(o)}if(0===t.length){let t=0,e=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{e+=t.rowSpan||1})));const a={colSpan:t,label:h("kol-no-entries"),render:void 0,rowSpan:Math.max(e,1)};0===n.length?n.push([a]):n[0].push(a)}return n}selectDisplayedData(t,i,e){return"number"==typeof i&&i>0&&"number"==typeof e&&e>0?(this.pageStartSlice=i*(e-1),this.pageEndSlice=i*e>t.length?t.length:i*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(c.get(i)),c.set(i,setTimeout((()=>{if(clearTimeout(c.get(i)),"function"==typeof t.render){const e=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof e&&(i.innerHTML=e)}}))))}render(){var t,a;const o=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(a=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==a?a:10:this.state._sortedData.length,this.state._pagination._page||1),n=this.createDataField(o,this.state._headers);return i(e,null,i("div",{tabindex:"0"},i("table",{style:{minWidth:this.state._minWidth}},i("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&i("thead",null,this.state._headers.horizontal.map(((t,e)=>i("tr",{key:`thead-${e}`},t.map(((t,a)=>!0===t.asTd?i("td",{key:`thead-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}):i("th",{key:`thead-${e}-${a}-${t.label}`,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"button,ghost",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"fas fa-sort":"ASC"===this.sortDirections.get(t.sort)?"fas fa-sort-up":"fas fa-sort-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))))))))),i("tbody",null,n.map(((t,e)=>i("tr",{key:`tbody-${e}`},t.map(((t,a)=>!1===t.asTd?i("th",{key:`tbody-${e}-${a}-${t.label}`,scope:"number"==typeof t.rowSpan&&t.rowSpan>1?"rowgroup":"row",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"button,ghost",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"fas fa-sort":"ASC"===this.sortDirections.get(t.sort)?"fas fa-sort-up":"fas fa-sort-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))):i("td",{key:`tbody-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}))))))))),this.pageEndSlice>0&&this.showPagination&&i("div",{class:"pagination"},i("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),i("div",null,i("kol-pagination",{_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||f,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};p.style={default:d};export{p as kol_table};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","PAGINATION_OPTIONS","CELL_REFS","Map","KolTable","this","horizontal","sortDirections","showPagination","pageStartSlice","pageEndSlice","setSortDirection","sort","direction","clear","set","sortFunction","handlePagination","onClick","event","page","_a","state","_pagination","_on","setState","Object","assign","_page","onChangePage","onChangePageSize","pageSize","_pageSize","beforePatchPagination","nextValue","_nextState","_component","key","updateSortedData","sortedData","_data","get","reverse","_caption","_headers","vertical","_total","_sortedData","validateCaption","value","watchString","required","validateData","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","find","dataTupel","undefined","afterPatch","timeout","setTimeout","clearTimeout","validateHeaders","watchValidator","Set","hooks","beforePatch","headers","forEach","header","cell","sortDirection","_b","validateMinWidth","defaultValue","validatePagination","componentWillLoad","_minWidth","getNumberOfCols","horizontalHeaders","data","max","row","count","col","colSpan","length","getNumberOfRows","verticalHeaders","rowSpan","filterHeaderKeys","primaryHeader","cells","push","getPrimaryHeader","createDataField","maxCols","maxRows","dataField","rowCount","rowSpans","_row","index","i","dataRow","sum","rows","asTd","k","j","label","colspan","rowspan","emptyCell","translate","render","Math","selectDisplayedData","slice","cellRender","el","html","textAlign","width","innerHTML","displayedData","h","Host","tabindex","style","minWidth","map","cols","rowIdx","colIdx","class","ref","scope","exportparts","_ariaLabel","placeholders","colLabel","_icon","_iconOnly","_label","_variant","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign"],"sources":["./src/components/table/style.css?tag=kol-table&mode=default&encapsulation=shadow","./src/components/table/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > div {\n\toverflow-x: auto;\n\toverflow-y: hidden;\n}\n\n:host table {\n\twidth: 100%;\n}\n\n:host th > div {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n\tplace-items: center;\n\tgap: 0.25em;\n}\n\n:host div.pagination {\n\tpadding: 0.5em;\n}\n\n:host div.pagination,\n:host div.pagination > div:last-child {\n\tdisplay: grid;\n\tplace-items: center;\n\tgap: 0.5em;\n}\n\n@media (min-width: 1024px) {\n\t:host div.pagination,\n\t:host div.pagination > div:last-child {\n\t\tgrid-auto-flow: column;\n\t}\n\n\t:host div.pagination kol-pagination {\n\t\tdisplay: flex;\n\t\tgap: calc(4 * var(--kolibri-spacing));\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport {\n\tKoliBriDataType,\n\tKoliBriSortDirection,\n\tKoliBriSortFunction,\n\tKoliBriTableCell,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tKoliBriTablePaginationStates,\n} from '../../types/table';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState, watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriPaginationButtonCallbacks } from '../pagination/types';\nimport { translate } from '../../i18n';\n\ntype KoliBriTableHeaderCellAndData = KoliBriTableHeaderCell & {\n\tdata: KoliBriDataType;\n};\n\n/**\n * API\n */\ntype RequiredProps = {\n\tcaption: string;\n\tdata: Stringified<KoliBriDataType[]>;\n\theaders: Stringified<KoliBriTableHeaders>;\n};\ntype OptionalProps = {\n\tminWidth: string;\n\tpagination: boolean | Stringified<KoliBriTablePaginationProps>;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tcaption: string;\n\tdata: KoliBriDataType[];\n\theaders: KoliBriTableHeaders;\n\tpagination: KoliBriTablePaginationStates;\n\tsortedData: KoliBriDataType[];\n};\ntype OptionalStates = {\n\tminWidth: string;\n} & {\n\tsortDirection: KoliBriSortDirection;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst CELL_REFS = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\n@Component({\n\ttag: 'kol-table',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTable implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t// https://github.com/ionic-team/stencil/issues/2895\n\tprivate horizontal = true;\n\tprivate sortFunction?: KoliBriSortFunction;\n\tprivate sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\n\t/**\n\t * Gibt den  Titel oder eine Legende mit Erklärungen zur Tabelle an.\n\t */\n\t@Prop() public _caption!: string;\n\n\t/**\n\t * Gibt die Daten an, die für die Erstellung der Tabelle verwendet werden.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriDataType[]>;\n\n\t/**\n\t * Gibt die horizontalen und vertikalen Header für die Tabelle an.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Gibt an, die minimale Breite der Tabelle an.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Gibt an, ob die Daten geteilt in Seiten angezeigt wird.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_caption: '',\n\t\t_data: [],\n\t\t_headers: {\n\t\t\thorizontal: [],\n\t\t\tvertical: [],\n\t\t},\n\t\t_pagination: {\n\t\t\t_page: 1,\n\t\t\t_pageSize: 10,\n\t\t\t_total: 0,\n\t\t},\n\t\t_sortedData: [],\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_data')\n\tpublic validateData(value?: Stringified<KoliBriDataType[]>): void {\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\tif (typeof value === 'undefined') {\n\t\t\t\t\tvalue = [];\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriDataType[]>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\tif (Array.isArray(value) && value.find((dataTupel: KoliBriDataType) => !(typeof dataTupel === 'object' && dataTupel !== null)) === undefined) {\n\t\t\t\t\tsetState(this, '_data', value, {\n\t\t\t\t\t\tafterPatch: () => {\n\t\t\t\t\t\t\t// TODO: kein guter Hack (endless loop)\n\t\t\t\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\t\t\t\tthis.updateSortedData();\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t}\n\n\tprivate setSortDirection = (sort: KoliBriSortFunction, direction: KoliBriSortDirection) => {\n\t\t/**\n\t\t * Durch des Clearen, ist es nicht möglich eine Mehr-Spalten-Sortierung\n\t\t * darzustellen. Das wäre der Fall, wenn man ggf. Daten in außerhalb der\n\t\t * Komponente sortiert und diese sortiert von außen rein gibt und der\n\t\t * Sortierungsalgorithmus mehrere Spalten zusammen sortierte.\n\t\t *\n\t\t * Beachte auch col.sort !== this.sortFunction\n\t\t */\n\t\tthis.sortDirections.clear();\n\t\tthis.sortDirections.set(sort, direction);\n\t\tthis.sortFunction = sort;\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_headers')\n\tpublic validateHeaders(value?: Stringified<KoliBriTableHeaders>): void {\n\t\t/**\n\t\t * - es darf maximal ein Header als primary markiert werden (last win)\n\t\t * - der primary-Header entscheidet implizit über _order und _orientation\n\t\t *   - primary-Headers müssen das key-Property setzen\n\t\t *   - nicht primary-Headers müssen das key-Property nicht setzen (wird ignoriert)\n\t\t *   - _order: wird durch den primary-Header geregelt\n\t\t *   - _orientation: wird durch den primary-Header geregelt\n\t\t * - sobald ein Header sortierbar ist, darf es nur noch entweder horizontale\n\t\t *   oder vertikale Header geben, aber nicht mehr beides\n\t\t */\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableHeaders>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\twatchValidator(this, '_headers', (value): boolean => typeof value === 'object' && value !== null, new Set(['KoliBriTableHeaders']), value, {\n\t\t\t\t\thooks: {\n\t\t\t\t\t\tbeforePatch: (nextValue: unknown) => {\n\t\t\t\t\t\t\tconst headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\theaders.vertical?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_minWidth')\n\tpublic validateMinWidth(value?: string): void {\n\t\twatchString(this, '_minWidth', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\tprivate readonly handlePagination: KoliBriPaginationButtonCallbacks = {\n\t\tonClick: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onClick === 'function') {\n\t\t\t\tthis.state._pagination._on.onClick(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePage: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePage === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePage(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePageSize: (event: Event, pageSize: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePageSize === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePageSize(event, pageSize);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_pageSize: pageSize,\n\t\t\t});\n\t\t\tsetState(this, '_pageSize', pageSize);\n\t\t},\n\t};\n\n\tprivate readonly beforePatchPagination: Generic.Element.NextStateHooksCallback = (nextValue, _nextState, _component, key): void => {\n\t\tif (key === '_pagination') {\n\t\t\tthis.showPagination = nextValue === true || nextValue === '' /* true */ || (typeof nextValue === 'object' && nextValue !== null);\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_pagination')\n\tpublic validatePagination(value?: boolean | Stringified<KoliBriTablePaginationProps>): void {\n\t\ttry {\n\t\t\tvalue = parseJson<KoliBriTablePaginationProps>(value);\n\t\t\t// eslint-disable-next-line no-empty\n\t\t} catch (e) {\n\t\t\t// value behält den ursprünglichen Wert\n\t\t}\n\t\twatchValidator(this, '_pagination', () => true, new Set(['boolean', 'KoliBriTablePagination']), value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchPagination,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateData(this._data);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\n\t}\n\n\tprivate getNumberOfCols(horizontalHeaders: KoliBriTableHeaderCell[][], data: KoliBriDataType[]): number {\n\t\tlet max = 0;\n\t\thorizontalHeaders.forEach((row) => {\n\t\t\tlet count = 0;\n\t\t\trow.forEach((col) => (count += col.colSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate getNumberOfRows(verticalHeaders: KoliBriTableHeaderCell[][], data: KoliBriDataType[]): number {\n\t\tlet max = 0;\n\t\tverticalHeaders.forEach((col) => {\n\t\t\tlet count = 0;\n\t\t\tcol.forEach((row) => (count += row.rowSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\t// TODO: hier muss noch die order beachtet werden bei colspan und rowspan\n\tprivate filterHeaderKeys(headers: KoliBriTableHeaderCell[][]): KoliBriTableHeaderCell[] {\n\t\tconst primaryHeader: KoliBriTableHeaderCell[] = [];\n\t\theaders.forEach((cells) => {\n\t\t\tcells.forEach((cell) => {\n\t\t\t\tif (typeof cell.key === 'string') {\n\t\t\t\t\tprimaryHeader.push(cell);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\treturn primaryHeader;\n\t}\n\n\tprivate getPrimaryHeader(headers: KoliBriTableHeaders): KoliBriTableHeaderCell[] {\n\t\tlet primaryHeader: KoliBriTableHeaderCell[] = this.filterHeaderKeys(headers.horizontal ?? []);\n\t\tthis.horizontal = true;\n\t\tif (primaryHeader.length === 0) {\n\t\t\tprimaryHeader = this.filterHeaderKeys(headers.vertical ?? []);\n\t\t\tif (primaryHeader.length > 0) {\n\t\t\t\tthis.horizontal = false;\n\t\t\t}\n\t\t}\n\t\treturn primaryHeader;\n\t}\n\n\tprivate createDataField(data: KoliBriDataType[], headers: KoliBriTableHeaders): KoliBriTableCell[][] {\n\t\theaders.horizontal = Array.isArray(headers?.horizontal) ? headers.horizontal : [];\n\t\theaders.vertical = Array.isArray(headers?.vertical) ? headers.vertical : [];\n\t\tconst primaryHeader = this.getPrimaryHeader(headers);\n\t\tconst maxCols = this.getNumberOfCols(headers.horizontal, data);\n\t\tconst maxRows = this.getNumberOfRows(headers.vertical, data);\n\t\tconst dataField: KoliBriTableCell[][] = [];\n\n\t\tconst rowCount: number[] = [];\n\t\tconst rowSpans: number[][] = [];\n\t\theaders.vertical.forEach((_row, index) => {\n\t\t\trowCount[index] = 0;\n\t\t\trowSpans[index] = [];\n\t\t});\n\n\t\tfor (let i = 0; i < maxRows; i++) {\n\t\t\tconst dataRow: KoliBriTableHeaderCellAndData[] = [];\n\t\t\theaders.vertical.forEach((cells, index) => {\n\t\t\t\tlet sum = 0;\n\t\t\t\trowSpans[index].forEach((value) => (sum += value));\n\t\t\t\tif (sum <= i) {\n\t\t\t\t\tconst rows = cells[i - sum + rowCount[index]];\n\t\t\t\t\tif (typeof rows === 'object') {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...rows,\n\t\t\t\t\t\t\tasTd: false,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: {} as KoliBriDataType,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tlet rowSpan = 1;\n\t\t\t\t\t\tif (typeof rows.rowSpan === 'number' && rows.rowSpan > 1) {\n\t\t\t\t\t\t\trowSpan = rows.rowSpan;\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowSpans[index].push(rowSpan);\n\t\t\t\t\t\tif (typeof rows.colSpan === 'number' && rows.colSpan > 1) {\n\t\t\t\t\t\t\tfor (let k = 1; k < rows.colSpan; k++) {\n\t\t\t\t\t\t\t\trowSpans[index + k].push(rowSpan);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowCount[index]++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tfor (let j = 0; j < maxCols; j++) {\n\t\t\t\tif (this.horizontal === true) {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[j] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[j] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[j].key === 'string' &&\n\t\t\t\t\t\ttypeof data[i] === 'object' &&\n\t\t\t\t\t\tdata[i] !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[j],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: data[i],\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: data[i][primaryHeader[j].key as unknown as string] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[i] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[i] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[i].key === 'string' &&\n\t\t\t\t\t\ttypeof data[j] === 'object' &&\n\t\t\t\t\t\tdata[j] !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[i],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: data[j],\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: data[j][primaryHeader[i].key as unknown as number] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tdataField.push(dataRow);\n\t\t}\n\t\tif (data.length === 0) {\n\t\t\tlet colspan = 0;\n\t\t\tlet rowspan = 0;\n\t\t\tif (Array.isArray(headers.horizontal) && headers.horizontal.length > 0) {\n\t\t\t\theaders.horizontal[0].forEach((col) => {\n\t\t\t\t\tcolspan += col.colSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (Array.isArray(headers.vertical) && headers.vertical.length > 0) {\n\t\t\t\tcolspan -= headers.vertical.length;\n\t\t\t\theaders.vertical[0].forEach((row) => {\n\t\t\t\t\trowspan += row.rowSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tconst emptyCell = {\n\t\t\t\tcolSpan: colspan,\n\t\t\t\tlabel: translate('kol-no-entries'),\n\t\t\t\trender: undefined,\n\t\t\t\trowSpan: Math.max(rowspan, 1),\n\t\t\t};\n\t\t\tif (dataField.length === 0) {\n\t\t\t\tdataField.push([emptyCell]);\n\t\t\t} else {\n\t\t\t\tdataField[0].push(emptyCell);\n\t\t\t}\n\t\t}\n\t\treturn dataField;\n\t}\n\n\tprivate selectDisplayedData(data: KoliBriDataType[], pageSize: number, page: number): KoliBriDataType[] {\n\t\tif (typeof pageSize === 'number' && pageSize > 0 && typeof page === 'number' && page > 0) {\n\t\t\tthis.pageStartSlice = pageSize * (page - 1);\n\t\t\tthis.pageEndSlice = pageSize * page > data.length ? data.length : pageSize * page;\n\t\t\treturn data.slice(this.pageStartSlice, this.pageEndSlice);\n\t\t} else {\n\t\t\tthis.pageStartSlice = 0;\n\t\t\tthis.pageEndSlice = data.length;\n\t\t\treturn data;\n\t\t}\n\t}\n\n\tprivate cellRender(col: KoliBriTableHeaderCellAndData, el?: HTMLElement): void {\n\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\tclearTimeout(CELL_REFS.get(el));\n\t\t\tCELL_REFS.set(\n\t\t\t\tel,\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tclearTimeout(CELL_REFS.get(el));\n\t\t\t\t\tif (typeof col.render === 'function') {\n\t\t\t\t\t\tconst html = col.render(\n\t\t\t\t\t\t\tel,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tasTd: col.asTd,\n\t\t\t\t\t\t\t\tlabel: col.label,\n\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t} as KoliBriTableHeaderCell,\n\t\t\t\t\t\t\tcol.data,\n\t\t\t\t\t\t\tthis.state._data\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (typeof html === 'string') {\n\t\t\t\t\t\t\tel.innerHTML = html;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t}\n\n\tprivate updateSortedData = () => {\n\t\tlet sortedData: KoliBriDataType[] = this.state._data;\n\t\tif (typeof this.sortFunction === 'function') {\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'NOS':\n\t\t\t\t\tsortedData = [...this.state._data];\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]);\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]).reverse();\n\t\t\t}\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst displayedData: KoliBriDataType[] = this.selectDisplayedData(\n\t\t\tthis.state._sortedData,\n\t\t\tthis.showPagination ? this.state._pagination?._pageSize ?? 10 : this.state._sortedData.length,\n\t\t\tthis.state._pagination._page || 1\n\t\t);\n\t\tconst dataField = this.createDataField(displayedData, this.state._headers);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{/*\n\t\t\t\t  - https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable\n\t\t\t\t\t- https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/\n\t\t\t\t\t- https://ux.stackexchange.com/questions/119952/when-is-it-wrong-to-put-tabindex-0-on-non-interactive-content\n\n\t\t\t\t\tNicht <div tabindex=\"0\">\n\n\t\t\t\t\tDOCH!!!\n\t\t\t\t\thttps://dequeuniversity.com/rules/axe/4.4/scrollable-region-focusable?application=AxeChrome\n\t\t\t\t*/}\n\t\t\t\t<div tabindex=\"0\">\n\t\t\t\t\t<table\n\t\t\t\t\t\t// role=\"grid\"\n\t\t\t\t\t\t// aria-readonly=\"true\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: this.state._minWidth,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<caption>{this.state._caption}</caption>\n\t\t\t\t\t\t{Array.isArray(this.state._headers.horizontal) && (\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t{this.state._headers.horizontal.map((cols, rowIdx) => (\n\t\t\t\t\t\t\t\t\t<tr key={`thead-${rowIdx}`}>\n\t\t\t\t\t\t\t\t\t\t{cols.map((col, colIdx) => {\n\t\t\t\t\t\t\t\t\t\t\tif (col.asTd === true) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td // role=\"gridcell\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`thead-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.render === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.cellRender(col as KoliBriTableHeaderCellAndData, el);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={typeof col.render !== 'function' ? col.label : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t></td>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th // role=\"columnheader\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`thead-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscope={typeof col.colSpan === 'number' && col.colSpan > 1 ? 'colgroup' : 'col'}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-sort={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.sort === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? col.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'descending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${this.sortDirections.get(col.sort!) as string}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"w-full flex gap-1 items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'w-full': true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={col.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof col.sort === 'function' && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texportparts=\"button,ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_ariaLabel={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcol.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'fas fa-sort'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'fas fa-sort-up'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'fas fa-sort-down'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (typeof col.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = col.sort;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.updateSortedData();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{/* <tbody aria-atomic=\"true\" aria-live=\"polite\" aria-relevant=\"additions removals\"> */}\n\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t{dataField.map((row, rowIdx) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<tr key={`tbody-${rowIdx}`}>\n\t\t\t\t\t\t\t\t\t\t{row.map((col, colIdx) => {\n\t\t\t\t\t\t\t\t\t\t\tif (col.asTd === false) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th // role=\"rowheader\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`tbody-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscope={typeof col.rowSpan === 'number' && col.rowSpan > 1 ? 'rowgroup' : 'row'}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-sort={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.sort === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? col.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'descending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${this.sortDirections.get(col.sort!) as string}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"w-full flex gap-1 items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'w-full': true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={col.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof col.sort === 'function' && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texportparts=\"button,ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_ariaLabel={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcol.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'fas fa-sort'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'fas fa-sort-up'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'fas fa-sort-down'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (typeof col.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = col.sort;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.updateSortedData();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td // role=\"gridcell\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`tbody-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.render === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.cellRender(col as KoliBriTableHeaderCellAndData, el);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={typeof col.render !== 'function' ? col.label : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t></td>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</tbody>\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && (\n\t\t\t\t\t<div class=\"pagination\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\tEinträge {this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0} bis {this.pageEndSlice} von{' '}\n\t\t\t\t\t\t\t{this.state._pagination._total || (Array.isArray(this.state._data) ? this.state._data.length : 0)} angezeigt\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<kol-pagination\n\t\t\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\t\t\t\t\t\t_total={this.state._pagination._total || this.state._data.length}\n\t\t\t\t\t\t\t></kol-pagination>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","PAGINATION_OPTIONS","CELL_REFS","Map","KolTable","this","horizontal","sortDirections","showPagination","pageStartSlice","pageEndSlice","setSortDirection","sort","direction","clear","set","sortFunction","handlePagination","onClick","event","page","_a","state","_pagination","_on","setState","Object","assign","_page","onChangePage","onChangePageSize","pageSize","_pageSize","beforePatchPagination","nextValue","_nextState","_component","key","updateSortedData","sortedData","_data","get","reverse","_caption","_headers","vertical","_total","_sortedData","validateCaption","value","watchString","required","validateData","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","find","dataTupel","undefined","afterPatch","timeout","setTimeout","clearTimeout","validateHeaders","watchValidator","Set","hooks","beforePatch","headers","forEach","header","cell","sortDirection","_b","validateMinWidth","defaultValue","validatePagination","componentWillLoad","_minWidth","getNumberOfCols","horizontalHeaders","data","max","row","count","col","colSpan","length","getNumberOfRows","verticalHeaders","rowSpan","filterHeaderKeys","primaryHeader","cells","push","getPrimaryHeader","createDataField","maxCols","maxRows","dataField","rowCount","rowSpans","_row","index","i","dataRow","sum","rows","asTd","k","j","label","colspan","rowspan","emptyCell","translate","render","Math","selectDisplayedData","slice","cellRender","el","html","textAlign","width","innerHTML","displayedData","h","Host","tabindex","style","minWidth","map","cols","rowIdx","colIdx","class","ref","scope","exportparts","_ariaLabel","placeholders","colLabel","_icon","_iconOnly","_label","_variant","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign"],"sources":["./src/components/table/style.css?tag=kol-table&mode=default&encapsulation=shadow","./src/components/table/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > div {\n\toverflow-x: auto;\n\toverflow-y: hidden;\n}\n\ntable {\n\twidth: 100%;\n}\n\nth > div {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n\tplace-items: center;\n\tgap: 0.25em;\n}\n\ndiv.pagination {\n\tpadding: 0.5em;\n}\n\ndiv.pagination,\ndiv.pagination > div:last-child {\n\tdisplay: grid;\n\tplace-items: center;\n\tgap: 0.5em;\n}\n\n@media (min-width: 1024px) {\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tgrid-auto-flow: column;\n\t}\n\n\tdiv.pagination kol-pagination {\n\t\tdisplay: flex;\n\t\tgap: calc(4 * var(--kolibri-spacing));\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport {\n\tKoliBriDataType,\n\tKoliBriSortDirection,\n\tKoliBriSortFunction,\n\tKoliBriTableCell,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tKoliBriTablePaginationStates,\n} from '../../types/table';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState, watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriPaginationButtonCallbacks } from '../pagination/types';\nimport { translate } from '../../i18n';\n\ntype KoliBriTableHeaderCellAndData = KoliBriTableHeaderCell & {\n\tdata: KoliBriDataType;\n};\n\n/**\n * API\n */\ntype RequiredProps = {\n\tcaption: string;\n\tdata: Stringified<KoliBriDataType[]>;\n\theaders: Stringified<KoliBriTableHeaders>;\n};\ntype OptionalProps = {\n\tminWidth: string;\n\tpagination: boolean | Stringified<KoliBriTablePaginationProps>;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tcaption: string;\n\tdata: KoliBriDataType[];\n\theaders: KoliBriTableHeaders;\n\tpagination: KoliBriTablePaginationStates;\n\tsortedData: KoliBriDataType[];\n};\ntype OptionalStates = {\n\tminWidth: string;\n} & {\n\tsortDirection: KoliBriSortDirection;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst CELL_REFS = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\n@Component({\n\ttag: 'kol-table',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTable implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t// https://github.com/ionic-team/stencil/issues/2895\n\tprivate horizontal = true;\n\tprivate sortFunction?: KoliBriSortFunction;\n\tprivate sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\n\t/**\n\t * Gibt den  Titel oder eine Legende mit Erklärungen zur Tabelle an.\n\t */\n\t@Prop() public _caption!: string;\n\n\t/**\n\t * Gibt die Daten an, die für die Erstellung der Tabelle verwendet werden.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriDataType[]>;\n\n\t/**\n\t * Gibt die horizontalen und vertikalen Header für die Tabelle an.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Gibt an, die minimale Breite der Tabelle an.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Gibt an, ob die Daten geteilt in Seiten angezeigt wird.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_caption: '',\n\t\t_data: [],\n\t\t_headers: {\n\t\t\thorizontal: [],\n\t\t\tvertical: [],\n\t\t},\n\t\t_pagination: {\n\t\t\t_page: 1,\n\t\t\t_pageSize: 10,\n\t\t\t_total: 0,\n\t\t},\n\t\t_sortedData: [],\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_data')\n\tpublic validateData(value?: Stringified<KoliBriDataType[]>): void {\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\tif (typeof value === 'undefined') {\n\t\t\t\t\tvalue = [];\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriDataType[]>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\tif (Array.isArray(value) && value.find((dataTupel: KoliBriDataType) => !(typeof dataTupel === 'object' && dataTupel !== null)) === undefined) {\n\t\t\t\t\tsetState(this, '_data', value, {\n\t\t\t\t\t\tafterPatch: () => {\n\t\t\t\t\t\t\t// TODO: kein guter Hack (endless loop)\n\t\t\t\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\t\t\t\tthis.updateSortedData();\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t}\n\n\tprivate setSortDirection = (sort: KoliBriSortFunction, direction: KoliBriSortDirection) => {\n\t\t/**\n\t\t * Durch des Clearen, ist es nicht möglich eine Mehr-Spalten-Sortierung\n\t\t * darzustellen. Das wäre der Fall, wenn man ggf. Daten in außerhalb der\n\t\t * Komponente sortiert und diese sortiert von außen rein gibt und der\n\t\t * Sortierungsalgorithmus mehrere Spalten zusammen sortierte.\n\t\t *\n\t\t * Beachte auch col.sort !== this.sortFunction\n\t\t */\n\t\tthis.sortDirections.clear();\n\t\tthis.sortDirections.set(sort, direction);\n\t\tthis.sortFunction = sort;\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_headers')\n\tpublic validateHeaders(value?: Stringified<KoliBriTableHeaders>): void {\n\t\t/**\n\t\t * - es darf maximal ein Header als primary markiert werden (last win)\n\t\t * - der primary-Header entscheidet implizit über _order und _orientation\n\t\t *   - primary-Headers müssen das key-Property setzen\n\t\t *   - nicht primary-Headers müssen das key-Property nicht setzen (wird ignoriert)\n\t\t *   - _order: wird durch den primary-Header geregelt\n\t\t *   - _orientation: wird durch den primary-Header geregelt\n\t\t * - sobald ein Header sortierbar ist, darf es nur noch entweder horizontale\n\t\t *   oder vertikale Header geben, aber nicht mehr beides\n\t\t */\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableHeaders>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\twatchValidator(this, '_headers', (value): boolean => typeof value === 'object' && value !== null, new Set(['KoliBriTableHeaders']), value, {\n\t\t\t\t\thooks: {\n\t\t\t\t\t\tbeforePatch: (nextValue: unknown) => {\n\t\t\t\t\t\t\tconst headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\theaders.vertical?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_minWidth')\n\tpublic validateMinWidth(value?: string): void {\n\t\twatchString(this, '_minWidth', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\tprivate readonly handlePagination: KoliBriPaginationButtonCallbacks = {\n\t\tonClick: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onClick === 'function') {\n\t\t\t\tthis.state._pagination._on.onClick(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePage: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePage === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePage(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePageSize: (event: Event, pageSize: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePageSize === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePageSize(event, pageSize);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_pageSize: pageSize,\n\t\t\t});\n\t\t\tsetState(this, '_pageSize', pageSize);\n\t\t},\n\t};\n\n\tprivate readonly beforePatchPagination: Generic.Element.NextStateHooksCallback = (nextValue, _nextState, _component, key): void => {\n\t\tif (key === '_pagination') {\n\t\t\tthis.showPagination = nextValue === true || nextValue === '' /* true */ || (typeof nextValue === 'object' && nextValue !== null);\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_pagination')\n\tpublic validatePagination(value?: boolean | Stringified<KoliBriTablePaginationProps>): void {\n\t\ttry {\n\t\t\tvalue = parseJson<KoliBriTablePaginationProps>(value);\n\t\t\t// eslint-disable-next-line no-empty\n\t\t} catch (e) {\n\t\t\t// value behält den ursprünglichen Wert\n\t\t}\n\t\twatchValidator(this, '_pagination', () => true, new Set(['boolean', 'KoliBriTablePagination']), value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchPagination,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateData(this._data);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\n\t}\n\n\tprivate getNumberOfCols(horizontalHeaders: KoliBriTableHeaderCell[][], data: KoliBriDataType[]): number {\n\t\tlet max = 0;\n\t\thorizontalHeaders.forEach((row) => {\n\t\t\tlet count = 0;\n\t\t\trow.forEach((col) => (count += col.colSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate getNumberOfRows(verticalHeaders: KoliBriTableHeaderCell[][], data: KoliBriDataType[]): number {\n\t\tlet max = 0;\n\t\tverticalHeaders.forEach((col) => {\n\t\t\tlet count = 0;\n\t\t\tcol.forEach((row) => (count += row.rowSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\t// TODO: hier muss noch die order beachtet werden bei colspan und rowspan\n\tprivate filterHeaderKeys(headers: KoliBriTableHeaderCell[][]): KoliBriTableHeaderCell[] {\n\t\tconst primaryHeader: KoliBriTableHeaderCell[] = [];\n\t\theaders.forEach((cells) => {\n\t\t\tcells.forEach((cell) => {\n\t\t\t\tif (typeof cell.key === 'string') {\n\t\t\t\t\tprimaryHeader.push(cell);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\treturn primaryHeader;\n\t}\n\n\tprivate getPrimaryHeader(headers: KoliBriTableHeaders): KoliBriTableHeaderCell[] {\n\t\tlet primaryHeader: KoliBriTableHeaderCell[] = this.filterHeaderKeys(headers.horizontal ?? []);\n\t\tthis.horizontal = true;\n\t\tif (primaryHeader.length === 0) {\n\t\t\tprimaryHeader = this.filterHeaderKeys(headers.vertical ?? []);\n\t\t\tif (primaryHeader.length > 0) {\n\t\t\t\tthis.horizontal = false;\n\t\t\t}\n\t\t}\n\t\treturn primaryHeader;\n\t}\n\n\tprivate createDataField(data: KoliBriDataType[], headers: KoliBriTableHeaders): KoliBriTableCell[][] {\n\t\theaders.horizontal = Array.isArray(headers?.horizontal) ? headers.horizontal : [];\n\t\theaders.vertical = Array.isArray(headers?.vertical) ? headers.vertical : [];\n\t\tconst primaryHeader = this.getPrimaryHeader(headers);\n\t\tconst maxCols = this.getNumberOfCols(headers.horizontal, data);\n\t\tconst maxRows = this.getNumberOfRows(headers.vertical, data);\n\t\tconst dataField: KoliBriTableCell[][] = [];\n\n\t\tconst rowCount: number[] = [];\n\t\tconst rowSpans: number[][] = [];\n\t\theaders.vertical.forEach((_row, index) => {\n\t\t\trowCount[index] = 0;\n\t\t\trowSpans[index] = [];\n\t\t});\n\n\t\tfor (let i = 0; i < maxRows; i++) {\n\t\t\tconst dataRow: KoliBriTableHeaderCellAndData[] = [];\n\t\t\theaders.vertical.forEach((cells, index) => {\n\t\t\t\tlet sum = 0;\n\t\t\t\trowSpans[index].forEach((value) => (sum += value));\n\t\t\t\tif (sum <= i) {\n\t\t\t\t\tconst rows = cells[i - sum + rowCount[index]];\n\t\t\t\t\tif (typeof rows === 'object') {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...rows,\n\t\t\t\t\t\t\tasTd: false,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: {} as KoliBriDataType,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tlet rowSpan = 1;\n\t\t\t\t\t\tif (typeof rows.rowSpan === 'number' && rows.rowSpan > 1) {\n\t\t\t\t\t\t\trowSpan = rows.rowSpan;\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowSpans[index].push(rowSpan);\n\t\t\t\t\t\tif (typeof rows.colSpan === 'number' && rows.colSpan > 1) {\n\t\t\t\t\t\t\tfor (let k = 1; k < rows.colSpan; k++) {\n\t\t\t\t\t\t\t\trowSpans[index + k].push(rowSpan);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowCount[index]++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tfor (let j = 0; j < maxCols; j++) {\n\t\t\t\tif (this.horizontal === true) {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[j] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[j] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[j].key === 'string' &&\n\t\t\t\t\t\ttypeof data[i] === 'object' &&\n\t\t\t\t\t\tdata[i] !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[j],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: data[i],\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: data[i][primaryHeader[j].key as unknown as string] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[i] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[i] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[i].key === 'string' &&\n\t\t\t\t\t\ttypeof data[j] === 'object' &&\n\t\t\t\t\t\tdata[j] !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[i],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: data[j],\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: data[j][primaryHeader[i].key as unknown as number] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tdataField.push(dataRow);\n\t\t}\n\t\tif (data.length === 0) {\n\t\t\tlet colspan = 0;\n\t\t\tlet rowspan = 0;\n\t\t\tif (Array.isArray(headers.horizontal) && headers.horizontal.length > 0) {\n\t\t\t\theaders.horizontal[0].forEach((col) => {\n\t\t\t\t\tcolspan += col.colSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (Array.isArray(headers.vertical) && headers.vertical.length > 0) {\n\t\t\t\tcolspan -= headers.vertical.length;\n\t\t\t\theaders.vertical[0].forEach((row) => {\n\t\t\t\t\trowspan += row.rowSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tconst emptyCell = {\n\t\t\t\tcolSpan: colspan,\n\t\t\t\tlabel: translate('kol-no-entries'),\n\t\t\t\trender: undefined,\n\t\t\t\trowSpan: Math.max(rowspan, 1),\n\t\t\t};\n\t\t\tif (dataField.length === 0) {\n\t\t\t\tdataField.push([emptyCell]);\n\t\t\t} else {\n\t\t\t\tdataField[0].push(emptyCell);\n\t\t\t}\n\t\t}\n\t\treturn dataField;\n\t}\n\n\tprivate selectDisplayedData(data: KoliBriDataType[], pageSize: number, page: number): KoliBriDataType[] {\n\t\tif (typeof pageSize === 'number' && pageSize > 0 && typeof page === 'number' && page > 0) {\n\t\t\tthis.pageStartSlice = pageSize * (page - 1);\n\t\t\tthis.pageEndSlice = pageSize * page > data.length ? data.length : pageSize * page;\n\t\t\treturn data.slice(this.pageStartSlice, this.pageEndSlice);\n\t\t} else {\n\t\t\tthis.pageStartSlice = 0;\n\t\t\tthis.pageEndSlice = data.length;\n\t\t\treturn data;\n\t\t}\n\t}\n\n\tprivate cellRender(col: KoliBriTableHeaderCellAndData, el?: HTMLElement): void {\n\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\tclearTimeout(CELL_REFS.get(el));\n\t\t\tCELL_REFS.set(\n\t\t\t\tel,\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tclearTimeout(CELL_REFS.get(el));\n\t\t\t\t\tif (typeof col.render === 'function') {\n\t\t\t\t\t\tconst html = col.render(\n\t\t\t\t\t\t\tel,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tasTd: col.asTd,\n\t\t\t\t\t\t\t\tlabel: col.label,\n\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t} as KoliBriTableHeaderCell,\n\t\t\t\t\t\t\tcol.data,\n\t\t\t\t\t\t\tthis.state._data\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (typeof html === 'string') {\n\t\t\t\t\t\t\tel.innerHTML = html;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t}\n\n\tprivate updateSortedData = () => {\n\t\tlet sortedData: KoliBriDataType[] = this.state._data;\n\t\tif (typeof this.sortFunction === 'function') {\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'NOS':\n\t\t\t\t\tsortedData = [...this.state._data];\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]);\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]).reverse();\n\t\t\t}\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst displayedData: KoliBriDataType[] = this.selectDisplayedData(\n\t\t\tthis.state._sortedData,\n\t\t\tthis.showPagination ? this.state._pagination?._pageSize ?? 10 : this.state._sortedData.length,\n\t\t\tthis.state._pagination._page || 1\n\t\t);\n\t\tconst dataField = this.createDataField(displayedData, this.state._headers);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{/*\n\t\t\t\t  - https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable\n\t\t\t\t\t- https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/\n\t\t\t\t\t- https://ux.stackexchange.com/questions/119952/when-is-it-wrong-to-put-tabindex-0-on-non-interactive-content\n\n\t\t\t\t\tNicht <div tabindex=\"0\">\n\n\t\t\t\t\tDOCH!!!\n\t\t\t\t\thttps://dequeuniversity.com/rules/axe/4.4/scrollable-region-focusable?application=AxeChrome\n\t\t\t\t*/}\n\t\t\t\t<div tabindex=\"0\">\n\t\t\t\t\t<table\n\t\t\t\t\t\t// role=\"grid\"\n\t\t\t\t\t\t// aria-readonly=\"true\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: this.state._minWidth,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<caption>{this.state._caption}</caption>\n\t\t\t\t\t\t{Array.isArray(this.state._headers.horizontal) && (\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t{this.state._headers.horizontal.map((cols, rowIdx) => (\n\t\t\t\t\t\t\t\t\t<tr key={`thead-${rowIdx}`}>\n\t\t\t\t\t\t\t\t\t\t{cols.map((col, colIdx) => {\n\t\t\t\t\t\t\t\t\t\t\tif (col.asTd === true) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td // role=\"gridcell\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`thead-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.render === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.cellRender(col as KoliBriTableHeaderCellAndData, el);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={typeof col.render !== 'function' ? col.label : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t></td>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th // role=\"columnheader\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`thead-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscope={typeof col.colSpan === 'number' && col.colSpan > 1 ? 'colgroup' : 'col'}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-sort={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.sort === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? col.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'descending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${this.sortDirections.get(col.sort!) as string}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"w-full flex gap-1 items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'w-full': true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={col.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof col.sort === 'function' && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texportparts=\"button,ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_ariaLabel={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcol.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'fas fa-sort'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'fas fa-sort-up'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'fas fa-sort-down'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (typeof col.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = col.sort;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.updateSortedData();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{/* <tbody aria-atomic=\"true\" aria-live=\"polite\" aria-relevant=\"additions removals\"> */}\n\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t{dataField.map((row, rowIdx) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<tr key={`tbody-${rowIdx}`}>\n\t\t\t\t\t\t\t\t\t\t{row.map((col, colIdx) => {\n\t\t\t\t\t\t\t\t\t\t\tif (col.asTd === false) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th // role=\"rowheader\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`tbody-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscope={typeof col.rowSpan === 'number' && col.rowSpan > 1 ? 'rowgroup' : 'row'}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-sort={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.sort === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? col.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'descending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${this.sortDirections.get(col.sort!) as string}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"w-full flex gap-1 items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'w-full': true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={col.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof col.sort === 'function' && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texportparts=\"button,ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_ariaLabel={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcol.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'fas fa-sort'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'fas fa-sort-up'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'fas fa-sort-down'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (typeof col.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = col.sort;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.updateSortedData();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td // role=\"gridcell\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`tbody-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.render === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.cellRender(col as KoliBriTableHeaderCellAndData, el);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={typeof col.render !== 'function' ? col.label : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t></td>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</tbody>\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && (\n\t\t\t\t\t<div class=\"pagination\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\tEinträge {this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0} bis {this.pageEndSlice} von{' '}\n\t\t\t\t\t\t\t{this.state._pagination._total || (Array.isArray(this.state._data) ? this.state._data.length : 0)} angezeigt\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<kol-pagination\n\t\t\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\t\t\t\t\t\t_total={this.state._pagination._total || this.state._data.length}\n\t\t\t\t\t\t\t></kol-pagination>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as o,g as e}from"./index-50adf9a0.js";import{d as s,b as l,f as a,u as n}from"./a11y.tipps-a876ebb7.js";import{a as r,w as d,s as h,e as b,d as c,k as u}from"./prop.validators-dd337216.js";import{a as f}from"./i18n-e297566c.js";import{L as p}from"./dev.utils-ec1c1b88.js";import"./index-599f5430.js";import"./reuse-9dd1192b.js";const g=new Set(['"left", "right"']),k=new Set(['"left", "right"']),v=new Set([...g,...k]),m=(t,e,o)=>{r(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),v,o)},w=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}:host *{box-sizing:border-box}:host kol-icon{color:inherit}:host kol-span-wc{display:grid;place-items:center;width:100%}:host kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}:host button{margin:0;min-height:44px;min-width:44px;padding:0}:host a,:host button,:host input,:host select,:host textarea{cursor:pointer}:host a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}:host a{display:inline-flex;place-items:baseline}:host button{background-color:transparent;border-width:0}kol-button-group-wc{display:inline-flex;gap:calc(2 * var(--kolibri-spacing));flex-wrap:wrap}kol-button-group-wc button{border:0;border-bottom-color:transparent;border-bottom-style:solid;border-bottom-width:var(--kolibri-spacing)}kol-button-group-wc button[aria-selected='true'],kol-button-group-wc button:focus{border-bottom-color:var(--kolibri-color-accent)}.close-button{font-size:50%;height:fit-content;left:-3em;position:relative;top:0.25em}div[role='tabpanel']{height:100%}div.grid{height:100%}:host>.tabs-align-right{display:grid;grid-template-columns:1fr auto}:host>.tabs-align-right kol-button-group-wc{display:grid;order:2}:host>.tabs-align-left{display:grid;grid-template-columns:auto 1fr}:host>.tabs-align-left kol-button-group-wc{display:grid;order:0}:host>.tabs-align-bottom{display:grid;grid-template-rows:1fr auto}:host>.tabs-align-bottom kol-button-group-wc{order:2}:host>.tabs-align-bottom kol-button-group-wc>div{display:flex}:host>.tabs-align-bottom>kol-button-group-wc>div>div:first-child{margin:0px 1em 0px 0px}:host>.tabs-align-bottom>kol-button-group-wc>div>div{margin:0px 1em}:host>.tabs-align-top{display:grid;grid-template-rows:auto 1fr}:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-top kol-button-group-wc>div{display:flex}:host>.tabs-align-top>kol-button-group-wc>div>div:first-child{margin:0px 1em 0px 0px}:host>.tabs-align-top>kol-button-group-wc>div>div{margin:0px 1em}:host>div{display:grid}:host>div.tabs-align-left{grid-template-columns:auto 1fr}:host>div.tabs-align-right{grid-template-columns:1fr auto}:host>.tabs-align-left kol-button-group-wc,:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-bottom kol-button-group-wc,:host>.tabs-align-right kol-button-group-wc{order:1}:host>div.tabs-align-left kol-button-group-wc>div,:host>div.tabs-align-left kol-button-group-wc>div>div,:host>div.tabs-align-right kol-button-group-wc>div,:host>div.tabs-align-right kol-button-group-wc>div>div{display:grid}:host>div.tabs-align-left kol-button-group-wc>div>div kol-button-wc,:host>div.tabs-align-right kol-button-group-wc>div>div kol-button-wc{width:100%}:host>div.tabs-align-bottom kol-button-group-wc div,:host>div.tabs-align-top kol-button-group-wc div{display:flex;flex-wrap:wrap}",y=class{constructor(e){t(this,e),this.onCreateLabel=`${f("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,o)=>{if(o>0){if(e+o<t.length)return t[e+o]._disabled?this.nextPossibleTabIndex(t,e,o+1):e+o}else if(o<0&&e+o>=0)return t[e+o]._disabled?this.nextPossibleTabIndex(t,e,o-1):e+o;return e},this.onKeyDown=t=>{const e=setTimeout((()=>{clearTimeout(e);let o=null;switch(t.key){case"ArrowRight":o=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":o=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==o&&this.onSelect(t,o,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},this.onMouseDown=t=>{t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,o=!0,i)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===o){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,i||t);t=i||t,o=!1}if(!1===o){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,i||t);s("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,o,i)=>{let a,s;a="_selected"===i?t:this.state._selected,s="_tabs"===i?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,s))},this.handleTabPanels=()=>{var t,e,o;if(this.tabPanelHost instanceof HTMLDivElement)for(let i=this.tabPanelHost.children.length;i<this.state._tabs.length;i++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`tab-${i}`),a.setAttribute("id",`tabpanel-${i}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${i}`),a.appendChild(s),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[i])&&(null===(o=this.host)||void 0===o||o.children[i].setAttribute("slot",`tabpanel-slot-${i}`))}},this.onCreate=t=>{var e,o;t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(o=this.state._on)||void 0===o||o.onCreate(t))},this._ariaLabel=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_ariaLabel:"…",_selected:0,_tabs:[],_tabsAlign:"top"}}renderButtonGroup(){return i("kol-button-group-wc",{role:"tablist","aria-label":this.state._ariaLabel,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>i("kol-button-wc",{_disabled:t._disabled,_icon:t._icon,_iconOnly:t._iconOnly,_label:t._label&&t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&i("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(o,null,i("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._tabsAlign}`]:!0}},this.renderButtonGroup(),i("div",{ref:this.catchTabPanelHost})))}validateAriaLabel(t){d(this,"_ariaLabel",t,{required:!0}),l(t)}validateOn(t){if("object"==typeof t&&null!==t){a("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:p.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:p.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),h(this,"_on",e)}}validateSelected(t){b(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){c(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),n("KolTabs",this.state._tabs.length)}validateTabsAlign(t){m(this,"_tabsAlign",t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateTabsAlign(this._tabsAlign)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,e,o=!1){var i,a;this._selected=e,"function"==typeof(null===(i=this._on)||void 0===i?void 0:i.onSelect)&&(null===(a=this._on)||void 0===a||a.onSelect(t,e)),!0===o&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=u(`button#tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return e(this)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};y.style={default:w};export{y as kol_tabs};
+import{r as t,h as i,H as o,g as e}from"./index-50adf9a0.js";import{d as s,b as l,f as a,u as n}from"./a11y.tipps-a876ebb7.js";import{a as r,w as d,s as b,e as h,d as c,k as u}from"./prop.validators-dd337216.js";import{a as f}from"./i18n-e297566c.js";import{L as p}from"./dev.utils-ec1c1b88.js";import"./index-599f5430.js";import"./reuse-9dd1192b.js";const g=new Set(['"left", "right"']),k=new Set(['"left", "right"']),v=new Set([...g,...k]),m=(t,e,i)=>{r(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),v,i)},w=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0;margin:0;min-height:44px;min-width:44px;padding:0}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}kol-button-group-wc{display:inline-flex;gap:calc(2 * var(--kolibri-spacing));flex-wrap:wrap}kol-button-group-wc button{border:0;border-bottom-color:transparent;border-bottom-style:solid;border-bottom-width:var(--kolibri-spacing)}kol-button-group-wc button[aria-selected='true'],kol-button-group-wc button:focus{border-bottom-color:var(--kolibri-color-accent)}.close-button{font-size:50%;height:fit-content;left:-3em;position:relative;top:0.25em}div[role='tabpanel']{height:100%}div.grid{height:100%}:host>.tabs-align-right{display:grid;grid-template-columns:1fr auto}:host>.tabs-align-right kol-button-group-wc{display:grid;order:2}:host>.tabs-align-left{display:grid;grid-template-columns:auto 1fr}:host>.tabs-align-left kol-button-group-wc{display:grid;order:0}:host>.tabs-align-bottom{display:grid;grid-template-rows:1fr auto}:host>.tabs-align-bottom kol-button-group-wc{order:2}:host>.tabs-align-bottom kol-button-group-wc>div{display:flex}:host>.tabs-align-bottom>kol-button-group-wc>div>div:first-child{margin:0px 1em 0px 0px}:host>.tabs-align-bottom>kol-button-group-wc>div>div{margin:0px 1em}:host>.tabs-align-top{display:grid;grid-template-rows:auto 1fr}:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-top kol-button-group-wc>div{display:flex}:host>.tabs-align-top>kol-button-group-wc>div>div:first-child{margin:0px 1em 0px 0px}:host>.tabs-align-top>kol-button-group-wc>div>div{margin:0px 1em}:host>div{display:grid}:host>div.tabs-align-left{grid-template-columns:auto 1fr}:host>div.tabs-align-right{grid-template-columns:1fr auto}:host>.tabs-align-left kol-button-group-wc,:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-bottom kol-button-group-wc,:host>.tabs-align-right kol-button-group-wc{order:1}:host>div.tabs-align-left kol-button-group-wc>div,:host>div.tabs-align-left kol-button-group-wc>div>div,:host>div.tabs-align-right kol-button-group-wc>div,:host>div.tabs-align-right kol-button-group-wc>div>div{display:grid}:host>div.tabs-align-left kol-button-group-wc>div>div kol-button-wc,:host>div.tabs-align-right kol-button-group-wc>div>div kol-button-wc{width:100%}:host>div.tabs-align-bottom kol-button-group-wc div,:host>div.tabs-align-top kol-button-group-wc div{display:flex;flex-wrap:wrap}",y=class{constructor(e){t(this,e),this.onCreateLabel=`${f("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,i)=>{if(i>0){if(e+i<t.length)return t[e+i]._disabled?this.nextPossibleTabIndex(t,e,i+1):e+i}else if(i<0&&e+i>=0)return t[e+i]._disabled?this.nextPossibleTabIndex(t,e,i-1):e+i;return e},this.onKeyDown=t=>{const e=setTimeout((()=>{clearTimeout(e);let i=null;switch(t.key){case"ArrowRight":i=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":i=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==i&&this.onSelect(t,i,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},this.onMouseDown=t=>{t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,i=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===i){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,i=!1}if(!1===i){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);s("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,i,o)=>{let a,s;a="_selected"===o?t:this.state._selected,s="_tabs"===o?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,s))},this.handleTabPanels=()=>{var t,e,i;if(this.tabPanelHost instanceof HTMLDivElement)for(let o=this.tabPanelHost.children.length;o<this.state._tabs.length;o++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`tab-${o}`),a.setAttribute("id",`tabpanel-${o}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${o}`),a.appendChild(s),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[o])&&(null===(i=this.host)||void 0===i||i.children[o].setAttribute("slot",`tabpanel-slot-${o}`))}},this.onCreate=t=>{var e,i;t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(i=this.state._on)||void 0===i||i.onCreate(t))},this._ariaLabel=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_ariaLabel:"…",_selected:0,_tabs:[],_tabsAlign:"top"}}renderButtonGroup(){return i("kol-button-group-wc",{role:"tablist","aria-label":this.state._ariaLabel,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>i("kol-button-wc",{_disabled:t._disabled,_icon:t._icon,_iconOnly:t._iconOnly,_label:t._label&&t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&i("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(o,null,i("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._tabsAlign}`]:!0}},this.renderButtonGroup(),i("div",{ref:this.catchTabPanelHost})))}validateAriaLabel(t){d(this,"_ariaLabel",t,{required:!0}),l(t)}validateOn(t){if("object"==typeof t&&null!==t){a("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:p.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:p.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),b(this,"_on",e)}}validateSelected(t){h(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){c(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),n("KolTabs",this.state._tabs.length)}validateTabsAlign(t){m(this,"_tabsAlign",t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateTabsAlign(this._tabsAlign)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,e,i=!1){var o,a;this._selected=e,"function"==typeof(null===(o=this._on)||void 0===o?void 0:o.onSelect)&&(null===(a=this._on)||void 0===a||a.onSelect(t,e)),!0===i&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=u(`button#tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return e(this)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};y.style={default:w};export{y as kol_tabs};