@public-ui/components 3.0.4-rc.1 → 3.0.4-rc.2

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNav","constructor","hostRef","this","state","_label","_links","render","h","key","class","map","link","index","KolLinkWcTag","Object","assign","validateLabel","value","_oldValue","initial","removeNavLabel","required","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.scss?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-skip-nav {\n\t\t&__list {\n\t\t\tdisplay: grid;\n\t\t\tplace-items: center;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&__list-item {\n\t\t\theight: 0;\n\t\t}\n\n\t\t.kol-link {\n\t\t\tposition: absolute;\n\t\t\tleft: to-rem(-99999);\n\t\t\tz-index: 9999999;\n\n\t\t\tline-height: 1;\n\n\t\t\t&:focus {\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tposition: unset;\n\t\t\t\tleft: unset;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements SkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-skip-nav\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-skip-nav__list\">\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class=\"kol-skip-nav__list-item\" key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag {...link}></KolLinkWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;8QAAA,MAAMA,EAAkB,y0J,MCgBXC,EAAU,MAPvB,WAAAC,CAAAC,G,UAkCiBC,KAAAC,MAAuB,CACtCC,OAAQ,GACRC,OAAQ,GA2BT,CAvDO,MAAAC,GACN,OACCC,EAAK,OAAAC,IAAA,2CAAAC,MAAM,eAAc,aAAaP,KAAKC,MAAMC,QAChDG,EAAA,MAAAC,IAAA,2CAAIC,MAAM,sBACRP,KAAKC,MAAME,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIE,MAAM,0BAA0BD,IAAKI,GACxCL,EAACM,EAAiBC,OAAAC,OAAA,GAAAJ,Q,CAyBlB,aAAAK,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAelB,KAAKC,MAAMC,O,CAE3BY,EAAcd,KAAMe,EAAO,CAC1BI,SAAU,OAEXC,EAAYpB,KAAKC,MAAMC,O,CAIjB,aAAAmB,CAAcN,GACpBO,EAAc,aAActB,KAAMe,E,CAG5B,iBAAAQ,GACNvB,KAAKc,cAAcd,KAAKE,OAAQsB,UAAW,MAC3CxB,KAAKqB,cAAcrB,KAAKG,O,CAGlB,oBAAAsB,GACNP,EAAelB,KAAKC,MAAMC,O","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolSkipNav","constructor","hostRef","this","state","_label","_links","render","h","key","class","map","link","index","KolLinkWcTag","Object","assign","validateLabel","value","_oldValue","initial","removeNavLabel","required","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.scss?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-skip-nav {\n\t\t&__list {\n\t\t\tdisplay: grid;\n\t\t\tplace-items: center;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&__list-item {\n\t\t\theight: 0;\n\t\t}\n\n\t\t.kol-link {\n\t\t\tposition: absolute;\n\t\t\tleft: to-rem(-99999);\n\t\t\tz-index: 9999999;\n\n\t\t\tline-height: 1;\n\n\t\t\t&:focus {\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tposition: unset;\n\t\t\t\tleft: unset;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements SkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-skip-nav\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-skip-nav__list\">\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class=\"kol-skip-nav__list-item\" key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag {...link}></KolLinkWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;8QAAA,MAAMA,EAAkB,mzK,MCgBXC,EAAU,MAPvB,WAAAC,CAAAC,G,UAkCiBC,KAAAC,MAAuB,CACtCC,OAAQ,GACRC,OAAQ,GA2BT,CAvDO,MAAAC,GACN,OACCC,EAAK,OAAAC,IAAA,2CAAAC,MAAM,eAAc,aAAaP,KAAKC,MAAMC,QAChDG,EAAA,MAAAC,IAAA,2CAAIC,MAAM,sBACRP,KAAKC,MAAME,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIE,MAAM,0BAA0BD,IAAKI,GACxCL,EAACM,EAAiBC,OAAAC,OAAA,GAAAJ,Q,CAyBlB,aAAAK,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAelB,KAAKC,MAAMC,O,CAE3BY,EAAcd,KAAMe,EAAO,CAC1BI,SAAU,OAEXC,EAAYpB,KAAKC,MAAMC,O,CAIjB,aAAAmB,CAAcN,GACpBO,EAAc,aAActB,KAAMe,E,CAG5B,iBAAAQ,GACNvB,KAAKc,cAAcd,KAAKE,OAAQsB,UAAW,MAC3CxB,KAAKqB,cAAcrB,KAAKG,O,CAGlB,oBAAAsB,GACNP,EAAelB,KAAKC,MAAMC,O","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"kol-spin.entry.esm.js","sources":["src/schema/props/variant/spin.ts","src/components/spin/style.scss?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\n/**\n * Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n */\nconst spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const;\nexport type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number];\n\n/**\n * Defines the variant of spin navigation.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value),\n\t\tnew Set(spinVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use './cycle' as *;\n@use './dot' as *;\n\n@layer kol-component {\n\t.kol-spin {\n\t\t&__spinner {\n\t\t\tdisplay: block;\n\t\t\tposition: relative;\n\t\t\tpadding: to-rem(2);\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { validateLabel, validateShow, validateSpinVariant } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { LabelPropType, ShowPropType, SpinAPI, SpinStates, SpinVariantPropType } from '../../schema';\nimport clsx from 'clsx';\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"kol-spin__loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--1\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--2\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--3\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--neutral\"></span>\n\t\t\t\t</>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements SpinAPI {\n\tprivate showToggled = false;\n\tprivate readonly translateActionRunning = translate('kol-action-running');\n\tprivate readonly translateActionDone = translate('kol-action-done');\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-spin\" aria-live=\"polite\">\n\t\t\t\t{this.state._label && (this.state._show || this.showToggled) && <span class=\"visually-hidden\">{this.state._label}</span>}\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={this.state._label ?? this.translateActionRunning}\n\t\t\t\t\t\tclass={clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`)}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={this.state._label ?? this.translateActionDone} aria-busy=\"false\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: SpinStates = {\n\t\t_variant: 'dot',\n\t\t_label: undefined,\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-spin.entry.esm.js","sources":["src/schema/props/variant/spin.ts","src/components/spin/style.scss?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\n/**\n * Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n */\nconst spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const;\nexport type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number];\n\n/**\n * Defines the variant of spin navigation.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value),\n\t\tnew Set(spinVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use './cycle' as *;\n@use './dot' as *;\n\n@layer kol-component {\n\t.kol-spin {\n\t\t&__spinner {\n\t\t\tdisplay: block;\n\t\t\tposition: relative;\n\t\t\tpadding: to-rem(2);\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { validateLabel, validateShow, validateSpinVariant } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { LabelPropType, ShowPropType, SpinAPI, SpinStates, SpinVariantPropType } from '../../schema';\nimport clsx from 'clsx';\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"kol-spin__loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--1\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--2\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--3\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--neutral\"></span>\n\t\t\t\t</>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements SpinAPI {\n\tprivate showToggled = false;\n\tprivate readonly translateActionRunning = translate('kol-action-running');\n\tprivate readonly translateActionDone = translate('kol-action-done');\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-spin\" aria-live=\"polite\">\n\t\t\t\t{this.state._label && (this.state._show || this.showToggled) && <span class=\"visually-hidden\">{this.state._label}</span>}\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={this.state._label ?? this.translateActionRunning}\n\t\t\t\t\t\tclass={clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`)}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={this.state._label ?? this.translateActionDone} aria-busy=\"false\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: SpinStates = {\n\t\t_variant: 'dot',\n\t\t_label: undefined,\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"names":[],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["spinVariantPropTypeOptions","validateSpinVariant","component","value","watchValidator","includes","Set","defaultStyleCss","renderSpin","variant","h","class","name","Fragment","KolSpin","constructor","hostRef","this","showToggled","translateActionRunning","translate","translateActionDone","_show","_variant","state","_label","undefined","render","Host","key","_a","clsx","role","_b","validateShow","validateLabel","validateVariant","componentWillLoad"],"sources":["src/schema/props/variant/spin.ts","src/components/spin/style.scss?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\n/**\n * Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n */\nconst spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const;\nexport type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number];\n\n/**\n * Defines the variant of spin navigation.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value),\n\t\tnew Set(spinVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use './cycle' as *;\n@use './dot' as *;\n\n@layer kol-component {\n\t.kol-spin {\n\t\t&__spinner {\n\t\t\tdisplay: block;\n\t\t\tposition: relative;\n\t\t\tpadding: to-rem(2);\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { validateLabel, validateShow, validateSpinVariant } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { LabelPropType, ShowPropType, SpinAPI, SpinStates, SpinVariantPropType } from '../../schema';\nimport clsx from 'clsx';\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"kol-spin__loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--1\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--2\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--3\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--neutral\"></span>\n\t\t\t\t</>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements SpinAPI {\n\tprivate showToggled = false;\n\tprivate readonly translateActionRunning = translate('kol-action-running');\n\tprivate readonly translateActionDone = translate('kol-action-done');\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-spin\" aria-live=\"polite\">\n\t\t\t\t{this.state._label && (this.state._show || this.showToggled) && <span class=\"visually-hidden\">{this.state._label}</span>}\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={this.state._label ?? this.translateActionRunning}\n\t\t\t\t\t\tclass={clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`)}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={this.state._label ?? this.translateActionDone} aria-busy=\"false\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: SpinStates = {\n\t\t_variant: 'dot',\n\t\t_label: undefined,\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;8RASA,MAAMA,EAA6B,CAAC,QAAS,MAAO,QAW7C,MAAMC,EAAsB,CAACC,EAAsCC,KACzEC,EACCF,EACA,YACCC,UAAiBA,IAAU,UAAYH,EAA2BK,SAASF,IAC5E,IAAIG,IAAIN,GACRG,EACA,EC3BF,MAAMI,EAAkB,ogQCQxB,SAASC,EAAWC,GACnB,OAAQA,GACP,IAAK,QACJ,OAAOC,EAAM,QAAAC,MAAM,qBACpB,IAAK,OACJ,OAAOD,EAAM,QAAAE,KAAK,WACnB,QACC,OACCF,EAAAG,EAAA,KACCH,EAAM,QAAAC,MAAM,2DACZD,EAAM,QAAAC,MAAM,2DACZD,EAAM,QAAAC,MAAM,2DACZD,EAAA,QAAMC,MAAM,kEAIjB,C,MASaG,EAAO,MAPpB,WAAAC,CAAAC,G,UAQSC,KAAWC,YAAG,MACLD,KAAAE,uBAAyBC,EAAU,sBACnCH,KAAAI,oBAAsBD,EAAU,mBA0BFH,KAAKK,MAAa,MAUlDL,KAAQM,SAAyB,MAEhCN,KAAAO,MAAoB,CACnCD,SAAU,MACVE,OAAQC,UAwBT,CA9DO,MAAAC,G,QACN,OACCjB,EAACkB,EAAI,CAAAC,IAAA,2CAAClB,MAAM,WAAU,YAAW,UAC/BM,KAAKO,MAAMC,SAAWR,KAAKO,MAAMF,OAASL,KAAKC,cAAgBR,EAAM,QAAAmB,IAAA,2CAAAlB,MAAM,mBAAmBM,KAAKO,MAAMC,QACzGR,KAAKO,MAAMF,MACXZ,EACW,2BAAM,cACJoB,EAAAb,KAAKO,MAAMC,UAAU,MAAAK,SAAA,EAAAA,EAAAb,KAAKE,uBACtCR,MAAOoB,EAAK,oBAAqB,sBAAsBd,KAAKO,MAAMD,YAClES,KAAK,SAEJxB,EAAWS,KAAKO,MAAMD,WAGxBN,KAAKC,aAAeR,EAAkB,sBAAAuB,EAAAhB,KAAKO,MAAMC,UAAU,MAAAQ,SAAA,EAAAA,EAAAhB,KAAKI,oBAAmB,YAAY,QAAQW,KAAK,U,CA4BzG,YAAAE,CAAa/B,GACnBc,KAAKC,YAAcD,KAAKO,MAAMF,QAAU,MAAQL,KAAKK,QAAU,MAC/DY,EAAajB,KAAMd,E,CAIb,aAAAgC,CAAchC,GACpBgC,EAAclB,KAAMd,E,CAId,eAAAiC,CAAgBjC,GACtBF,EAAoBgB,KAAMd,E,CAGpB,iBAAAkC,GACNpB,KAAKiB,aAAajB,KAAKK,OACvBL,KAAKmB,gBAAgBnB,KAAKM,UAC1BN,KAAKkB,cAAclB,KAAKQ,O","ignoreList":[]}
+{"version":3,"names":["spinVariantPropTypeOptions","validateSpinVariant","component","value","watchValidator","includes","Set","defaultStyleCss","renderSpin","variant","h","class","name","Fragment","KolSpin","constructor","hostRef","this","showToggled","translateActionRunning","translate","translateActionDone","_show","_variant","state","_label","undefined","render","Host","key","_a","clsx","role","_b","validateShow","validateLabel","validateVariant","componentWillLoad"],"sources":["src/schema/props/variant/spin.ts","src/components/spin/style.scss?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\n/**\n * Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n */\nconst spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const;\nexport type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number];\n\n/**\n * Defines the variant of spin navigation.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value),\n\t\tnew Set(spinVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use './cycle' as *;\n@use './dot' as *;\n\n@layer kol-component {\n\t.kol-spin {\n\t\t&__spinner {\n\t\t\tdisplay: block;\n\t\t\tposition: relative;\n\t\t\tpadding: to-rem(2);\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { validateLabel, validateShow, validateSpinVariant } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { LabelPropType, ShowPropType, SpinAPI, SpinStates, SpinVariantPropType } from '../../schema';\nimport clsx from 'clsx';\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"kol-spin__loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--1\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--2\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--3\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--neutral\"></span>\n\t\t\t\t</>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements SpinAPI {\n\tprivate showToggled = false;\n\tprivate readonly translateActionRunning = translate('kol-action-running');\n\tprivate readonly translateActionDone = translate('kol-action-done');\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-spin\" aria-live=\"polite\">\n\t\t\t\t{this.state._label && (this.state._show || this.showToggled) && <span class=\"visually-hidden\">{this.state._label}</span>}\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={this.state._label ?? this.translateActionRunning}\n\t\t\t\t\t\tclass={clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`)}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={this.state._label ?? this.translateActionDone} aria-busy=\"false\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: SpinStates = {\n\t\t_variant: 'dot',\n\t\t_label: undefined,\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;8RASA,MAAMA,EAA6B,CAAC,QAAS,MAAO,QAW7C,MAAMC,EAAsB,CAACC,EAAsCC,KACzEC,EACCF,EACA,YACCC,UAAiBA,IAAU,UAAYH,EAA2BK,SAASF,IAC5E,IAAIG,IAAIN,GACRG,EACA,EC3BF,MAAMI,EAAkB,8+QCQxB,SAASC,EAAWC,GACnB,OAAQA,GACP,IAAK,QACJ,OAAOC,EAAM,QAAAC,MAAM,qBACpB,IAAK,OACJ,OAAOD,EAAM,QAAAE,KAAK,WACnB,QACC,OACCF,EAAAG,EAAA,KACCH,EAAM,QAAAC,MAAM,2DACZD,EAAM,QAAAC,MAAM,2DACZD,EAAM,QAAAC,MAAM,2DACZD,EAAA,QAAMC,MAAM,kEAIjB,C,MASaG,EAAO,MAPpB,WAAAC,CAAAC,G,UAQSC,KAAWC,YAAG,MACLD,KAAAE,uBAAyBC,EAAU,sBACnCH,KAAAI,oBAAsBD,EAAU,mBA0BFH,KAAKK,MAAa,MAUlDL,KAAQM,SAAyB,MAEhCN,KAAAO,MAAoB,CACnCD,SAAU,MACVE,OAAQC,UAwBT,CA9DO,MAAAC,G,QACN,OACCjB,EAACkB,EAAI,CAAAC,IAAA,2CAAClB,MAAM,WAAU,YAAW,UAC/BM,KAAKO,MAAMC,SAAWR,KAAKO,MAAMF,OAASL,KAAKC,cAAgBR,EAAM,QAAAmB,IAAA,2CAAAlB,MAAM,mBAAmBM,KAAKO,MAAMC,QACzGR,KAAKO,MAAMF,MACXZ,EACW,2BAAM,cACJoB,EAAAb,KAAKO,MAAMC,UAAU,MAAAK,SAAA,EAAAA,EAAAb,KAAKE,uBACtCR,MAAOoB,EAAK,oBAAqB,sBAAsBd,KAAKO,MAAMD,YAClES,KAAK,SAEJxB,EAAWS,KAAKO,MAAMD,WAGxBN,KAAKC,aAAeR,EAAkB,sBAAAuB,EAAAhB,KAAKO,MAAMC,UAAU,MAAAQ,SAAA,EAAAA,EAAAhB,KAAKI,oBAAmB,YAAY,QAAQW,KAAK,U,CA4BzG,YAAAE,CAAa/B,GACnBc,KAAKC,YAAcD,KAAKO,MAAMF,QAAU,MAAQL,KAAKK,QAAU,MAC/DY,EAAajB,KAAMd,E,CAIb,aAAAgC,CAAchC,GACpBgC,EAAclB,KAAMd,E,CAId,eAAAiC,CAAgBjC,GACtBF,EAAoBgB,KAAMd,E,CAGpB,iBAAAkC,GACNpB,KAAKiB,aAAajB,KAAKK,OACvBL,KAAKmB,gBAAgBnB,KAAKM,UAC1BN,KAAKkB,cAAclB,KAAKQ,O","ignoreList":[]}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSplitButton","constructor","hostRef","this","catchPrimaryRef","ref","primaryButtonWcRef","clickButtonHandler","onClick","event","stopPropagation","_a","_on","_b","_value","clickToggleHandler","toggleDropdown","state","Object","assign","_show","handleOnClose","_disabled","_hideLabel","_tooltipAlign","_type","_variant","getValue","kolFocus","render","i18nDropdownLabel","h","key","class","KolButtonWcTag","clsx","_customClass","length","_accessKey","_ariaControls","_ariaDescription","_ariaExpanded","_ariaSelected","_icons","_id","_label","_name","_role","_shortKey","_syncValueBySelector","_buttonVariant","translate","KolPopoverWcTag","onClose","_align","closePopup","Promise","resolve"],"sources":["src/components/split-button/style.scss?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../popover/style.scss' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-split-button {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\n\t\t&__root {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&__button {\n\t\t\tflex-grow: 1;\n\t\t\ttext-align: left;\n\t\t}\n\n\t\t.kol-popover {\n\t\t\t&__content {\n\t\t\t\tmargin-top: to-rem(2);\n\t\t\t}\n\n\t\t\t&__arrow {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tSplitButtonProps,\n\tSplitButtonStates,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolButtonWcTag, KolPopoverWcTag } from '../../core/component-names';\nimport clsx from 'clsx';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {\n\tprivate primaryButtonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchPrimaryRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.primaryButtonWcRef = ref;\n\t};\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.primaryButtonWcRef?.kolFocus();\n\t}\n\n\tprivate readonly clickButtonHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\t// TODO: this._on is not validated\n\t\t\t\tthis._on?.onClick(event, this._value);\n\t\t\t}\n\t\t},\n\t};\n\tprivate readonly clickToggleHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\t\t\tthis.toggleDropdown();\n\t\t},\n\t};\n\n\tprivate readonly toggleDropdown = () => {\n\t\tthis.state = { ...this.state, _show: !this.state._show };\n\t};\n\n\tprivate readonly handleOnClose = () => {\n\t\tthis.state = { ...this.state, _show: false };\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst i18nDropdownLabel = 'kol-split-button-dropdown-label';\n\t\treturn (\n\t\t\t<div class=\"kol-split-button\">\n\t\t\t\t<div class=\"kol-split-button__root\">\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-split-button__button', {\n\t\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tref={this.catchPrimaryRef}\n\t\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t\t_id={this._id}\n\t\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t\t_name={this._name}\n\t\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t\t_role={this._role}\n\t\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_type={this._type}\n\t\t\t\t\t\t_value={this._value}\n\t\t\t\t\t\t_buttonVariant={this._variant}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t<div class=\"kol-split-button__horizontal-line\"></div>\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-split-button__secondary-button\"\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons=\"codicon codicon-triangle-down\"\n\t\t\t\t\t\t_label={this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}\n\t\t\t\t\t\t_on={this.clickToggleHandler}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t</div>\n\t\t\t\t<KolPopoverWcTag _show={this.state._show} _on={{ onClose: this.handleOnClose }} _align=\"bottom\">\n\t\t\t\t\t<slot />\n\t\t\t\t</KolPopoverWcTag>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Closes the dropdown.\n\t */\n\t@Method()\n\tpublic async closePopup() {\n\t\tthis.handleOnClose();\n\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: SplitButtonStates = {\n\t\t_show: false,\n\t};\n}\n"],"mappings":";;;8OAAA,MAAMA,EAAkB,kpN,MCoCXC,EAAc,MAT3B,WAAAC,CAAAC,G,UAYkBC,KAAAC,gBAAmBC,IACnCF,KAAKG,mBAAqBD,CAAG,EAoBbF,KAAAI,mBAAqB,CACrCC,QAAUC,I,QACTA,EAAMC,kBAEN,WAAWC,EAAAR,KAAKS,OAAK,MAAAD,SAAA,SAAAA,EAAAH,WAAY,WAAY,EAE5CK,EAAAV,KAAKS,OAAG,MAAAC,SAAA,SAAAA,EAAEL,QAAQC,EAAON,KAAKW,O,IAIhBX,KAAAY,mBAAqB,CACrCP,QAAUC,IACTA,EAAMC,kBACNP,KAAKa,gBAAgB,GAINb,KAAca,eAAG,KACjCb,KAAKc,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQhB,KAAKc,OAAO,CAAAG,OAAQjB,KAAKc,MAAMG,OAAO,EAGxCjB,KAAakB,cAAG,KAChClB,KAAKc,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQhB,KAAKc,OAAK,CAAEG,MAAO,OAAO,EA+F9BjB,KAASmB,UAAa,MAOtBnB,KAAUoB,WAAa,MA8CvBpB,KAAaqB,cAA0B,MAKvCrB,KAAKsB,MAAwB,SAU7BtB,KAAQuB,SAA2B,SAElCvB,KAAAc,MAA2B,CAC1CG,MAAO,MAER,CA1MO,cAAMO,GACZ,OAAOxB,KAAKW,M,CAON,cAAMc,G,aACNjB,EAAAR,KAAKG,sBAAoB,MAAAK,SAAA,SAAAA,EAAAiB,W,CA4BzB,MAAAC,GACN,MAAMC,EAAoB,kCAC1B,OACCC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACVF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,0BACVF,EAACG,EACA,CAAAF,IAAA,2CAAAC,MAAOE,EAAK,2BAA4B,CACvC,CAAChC,KAAKuB,UAAqBvB,KAAKuB,WAAa,SAC7C,CAACvB,KAAKiC,cAAyBjC,KAAKuB,WAAa,iBAAmBvB,KAAKiC,eAAiB,UAAYjC,KAAKiC,aAAaC,OAAS,IAElIhC,IAAKF,KAAKC,gBACVkC,WAAYnC,KAAKmC,WACjBC,cAAepC,KAAKoC,cACpBC,iBAAkBrC,KAAKqC,iBACvBC,cAAetC,KAAKsC,cACpBC,cAAevC,KAAKuC,cACpBN,aAAcjC,KAAKiC,aACnBd,UAAWnB,KAAKmB,UAChBqB,OAAQxC,KAAKwC,OACbC,IAAKzC,KAAKyC,IACVrB,WAAYpB,KAAKoB,WACjBsB,OAAQ1C,KAAK0C,OACbC,MAAO3C,KAAK2C,MACZlC,IAAKT,KAAKI,mBACVwC,MAAO5C,KAAK4C,MACZC,UAAW7C,KAAK6C,UAChBC,qBAAsB9C,KAAK8C,qBAC3BzB,cAAerB,KAAKqB,cACpBC,MAAOtB,KAAKsB,MACZX,OAAQX,KAAKW,OACboC,eAAgB/C,KAAKuB,WAEtBK,EAAK,OAAAC,IAAA,2CAAAC,MAAM,sCACXF,EAACG,EAAc,CAAAF,IAAA,2CACdC,MAAM,qCACNX,UAAWnB,KAAKmB,UAChBC,WAAU,KACVoB,OAAO,gCACPE,OAAQ1C,KAAKc,MAAMG,MAAQ+B,EAAU,GAAGrB,WAA6BqB,EAAU,GAAGrB,UAClFlB,IAAKT,KAAKY,sBAGZgB,EAACqB,EAAe,CAAApB,IAAA,2CAACZ,MAAOjB,KAAKc,MAAMG,MAAOR,IAAK,CAAEyC,QAASlD,KAAKkB,eAAiBiC,OAAO,UACtFvB,EAAQ,QAAAC,IAAA,8C,CAUL,gBAAMuB,GACZpD,KAAKkB,gBAEL,OAAOmC,QAAQC,S","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolSplitButton","constructor","hostRef","this","catchPrimaryRef","ref","primaryButtonWcRef","clickButtonHandler","onClick","event","stopPropagation","_a","_on","_b","_value","clickToggleHandler","toggleDropdown","state","Object","assign","_show","handleOnClose","_disabled","_hideLabel","_tooltipAlign","_type","_variant","getValue","kolFocus","render","i18nDropdownLabel","h","key","class","KolButtonWcTag","clsx","_customClass","length","_accessKey","_ariaControls","_ariaDescription","_ariaExpanded","_ariaSelected","_icons","_id","_label","_name","_shortKey","_syncValueBySelector","_buttonVariant","translate","KolPopoverWcTag","onClose","_align","closePopup","Promise","resolve"],"sources":["src/components/split-button/style.scss?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../popover/style.scss' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-split-button {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\n\t\t&__root {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&__button {\n\t\t\tflex-grow: 1;\n\t\t\ttext-align: left;\n\t\t}\n\n\t\t.kol-popover {\n\t\t\t&__content {\n\t\t\t\tmargin-top: to-rem(2);\n\t\t\t}\n\n\t\t\t&__arrow {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tSplitButtonProps,\n\tSplitButtonStates,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolButtonWcTag, KolPopoverWcTag } from '../../core/component-names';\nimport clsx from 'clsx';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {\n\tprivate primaryButtonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchPrimaryRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.primaryButtonWcRef = ref;\n\t};\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.primaryButtonWcRef?.kolFocus();\n\t}\n\n\tprivate readonly clickButtonHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\t// TODO: this._on is not validated\n\t\t\t\tthis._on?.onClick(event, this._value);\n\t\t\t}\n\t\t},\n\t};\n\tprivate readonly clickToggleHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation(); // stop propagation to avoid triggering the event that closes the popover\n\t\t\tthis.toggleDropdown();\n\t\t},\n\t};\n\n\tprivate readonly toggleDropdown = () => {\n\t\tthis.state = { ...this.state, _show: !this.state._show };\n\t};\n\n\tprivate readonly handleOnClose = () => {\n\t\tthis.state = { ...this.state, _show: false };\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst i18nDropdownLabel = 'kol-split-button-dropdown-label';\n\t\treturn (\n\t\t\t<div class=\"kol-split-button\">\n\t\t\t\t<div class=\"kol-split-button__root\">\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-split-button__button', {\n\t\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tref={this.catchPrimaryRef}\n\t\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t\t_id={this._id}\n\t\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t\t_name={this._name}\n\t\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_type={this._type}\n\t\t\t\t\t\t_value={this._value}\n\t\t\t\t\t\t_buttonVariant={this._variant}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t<div class=\"kol-split-button__horizontal-line\"></div>\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-split-button__secondary-button\"\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons=\"codicon codicon-triangle-down\"\n\t\t\t\t\t\t_label={this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}\n\t\t\t\t\t\t_on={this.clickToggleHandler}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t</div>\n\t\t\t\t<KolPopoverWcTag _show={this.state._show} _on={{ onClose: this.handleOnClose }} _align=\"bottom\">\n\t\t\t\t\t<slot />\n\t\t\t\t</KolPopoverWcTag>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Closes the dropdown.\n\t */\n\t@Method()\n\tpublic async closePopup() {\n\t\tthis.handleOnClose();\n\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t *\n\t * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: SplitButtonStates = {\n\t\t_show: false,\n\t};\n}\n"],"mappings":";;;8OAAA,MAAMA,EAAkB,4nO,MCoCXC,EAAc,MAT3B,WAAAC,CAAAC,G,UAYkBC,KAAAC,gBAAmBC,IACnCF,KAAKG,mBAAqBD,CAAG,EAoBbF,KAAAI,mBAAqB,CACrCC,QAAUC,I,QACTA,EAAMC,kBAEN,WAAWC,EAAAR,KAAKS,OAAK,MAAAD,SAAA,SAAAA,EAAAH,WAAY,WAAY,EAE5CK,EAAAV,KAAKS,OAAG,MAAAC,SAAA,SAAAA,EAAEL,QAAQC,EAAON,KAAKW,O,IAIhBX,KAAAY,mBAAqB,CACrCP,QAAUC,IACTA,EAAMC,kBACNP,KAAKa,gBAAgB,GAINb,KAAca,eAAG,KACjCb,KAAKc,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQhB,KAAKc,OAAO,CAAAG,OAAQjB,KAAKc,MAAMG,OAAO,EAGxCjB,KAAakB,cAAG,KAChClB,KAAKc,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQhB,KAAKc,OAAK,CAAEG,MAAO,OAAO,EA8F9BjB,KAASmB,UAAa,MAOtBnB,KAAUoB,WAAa,MAgDvBpB,KAAaqB,cAA0B,MAKvCrB,KAAKsB,MAAwB,SAU7BtB,KAAQuB,SAA2B,SAElCvB,KAAAc,MAA2B,CAC1CG,MAAO,MAER,CA3MO,cAAMO,GACZ,OAAOxB,KAAKW,M,CAON,cAAMc,G,aACNjB,EAAAR,KAAKG,sBAAoB,MAAAK,SAAA,SAAAA,EAAAiB,W,CA4BzB,MAAAC,GACN,MAAMC,EAAoB,kCAC1B,OACCC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACVF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,0BACVF,EAACG,EACA,CAAAF,IAAA,2CAAAC,MAAOE,EAAK,2BAA4B,CACvC,CAAChC,KAAKuB,UAAqBvB,KAAKuB,WAAa,SAC7C,CAACvB,KAAKiC,cAAyBjC,KAAKuB,WAAa,iBAAmBvB,KAAKiC,eAAiB,UAAYjC,KAAKiC,aAAaC,OAAS,IAElIhC,IAAKF,KAAKC,gBACVkC,WAAYnC,KAAKmC,WACjBC,cAAepC,KAAKoC,cACpBC,iBAAkBrC,KAAKqC,iBACvBC,cAAetC,KAAKsC,cACpBC,cAAevC,KAAKuC,cACpBN,aAAcjC,KAAKiC,aACnBd,UAAWnB,KAAKmB,UAChBqB,OAAQxC,KAAKwC,OACbC,IAAKzC,KAAKyC,IACVrB,WAAYpB,KAAKoB,WACjBsB,OAAQ1C,KAAK0C,OACbC,MAAO3C,KAAK2C,MACZlC,IAAKT,KAAKI,mBACVwC,UAAW5C,KAAK4C,UAChBC,qBAAsB7C,KAAK6C,qBAC3BxB,cAAerB,KAAKqB,cACpBC,MAAOtB,KAAKsB,MACZX,OAAQX,KAAKW,OACbmC,eAAgB9C,KAAKuB,WAEtBK,EAAK,OAAAC,IAAA,2CAAAC,MAAM,sCACXF,EAACG,EAAc,CAAAF,IAAA,2CACdC,MAAM,qCACNX,UAAWnB,KAAKmB,UAChBC,WAAU,KACVoB,OAAO,gCACPE,OAAQ1C,KAAKc,MAAMG,MAAQ8B,EAAU,GAAGpB,WAA6BoB,EAAU,GAAGpB,UAClFlB,IAAKT,KAAKY,sBAGZgB,EAACoB,EAAe,CAAAnB,IAAA,2CAACZ,MAAOjB,KAAKc,MAAMG,MAAOR,IAAK,CAAEwC,QAASjD,KAAKkB,eAAiBgC,OAAO,UACtFtB,EAAQ,QAAAC,IAAA,8C,CAUL,gBAAMsB,GACZnD,KAAKkB,gBAEL,OAAOkC,QAAQC,S","ignoreList":[]}

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

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

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,g as s}from"./index-8LH1C-22.js";import{t as i}from"./i18n-CKkAYzG_.js";import{t as o,b as n,u as l,v as a,d as c,j as b}from"./component-names-CkE54Ym7.js";import{d,K as h}from"./events-CoPFQEiC.js";import"./common-Kl71BXoz.js";import"./i18n-CjhRejiw.js";const r=class{constructor(e){t(this,e),this.tableSettings={columns:[]},this.errorMessage=null,this.translateTableSettings=i("kol-table-settings"),this.translateTableSettingsCancel=i("kol-table-settings-cancel"),this.translateTableSettingsApply=i("kol-table-settings-apply"),this.translateErrorAllInvisible=i("kol-table-settings-error-all-invisible"),this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.sortColumnsByPosition(e.columns)})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}sortColumnsByPosition(e){return[...e].sort(((e,t)=>e.position-t.position))}moveColumn(e,t){const s=[...this.tableSettings.columns],i=s.findIndex((t=>t.key===e)),a="up"===t?i-1:i+1,n=s[i],l=s[a],o=s.map((e=>e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e));this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s))})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map((s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s))})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();const s=this.tableSettings.columns.some((e=>e.visible));s?this.host&&(this.errorMessage=null,d(this.host,h.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=this.translateErrorAllInvisible}render(){const t=[...this.tableSettings.columns].sort(((e,t)=>e.position-t.position));return e(b,{key:"b930aa153c7461f4a57b937c0156cf84e60edd2d",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},e("div",{key:"cdd88e4955f8433fe19101a8ac9905332b917975",class:"kol-table-settings__content"},e(o,{key:"fd70365f0f8ef1c4455d0c093c82a35474372f21",_label:this.translateTableSettings,_level:0}),this.errorMessage&&e(n,{key:"08bac933be1eb8e724882ee7b53370e408a1de26",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),e("form",{key:"946f7a022247721eb75479661a4b0d1ddab8b52c",onSubmit:this.handleSubmit.bind(this)},e("div",{key:"413b8b20e47111b90b93b938d7623b6987c755c5",class:"kol-table-settings__columns-container"},e("div",{key:"68bf65989d9f1d790cac1d18431c3c32a4f828de",class:"kol-table-settings__columns"},t.map(((s,n)=>e("div",{key:s.key,class:"kol-table-settings__column"},e(l,{_checked:s.visible,_label:i("kol-table-settings-show-column",{placeholders:{column:s.label}}),_value:!0,_hideLabel:!0,_on:{onInput:(e,t)=>this.handleVisibilityChange(s.key,t)}}),e("span",null,s.label),e(a,{_hideLabel:!0,_value:s.width,_label:i("kol-table-settings-column-width",{placeholders:{column:s.label}}),_min:1,_on:{onInput:(e,t)=>this.handleWidthChange(s.key,t)}}),e(c,{_icons:"codicon codicon-arrow-up",_label:i("kol-table-settings-move-up",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"up")},_disabled:0===n,"data-testid":"table-settings-move-up"}),e(c,{_icons:"codicon codicon-arrow-down",_label:i("kol-table-settings-move-down",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"down")},_disabled:n===t.length-1,"data-testid":"table-settings-move-down"})))))),e("div",{key:"2859d138a7052eaebb3b13a56609e362d8dd8304",class:"kol-table-settings__actions"},e(c,{key:"d83024f7231425239b24665b3845735ecbd60604",_label:this.translateTableSettingsCancel,_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),e(c,{key:"783f2d4cc52b8d14060f4dbd125d8d5ad5f38fdc",_label:this.translateTableSettingsApply,_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return s(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{r as kol_table_settings_wc};
+import{r as t,h as e,g as s}from"./index-DeYD98_2.js";import{t as i}from"./i18n-C7ZsbK5l.js";import{t as a,b as l,u as n,v as o,d as b,j as c}from"./component-names-CkE54Ym7.js";import{d,K as h}from"./events-CoPFQEiC.js";import"./common-zXZUsQ7l.js";import"./i18n-ZF6JbdVP.js";const r=class{constructor(e){t(this,e),this.tableSettings={columns:[]},this.errorMessage=null,this.translateTableSettings=i("kol-table-settings"),this.translateTableSettingsCancel=i("kol-table-settings-cancel"),this.translateTableSettingsApply=i("kol-table-settings-apply"),this.translateErrorAllInvisible=i("kol-table-settings-error-all-invisible"),this.translateColumnNotHidable=i("kol-table-settings-column-not-hidable"),this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.sortColumnsByPosition(e.columns)})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}sortColumnsByPosition(e){return[...e].sort((e,t)=>e.position-t.position)}moveColumn(e,t){const s=[...this.tableSettings.columns],i=s.findIndex(t=>t.key===e),a="up"===t?i-1:i+1,n=s[i],l=s[a],o=s.map(e=>e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e);this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e&&!1!==s.hidable?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s)})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s)})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();const s=this.tableSettings.columns.some(e=>e.visible);s?this.host&&(this.errorMessage=null,d(this.host,h.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=this.translateErrorAllInvisible}render(){const t=[...this.tableSettings.columns].sort((e,t)=>e.position-t.position);return e(c,{key:"ba6964d7d0015211d50a68536b36be024ee0f418",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},e("div",{key:"ee4075b1511fa1bec77a7068ff91e7e6a6f26c67",class:"kol-table-settings__content"},e(a,{key:"63f1aba0d47cfd03725a3d458f0b98d9b739022e",_label:this.translateTableSettings,_level:0}),this.errorMessage&&e(l,{key:"6824b98b2b9b62260330053fe79ca0ee30bc15d7",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),e("form",{key:"2bf2773cacaee3f90007ea3b8b1971732b67b4b5",onSubmit:this.handleSubmit.bind(this)},e("div",{key:"3970a3988ebb05498fda0b485282f134b2fbc513",class:"kol-table-settings__columns-container"},e("div",{key:"3e7e9f1726a3eb9a605563d8cb23966f500c4ec5",class:"kol-table-settings__columns"},t.map((s,a)=>e("div",{key:s.key,class:"kol-table-settings__column"},e(n,{_checked:s.visible,_label:`${s.label}${!1===s.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===s.hidable,_on:{onInput:(e,t)=>this.handleVisibilityChange(s.key,t)}}),e("span",null,s.label),e(o,{_hideLabel:!0,_value:s.width,_label:i("kol-table-settings-column-width",{placeholders:{column:s.label}}),_min:1,_on:{onInput:(e,t)=>this.handleWidthChange(s.key,t)}}),e(b,{_icons:"codicon codicon-arrow-up",_label:i("kol-table-settings-move-up",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"up")},_disabled:0===a,"data-testid":"table-settings-move-up"}),e(b,{_icons:"codicon codicon-arrow-down",_label:i("kol-table-settings-move-down",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"down")},_disabled:a===t.length-1,"data-testid":"table-settings-move-down"}))))),e("div",{key:"f762fa692848ff9161a9a7f8db4e1d4c36d059c8",class:"kol-table-settings__actions"},e(b,{key:"42401475bdf959ddee26b8489d775bb481ce5727",_label:this.translateTableSettingsCancel,_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),e(b,{key:"c24e37a9d6a589d6a395156adfb574f70116c075",_label:this.translateTableSettingsApply,_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return s(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{r as kol_table_settings_wc};

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

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