@public-ui/components 3.0.2-rc.0 → 3.0.2-rc.2

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-2f6c3929.js";import{D as t,i}from"./index-ebe5a881.js";import{t as o}from"./i18n-260f0fe9.js";import{c as a,v as l}from"./color-1228dab7.js";import"./i18n-45224cc3.js";const r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-kolibri {\n    display: inline-block;\n    max-height: 100%;\n  }\n  .kol-kolibri__text {\n    font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n}",s=r,d=class{constructor(e){n(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=a(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else t("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const n=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e("svg",{key:"1945fdcb58c141c29f0d1c8a50916c355b6d3803",class:"kol-kolibri",role:"img","aria-label":o("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:n},e("path",{key:"c274327a042aff7394850483cf48e2e0f5009f16",d:"M353 322L213 304V434L353 322Z"}),e("path",{key:"d2dcf55ef33f5fa55cbf780c53eb78b318c5ee1a",d:"M209 564V304L149 434L209 564Z"}),e("path",{key:"94bee6eb94b3a33895d6ad1e42e10ff5f579dd34",d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{key:"19a48f90c9f6d24391a2b5bdaaec0205ef6b346d",d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{key:"e8e04281d24bd01ef48b98a7396603c31557bb81",d:"M353 318L35 36L213 300L353 318Z"}),e("path",{key:"ce6865b2cb1f6e3d1782e257e9ba409daa48074d",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{key:"01776673c11b8869494caa3df7fafc847f8e8276",class:"kol-kolibri__text",x:"250",y:"525",fill:n},"KoliBri"))}validateColor(e){l(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){i(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};d.style={default:s};export{d as kol_kolibri};
+import{r as n,h as e}from"./index-b4e1ceff.js";import{D as t,i}from"./index-ebe5a881.js";import{t as o}from"./i18n-260f0fe9.js";import{c as a,v as l}from"./color-1228dab7.js";import"./i18n-45224cc3.js";const r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-kolibri {\n    display: inline-block;\n    max-height: 100%;\n  }\n  .kol-kolibri__text {\n    font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n}",s=r,d=class{constructor(e){n(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=a(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else t("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const n=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e("svg",{key:"1945fdcb58c141c29f0d1c8a50916c355b6d3803",class:"kol-kolibri",role:"img","aria-label":o("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:n},e("path",{key:"c274327a042aff7394850483cf48e2e0f5009f16",d:"M353 322L213 304V434L353 322Z"}),e("path",{key:"d2dcf55ef33f5fa55cbf780c53eb78b318c5ee1a",d:"M209 564V304L149 434L209 564Z"}),e("path",{key:"94bee6eb94b3a33895d6ad1e42e10ff5f579dd34",d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{key:"19a48f90c9f6d24391a2b5bdaaec0205ef6b346d",d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{key:"e8e04281d24bd01ef48b98a7396603c31557bb81",d:"M353 318L35 36L213 300L353 318Z"}),e("path",{key:"ce6865b2cb1f6e3d1782e257e9ba409daa48074d",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{key:"01776673c11b8869494caa3df7fafc847f8e8276",class:"kol-kolibri__text",x:"250",y:"525",fill:n},"KoliBri"))}validateColor(e){l(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){i(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};d.style={default:s};export{d as kol_kolibri};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-2f6c3929.js";import{f as t}from"./component-names-553d8bfa.js";const i="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    margin: auto;\n    width: 100%;\n  }\n}",o=i,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}async kolFocus(){var n;await(null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"c43e9c9834dff4e54aa321ef464b9e6f95019dc5",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:"button",_shortKey:this._shortKey,_target:this._target,_tooltipAlign:this._tooltipAlign,_buttonVariant:this._variant},e("slot",{key:"c2d514cb0c22f129364fb59ec873c91f826043fe",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:o};export{a as kol_link_button};
+import{r as n,h as e}from"./index-b4e1ceff.js";import{f as t}from"./component-names-0657b355.js";const i="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    margin: auto;\n    width: 100%;\n  }\n}",o=i,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}async kolFocus(){var n;await(null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"c43e9c9834dff4e54aa321ef464b9e6f95019dc5",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:"button",_shortKey:this._shortKey,_target:this._target,_tooltipAlign:this._tooltipAlign,_buttonVariant:this._variant},e("slot",{key:"c2d514cb0c22f129364fb59ec873c91f826043fe",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:o};export{a as kol_link_button};

package/dist/kolibri/kol-link-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as s,g as e}from"./index-2f6c3929.js";import{w as a,B as n,I as d,D as h,m as o}from"./index-ebe5a881.js";import{o as l}from"./ariaCurrentService-6fe36ebc.js";import{d as r,K as c}from"./events-bad0a075.js";import{n as f}from"./dev.utils-ca3cce4b.js";import{a as b,e as u}from"./component-names-553d8bfa.js";import{t as v}from"./i18n-260f0fe9.js";import{v as p,a as m,b as k,c as _}from"./access-and-short-key-f743a5c4.js";import{c as j}from"./clsx-09a06a12.js";import"./bem-e4c3a2e6.js";import{K as g}from"./Span-78135d4f.js";import{v as y}from"./href-d9ccbbdf.js";import{v as x,a as A,b as w,c as C,d as V}from"./link-variant-47605ebe.js";import{v as K}from"./custom-class-d73b81b1.js";import{v as L}from"./disabled-e1038f54.js";import{v as O}from"./hide-label-8b3a8709.js";import{v as I}from"./icons-a9c52ed8.js";import{a as T}from"./label-bf9966d0.js";import{v as D}from"./tooltip-align-465a8590.js";import"./i18n-45224cc3.js";import"./browser-f629a56a.js";import"./tslib.es6-1173d062.js";import"./Icon-a2f91629.js";import"./markdown-f827f2ac.js";import"./InternalUnderlinedBadgeText-2d939629.js";import"./isArray-7a60fa7f.js";import"./isObject-ffcbbb76.js";import"./align-d2572387.js";const S=["date","location","page","step","time","true","false"],$=(t,i)=>{a(t,"_ariaCurrentValue",(t=>"string"==typeof t&&S.includes(t)),new Set([`AriaCurrentValue {${S.join(", ")}`]),i,{defaultValue:"page"})},B=(t,a)=>{n(t,"_ariaOwns",a,{defaultValue:void 0})},E=(t,a)=>{n(t,"_download",a)},H=(t,a)=>{"object"==typeof a&&"function"==typeof(null==a?void 0:a.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:a}))},R=(t,a)=>{n(t,"_target",a)},q=class{constructor(t){i(this,t),this.internalDescriptionById=f(),this.catchRef=t=>{this.anchorRef=t},this.onClick=t=>{var a,i;!0===this.state._disabled?t.preventDefault():("function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(t.preventDefault(),d(t,this.anchorRef),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._href)),this.host&&r(this.host,c.click,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,a={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||h("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:t,tagAttrs:a}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaOwns=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._linkVariant=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._buttonVariant="normal",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async kolFocus(){var t;null===(t=this.anchorRef)||void 0===t||t.focus()}render(){var a,i;const{isExternal:e,tagAttrs:l}=this.getRenderValues(),r=o(this.state._label),n=Boolean(null===(i=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===i?void 0:i.length);return t(s,{key:"9fd3ab61de61d27594a243f8b0eeb4ac2f303eec"},t("a",Object.assign({key:"2c1ecc6b981fa646bd9b2f16aaf13c586deb503d",ref:this.catchRef},l,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-describedby":n?this.internalDescriptionById:void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${e?` (${v("kol-open-link-in-tab")})`:""}`:void 0,class:j("kol-link",{"kol-link--disabled":!0===this.state._disabled,"kol-link--external-link":e,"kol-link--hide-label":!0===this.state._hideLabel,[`kol-link--${this.state._buttonVariant}`]:"button"===this.state._role&&"custom"!==this.state._buttonVariant,[`kol-link--${this.state._linkVariant}`]:this.state._linkVariant,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0})},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),t(g,{key:"e5ef2f2e1c87c31ecc1ef6407f096d167350c0f2",class:"kol-link__text",badgeText:this.state._accessKey||this.state._shortKey,icons:this.state._icons,hideLabel:this.state._hideLabel,label:r?"":this.state._label||this.state._href},t("slot",{key:"60d906388bd1cf763c2bd4631945e3926c478086",name:"expert",slot:"expert"})),e&&t(u,{key:"137e738b086d43c2cbc619b2a57b980609e79bc1",class:"kol-link__icon",_label:this.state._hideLabel?"":v("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),t(b,{key:"e0064f0ca3a2e2b579ca411d9734ef8e4beaaa75","aria-hidden":"true",class:"kol-link__tooltip",hidden:r||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}),n&&t("span",{key:"3563c0639768272faaabcba6ff98327c5997f69b",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}validateAccessKey(t){p(this,t),m(t,this._shortKey)}validateAriaCurrentValue(t){$(this,t)}validateAriaDescription(t){x(this,t)}validateAriaExpanded(t){A(this,t)}validateAriaOwns(t){B(this,t)}validateCustomClass(t){K(this,t)}validateDisabled(t){L(this,t)}validateDownload(t){E(this,t)}validateHideLabel(t){O(this,t)}validateHref(t){y(this,t,{required:!0})}validateIcons(t){I(this,t)}validateLabel(t){T(this,t)}validateLinkVariant(t){w(this,t)}validateOn(t){H(this,t)}validateRole(t){C(this,t)}validateShortKey(t){k(this,t),m(this._accessKey,t)}validateTabIndex(t){_(this,t)}validateTarget(t){R(this,t)}validateTooltipAlign(t){D(this,t)}validateButtonVariant(t){V(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateLinkVariant(this._linkVariant),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.validateButtonVariant(this._buttonVariant),this.unsubscribeOnLocationChange=l((t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0})),m(this._accessKey,this._shortKey)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}get host(){return e(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_linkVariant:["validateLinkVariant"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_buttonVariant:["validateButtonVariant"]}}};export{q as kol_link_wc};
+import{r as i,h as t,H as s,g as e}from"./index-b4e1ceff.js";import{w as a,B as n,I as d,D as h,m as o}from"./index-ebe5a881.js";import{o as l}from"./ariaCurrentService-6fe36ebc.js";import{d as r,K as c}from"./events-bad0a075.js";import{n as f}from"./dev.utils-d42aaf74.js";import{a as b,e as u}from"./component-names-0657b355.js";import{t as v}from"./i18n-260f0fe9.js";import{v as p,a as m,b as k,c as _}from"./access-and-short-key-f743a5c4.js";import{c as j}from"./clsx-09a06a12.js";import"./bem-e4c3a2e6.js";import{K as g}from"./Span-f9dd0734.js";import{v as y}from"./href-d9ccbbdf.js";import{v as x,a as A,b as w,c as C,d as V}from"./link-variant-47605ebe.js";import{v as K}from"./custom-class-d73b81b1.js";import{v as L}from"./disabled-e1038f54.js";import{v as O}from"./hide-label-8b3a8709.js";import{v as I}from"./icons-a9c52ed8.js";import{a as T}from"./label-bf9966d0.js";import{v as D}from"./tooltip-align-465a8590.js";import"./i18n-45224cc3.js";import"./browser-f629a56a.js";import"./tslib.es6-1173d062.js";import"./Icon-64aecdb3.js";import"./markdown-f827f2ac.js";import"./InternalUnderlinedBadgeText-b24e9dc5.js";import"./isArray-7a60fa7f.js";import"./isObject-ffcbbb76.js";import"./align-d2572387.js";const S=["date","location","page","step","time","true","false"],$=(t,i)=>{a(t,"_ariaCurrentValue",(t=>"string"==typeof t&&S.includes(t)),new Set([`AriaCurrentValue {${S.join(", ")}`]),i,{defaultValue:"page"})},B=(t,a)=>{n(t,"_ariaOwns",a,{defaultValue:void 0})},E=(t,a)=>{n(t,"_download",a)},H=(t,a)=>{"object"==typeof a&&"function"==typeof(null==a?void 0:a.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:a}))},R=(t,a)=>{n(t,"_target",a)},q=class{constructor(t){i(this,t),this.internalDescriptionById=f(),this.catchRef=t=>{this.anchorRef=t},this.onClick=t=>{var a,i;!0===this.state._disabled?t.preventDefault():("function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(t.preventDefault(),d(t,this.anchorRef),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._href)),this.host&&r(this.host,c.click,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,a={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||h("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:t,tagAttrs:a}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaOwns=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._linkVariant=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._buttonVariant="normal",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async kolFocus(){var t;null===(t=this.anchorRef)||void 0===t||t.focus()}render(){var a,i;const{isExternal:e,tagAttrs:l}=this.getRenderValues(),r=o(this.state._label),n=Boolean(null===(i=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===i?void 0:i.length);return t(s,{key:"9fd3ab61de61d27594a243f8b0eeb4ac2f303eec"},t("a",Object.assign({key:"2c1ecc6b981fa646bd9b2f16aaf13c586deb503d",ref:this.catchRef},l,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-describedby":n?this.internalDescriptionById:void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${e?` (${v("kol-open-link-in-tab")})`:""}`:void 0,class:j("kol-link",{"kol-link--disabled":!0===this.state._disabled,"kol-link--external-link":e,"kol-link--hide-label":!0===this.state._hideLabel,[`kol-link--${this.state._buttonVariant}`]:"button"===this.state._role&&"custom"!==this.state._buttonVariant,[`kol-link--${this.state._linkVariant}`]:this.state._linkVariant,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0})},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),t(g,{key:"e5ef2f2e1c87c31ecc1ef6407f096d167350c0f2",class:"kol-link__text",badgeText:this.state._accessKey||this.state._shortKey,icons:this.state._icons,hideLabel:this.state._hideLabel,label:r?"":this.state._label||this.state._href},t("slot",{key:"60d906388bd1cf763c2bd4631945e3926c478086",name:"expert",slot:"expert"})),e&&t(u,{key:"137e738b086d43c2cbc619b2a57b980609e79bc1",class:"kol-link__icon",_label:this.state._hideLabel?"":v("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),t(b,{key:"e0064f0ca3a2e2b579ca411d9734ef8e4beaaa75","aria-hidden":"true",class:"kol-link__tooltip",hidden:r||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}),n&&t("span",{key:"3563c0639768272faaabcba6ff98327c5997f69b",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}validateAccessKey(t){p(this,t),m(t,this._shortKey)}validateAriaCurrentValue(t){$(this,t)}validateAriaDescription(t){x(this,t)}validateAriaExpanded(t){A(this,t)}validateAriaOwns(t){B(this,t)}validateCustomClass(t){K(this,t)}validateDisabled(t){L(this,t)}validateDownload(t){E(this,t)}validateHideLabel(t){O(this,t)}validateHref(t){y(this,t,{required:!0})}validateIcons(t){I(this,t)}validateLabel(t){T(this,t)}validateLinkVariant(t){w(this,t)}validateOn(t){H(this,t)}validateRole(t){C(this,t)}validateShortKey(t){k(this,t),m(this._accessKey,t)}validateTabIndex(t){_(this,t)}validateTarget(t){R(this,t)}validateTooltipAlign(t){D(this,t)}validateButtonVariant(t){V(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateLinkVariant(this._linkVariant),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.validateButtonVariant(this._buttonVariant),this.unsubscribeOnLocationChange=l((t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0})),m(this._accessKey,this._shortKey)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}get host(){return e(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_linkVariant:["validateLinkVariant"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_buttonVariant:["validateButtonVariant"]}}};export{q as kol_link_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-2f6c3929.js";import{f as t}from"./component-names-553d8bfa.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}",o=i,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._variant="inline",this._on=void 0,this._role=void 0,this._shortKey=void 0,this._target=void 0,this._tooltipAlign="right"}async kolFocus(){var n;await(null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"90543b09e049e96279c230a150f090deaf7bbb72",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_linkVariant:this._variant,_on:this._on,_role:this._role,_shortKey:this._shortKey,_target:this._target,_tooltipAlign:this._tooltipAlign},e("slot",{key:"3fa4b6a10a59453f0ebd3114bfa6811eb44cea92",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:o};export{a as kol_link};
+import{r as n,h as e}from"./index-b4e1ceff.js";import{f as t}from"./component-names-0657b355.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}",o=i,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._variant="inline",this._on=void 0,this._role=void 0,this._shortKey=void 0,this._target=void 0,this._tooltipAlign="right"}async kolFocus(){var n;await(null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"90543b09e049e96279c230a150f090deaf7bbb72",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_linkVariant:this._variant,_on:this._on,_role:this._role,_shortKey:this._shortKey,_target:this._target,_tooltipAlign:this._tooltipAlign},e("slot",{key:"3fa4b6a10a59453f0ebd3114bfa6811eb44cea92",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:o};export{a as kol_link};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,g as t}from"./index-2f6c3929.js";import{w as i,l as o,B as a}from"./index-ebe5a881.js";import{d as l,K as s}from"./events-bad0a075.js";import{b as r}from"./component-names-553d8bfa.js";import{t as d}from"./i18n-260f0fe9.js";import{c as h}from"./clsx-09a06a12.js";import{v as c}from"./label-bf9966d0.js";import"./i18n-45224cc3.js";const b=["blank","card"],f=(n,e)=>{i(n,"_variant",(n=>"string"==typeof n&&b.includes(n)),new Set(b),e)},m="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-modal {\n    border: 0;\n    padding: 0;\n    position: relative;\n    min-height: var(--a11y-min-size);\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.33);\n  }\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}",p=m,u=class{constructor(e){n(this,e),this.on={onClick:async()=>{await this.closeModal()}},this._label=void 0,this._on=void 0,this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,e;null===(e=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===e||e.call(n),this.host&&l(this.host,s.close)}async openModal(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}async closeModal(){var n,e;null===(e=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===e||e.call(n)}render(){return e("dialog",{key:"e78e57c1eb66cde98ff6fa4149a2589ee16ba9cf",class:h("kol-modal",{"kol-modal__card":"card"===this.state._variant}),ref:n=>{this.refDialog=n},style:{width:this.state._width},"aria-label":this.state._label,onClose:this.handleNativeCloseEvent.bind(this)},e("div",{key:"695626e109e7026ed4ec1bf8cbfe8b60125d64f6",tabindex:"-1"},e("slot",{key:"ef6165e95f52d3a4ea08058bd8a6f05e7487066e"})),"card"===this.state._variant&&e(r,{key:"1b591e2d72673fbd7ee85ae77568997af248ce85",class:"kol-modal__close-button","data-testid":"modal-close-button",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:d("kol-close"),_on:this.on,_tooltipAlign:"left"}))}validateLabel(n){c(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"!=typeof n.onClose&&!0!==n.onClose||(e.onClose=n.onClose),o(this,"_on",e)}}validateWidth(n){a(this,"_width",n,{defaultValue:"100%"})}validateVariant(n){f(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return t(this)}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}};u.style={default:p};export{u as kol_modal};
+import{r as n,h as e,g as t}from"./index-b4e1ceff.js";import{w as i,l as o,B as a}from"./index-ebe5a881.js";import{d as l,K as s}from"./events-bad0a075.js";import{b as r}from"./component-names-0657b355.js";import{t as d}from"./i18n-260f0fe9.js";import{c as h}from"./clsx-09a06a12.js";import{v as c}from"./label-bf9966d0.js";import"./i18n-45224cc3.js";const b=["blank","card"],f=(n,e)=>{i(n,"_variant",(n=>"string"==typeof n&&b.includes(n)),new Set(b),e)},m="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-modal {\n    border: 0;\n    padding: 0;\n    position: relative;\n    min-height: var(--a11y-min-size);\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.33);\n  }\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}",p=m,u=class{constructor(e){n(this,e),this.on={onClick:async()=>{await this.closeModal()}},this._label=void 0,this._on=void 0,this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,e;null===(e=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===e||e.call(n),this.host&&l(this.host,s.close)}async openModal(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}async closeModal(){var n,e;null===(e=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===e||e.call(n)}render(){return e("dialog",{key:"e78e57c1eb66cde98ff6fa4149a2589ee16ba9cf",class:h("kol-modal",{"kol-modal__card":"card"===this.state._variant}),ref:n=>{this.refDialog=n},style:{width:this.state._width},"aria-label":this.state._label,onClose:this.handleNativeCloseEvent.bind(this)},e("div",{key:"695626e109e7026ed4ec1bf8cbfe8b60125d64f6",tabindex:"-1"},e("slot",{key:"ef6165e95f52d3a4ea08058bd8a6f05e7487066e"})),"card"===this.state._variant&&e(r,{key:"1b591e2d72673fbd7ee85ae77568997af248ce85",class:"kol-modal__close-button","data-testid":"modal-close-button",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:d("kol-close"),_on:this.on,_tooltipAlign:"left"}))}validateLabel(n){c(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"!=typeof n.onClose&&!0!==n.onClose||(e.onClose=n.onClose),o(this,"_on",e)}}validateWidth(n){a(this,"_width",n,{defaultValue:"100%"})}validateVariant(n){f(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return t(this)}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}};u.style={default:p};export{u as kol_modal};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-2f6c3929.js";import{i as t,G as i,y as a,D as o,w as l}from"./index-ebe5a881.js";import{t as s}from"./i18n-260f0fe9.js";import{r,a as d}from"./unique-nav-labels-e20db0b7.js";import{w as c}from"./validation-9d549145.js";import{f as h,b as p}from"./component-names-553d8bfa.js";import{c as b}from"./clsx-09a06a12.js";import{v as f}from"./hide-label-8b3a8709.js";import{v as u}from"./label-bf9966d0.js";import"./i18n-45224cc3.js";const m=(n,e)=>{t(n,"_collapsible",e)},v=(n,e)=>{t(n,"_hasCompactButton",e)},_=(n,e)=>{t(n,"_hasIconsWhenExpanded",e)},k="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav--horizontal {\n    width: 100%;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list--horizontal {\n    flex-wrap: wrap;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n}",y=k,g=n=>"string"==typeof n._href,w=n=>{var e;return void 0===n._href&&"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onClick)},x=class{constructor(t){n(this,t),this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>e("ul",{class:b("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--horizontal":0===n.deep&&"horizontal"===n.orientation,"kol-nav__list--vertical":0!==n.deep||"vertical"===n.orientation}),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter((e=>e!==n))})}entry(n,t,i,a,o){const l=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return e("div",{class:"kol-nav__entry-wrapper"},g(a)?e(h,Object.assign({class:"kol-nav__entry kol-nav__entry--link"},a,{_hideLabel:t,_icons:l})):e(p,{class:"kol-nav__entry kol-nav__entry--button",_label:a._label,_hideLabel:t,_icons:l,_on:{onClick:(n,e)=>{w(a)&&"function"==typeof a._on.onClick?a._on.onClick(n,e):this.handleToggleExpansionClick(a._children)}}}),i?this.expandButton(n,a,o):"")}expandButton(n,t,i){return e(p,{class:b("kol-nav__expand-button",{"kol-nav__expand-button--expanded":i}),_ariaExpanded:i,_disabled:!n,_icons:"codicon codicon-"+(i?"remove":"add"),_hideLabel:!0,_label:`${s(i?"kol-nav-label-close":"kol-nav-label-open",{placeholders:{label:t._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(t._children)}})}li(n,t,i,a,o,l){const s=!!o._active,d=Array.isArray(o._children)&&o._children.length>0,r=Boolean(o._children&&this.state._expandedChildren.includes(o._children));return e("li",{class:b("kol-nav__list-item",{"kol-nav__list-item--active":s,"kol-nav__list-item--expanded":r,"kol-nav__list-item--has-children":d}),key:a},this.entry(n,t,d,o,r),r&&e(this.linkList,{collapsible:n,hideLabel:t,deep:i+1,links:o._children||[],orientation:l}))}initializeExpandedChildren(){const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,i("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const t=!0===this.state._collapsible,a=!0===this.state._hideLabel,o=this.state._orientation;return e("div",{key:"41b5171c34c2c740b8b4dd8449e6334721e7cb19",class:b("kol-nav",`kol-nav--${o}`,{"kol-nav--is-compact":this.state._hideLabel})},e("nav",{key:"b0604a9fda51cb5e6435eb6187f3b461acc6743c",class:"kol-nav__navigation","aria-label":this.state._label,id:"nav"},e(this.linkList,{key:"ef7b63a443cf20b1ae7dfe96ce4561da14e26ef6",collapsible:t,hideLabel:a,deep:0,links:this.state._links,orientation:o})),n&&e("div",{key:"b65cdbaa29dbb9c490223969949eeaa28e9ad99e",class:"kol-nav__compact"},e(p,{key:"06923cae2ce196795887157deb943ce2009bddaf",class:"kol-nav__toggle-button",_ariaControls:"nav",_ariaExpanded:!a,_icons:a?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:s(a?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_buttonVariant:"ghost"})))}validateCollapsible(n){m(this,n)}validateHasCompactButton(n){v(this,n)}validateHasIconsWhenExpanded(n){_(this,n)}validateHideLabel(n){f(this,n)}validateLabel(n,e,t=!1){t||r(this.state._label),u(this,n,{required:!0}),a(n),d(this.state._label)}validateLinks(n){c("KolNav",this,n),o("[KolNav] The navigation structure is not yet validated recursively.")}validateOrientation(n){l(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){r(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};x.style={default:y};export{x as kol_nav};
+import{r as n,h as e}from"./index-b4e1ceff.js";import{i as t,G as i,y as a,D as o,w as l}from"./index-ebe5a881.js";import{t as s}from"./i18n-260f0fe9.js";import{r,a as d}from"./unique-nav-labels-e20db0b7.js";import{w as h}from"./validation-9d549145.js";import{f as c,b as p}from"./component-names-0657b355.js";import{c as b}from"./clsx-09a06a12.js";import{v as f}from"./hide-label-8b3a8709.js";import{v as u}from"./label-bf9966d0.js";import"./i18n-45224cc3.js";const m=(n,e)=>{t(n,"_collapsible",e)},v=(n,e)=>{t(n,"_hasCompactButton",e)},_=(n,e)=>{t(n,"_hasIconsWhenExpanded",e)},k="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav--horizontal {\n    width: 100%;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list--horizontal {\n    flex-wrap: wrap;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n}",y=k,g=n=>"string"==typeof n._href,w=n=>{var e;return void 0===n._href&&"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onClick)},x=class{constructor(t){n(this,t),this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>e("ul",{class:b("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--horizontal":0===n.deep&&"horizontal"===n.orientation,"kol-nav__list--vertical":0!==n.deep||"vertical"===n.orientation}),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter((e=>e!==n))})}entry(n,t,i,a,o){const l=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return e("div",{class:"kol-nav__entry-wrapper"},g(a)?e(c,Object.assign({class:"kol-nav__entry kol-nav__entry--link"},a,{_hideLabel:t,_icons:l})):e(p,{class:"kol-nav__entry kol-nav__entry--button",_label:a._label,_hideLabel:t,_icons:l,_on:{onClick:(n,e)=>{w(a)&&"function"==typeof a._on.onClick?a._on.onClick(n,e):this.handleToggleExpansionClick(a._children)}}}),i?this.expandButton(n,a,o):"")}expandButton(n,t,i){return e(p,{class:b("kol-nav__expand-button",{"kol-nav__expand-button--expanded":i}),_ariaExpanded:i,_disabled:!n,_icons:"codicon codicon-"+(i?"remove":"add"),_hideLabel:!0,_label:`${s(i?"kol-nav-label-close":"kol-nav-label-open",{placeholders:{label:t._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(t._children)}})}li(n,t,i,a,o,l){const s=!!o._active,d=Array.isArray(o._children)&&o._children.length>0,r=Boolean(o._children&&this.state._expandedChildren.includes(o._children));return e("li",{class:b("kol-nav__list-item",{"kol-nav__list-item--active":s,"kol-nav__list-item--expanded":r,"kol-nav__list-item--has-children":d}),key:a},this.entry(n,t,d,o,r),r&&e(this.linkList,{collapsible:n,hideLabel:t,deep:i+1,links:o._children||[],orientation:l}))}initializeExpandedChildren(){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[]});const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,i("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const t=!0===this.state._collapsible,a=!0===this.state._hideLabel,o=this.state._orientation;return e("div",{key:"1768f2d1d6794f07607ad8a9f3953a4f17d3cd06",class:b("kol-nav",`kol-nav--${o}`,{"kol-nav--is-compact":this.state._hideLabel})},e("nav",{key:"6fceaf6abe991a38a3c4bb98741c9e1c5ad2f11a",class:"kol-nav__navigation","aria-label":this.state._label,id:"nav"},e(this.linkList,{key:"5ee2d35517877fad58f3c37446a88a4753a80bf5",collapsible:t,hideLabel:a,deep:0,links:this.state._links,orientation:o})),n&&e("div",{key:"d8b7bcb8d56bad5fadc02fc6362d84c597c5f0c8",class:"kol-nav__compact"},e(p,{key:"a6e055cb523095f7dfeed9edc1fd4a847973cc55",class:"kol-nav__toggle-button",_ariaControls:"nav",_ariaExpanded:!a,_icons:a?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:s(a?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_buttonVariant:"ghost"})))}validateCollapsible(n){m(this,n)}validateHasCompactButton(n){v(this,n)}validateHasIconsWhenExpanded(n){_(this,n)}validateHideLabel(n){f(this,n)}validateLabel(n,e,t=!1){t||r(this.state._label),u(this,n,{required:!0}),a(n),d(this.state._label)}validateLinks(n){h("KolNav",this,n),o("[KolNav] The navigation structure is not yet validated recursively."),this.initializeExpandedChildren()}validateOrientation(n){l(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){r(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};x.style={default:y};export{x as kol_nav};

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

@@ -1 +1 @@
-{"version":3,"names":["validateCollapsible","component","value","watchBoolean","validateHasCompactButton","validateHasIconsWhenExpanded","defaultStyleCss","KolNavDefaultStyle0","entryIsLink","entryProps","_href","entryIsButton","undefined","_a","_on","onClick","KolNav","this","handleToggleExpansionClick","children","state","_expandedChildren","includes","collapseChildren","expandChildren","linkList","props","h","class","clsx","deep","orientation","links","map","link","index","li","collapsible","hideLabel","_collapsible","_hasCompactButton","_hasIconsWhenExpanded","_hideLabel","_label","_links","_orientation","Object","assign","filter","searchChildren","entry","hasChildren","expanded","icons","_icons","KolLinkWcTag","KolButtonWcTag","event","_children","expandButton","_ariaExpanded","_disabled","translate","placeholders","label","active","_active","Array","isArray","length","Boolean","key","initializeExpandedChildren","handleBranch","branch","childBranch","forEach","render","hasCompactButton","devWarning","id","_ariaControls","_tooltipAlign","_buttonVariant","validateHideLabel","validateLabel","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","devHint","validateOrientation","watchValidator","Set","defaultValue","componentWillLoad","disconnectedCallback"],"sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type CollapsiblePropType = boolean;\n\n/**\n * Defines if navigation nodes can be collapsed or not.\n */\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/* validator */\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\ntype HasCompactButtonPropType = boolean;\n\n/**\n * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n */\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/* validator */\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/**\n * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n */\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/* validator */\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-nav {\n\t\t$root: &;\n\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\n\t\t&--horizontal {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t&__navigation {\n\t\t\t#{$root}:not(#{$root}--is-compact) & {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\n\t\t&__list {\n\t\t\tdisplay: flex;\n\t\t\tlist-style: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\n\t\t\t&--vertical {\n\t\t\t\tflex-direction: column;\n\t\t\t}\n\n\t\t\t&--horizontal {\n\t\t\t\tflex-wrap: wrap;\n\t\t\t}\n\t\t}\n\n\t\t&__entry-wrapper {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t&__entry {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.kol-button {\n\t\ttext-align: left;\n\t}\n}\n","import type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tdevWarning,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { StencilUnknown } from '../../schema';\nimport clsx from 'clsx';\nimport type { OrientationPropType } from '../../schema/props/orientation';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tentry: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean,\n\t): JSX.Element {\n\t\tconst icons =\n\t\t\tthis.state._hasIconsWhenExpanded || this.state._hideLabel\n\t\t\t\t? entry._icons || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)\n\t\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div class=\"kol-nav__entry-wrapper\">\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag class=\"kol-nav__entry kol-nav__entry--link\" {...entry} _hideLabel={hideLabel} _icons={icons} />\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-nav__entry kol-nav__entry--button\"\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, entry as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass={clsx('kol-nav__expand-button', {\n\t\t\t\t\t'kol-nav__expand-button--expanded': expanded,\n\t\t\t\t})}\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icons={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`${expanded ? translate('kol-nav-label-close', { placeholders: { label: link._label } }) : translate('kol-nav-label-open', { placeholders: { label: link._label } })}`}\n\t\t\t\t_on={{ onClick: () => this.handleToggleExpansionClick(link._children) }}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: OrientationPropType,\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={clsx('kol-nav__list-item', {\n\t\t\t\t\t'kol-nav__list-item--active': active,\n\t\t\t\t\t'kol-nav__list-item--expanded': expanded,\n\t\t\t\t\t'kol-nav__list-item--has-children': hasChildren,\n\t\t\t\t})}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, expanded)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children || []} orientation={orientation} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: HideLabelPropType;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: OrientationPropType;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul\n\t\t\t\tclass={clsx('kol-nav__list', {\n\t\t\t\t\t'kol-nav__list--nested': props.deep > 0,\n\t\t\t\t\t'kol-nav__list--horizontal': props.deep === 0 && props.orientation === 'horizontal',\n\t\t\t\t\t'kol-nav__list--vertical': props.deep !== 0 || props.orientation === 'vertical',\n\t\t\t\t})}\n\t\t\t\tdata-deep={props.deep}\n\t\t\t>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\n\t\t/**\n\t\t * Recursively process branches and expand branches which are active or have active children somewhere in the tree.\n\t\t * @param {ButtonOrLinkOrTextWithChildrenProps} branch\n\t\t * @return boolean - true indicates that the current branch or a child branch is active\n\t\t */\n\t\tconst handleBranch = (branch: ButtonOrLinkOrTextWithChildrenProps) => {\n\t\t\tif (branch._active) {\n\t\t\t\tif (branch._children) {\n\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t} else if (branch._children) {\n\t\t\t\tfor (const childBranch of branch._children) {\n\t\t\t\t\tif (handleBranch(childBranch)) {\n\t\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\tthis.state._links.forEach(handleBranch);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={clsx('kol-nav', `kol-nav--${orientation}`, {\n\t\t\t\t\t'kol-nav--is-compact': this.state._hideLabel,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<nav class=\"kol-nav__navigation\" aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t</nav>\n\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t<div class=\"kol-nav__compact\">\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-nav__toggle-button\"\n\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\t\t\t\t\t\t\t_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t_buttonVariant=\"ghost\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t */\n\t@Prop() public _hasIconsWhenExpanded?: 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 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, buttons or texts to render.\n\t */\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType = 'vertical';\n\n\t@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t\t_expandedChildren: [],\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\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\ta11yHintLabelingLandmarks(value);\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<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] The navigation structure is not yet validated recursively.`);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//     { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//     {\n//       _active: true,\n//       _label: '3 Navigationspunkt',\n//       _href: '#abc',\n//       _icons: 'codicon codicon-folder-closed',\n//       _children: [\n//         { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//         { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//         {\n//           _active: true,\n//           _label: '3.3 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n//             { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         {\n//           _label: '3.4 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n//             { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         { _label: '3.5 Navigationspunkt', _href: '#abc' },\n//       ],\n//     },\n//     { _label: '4 Navigationspunkt', _href: '#abc' },\n//   ])\n// );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["validateCollapsible","component","value","watchBoolean","validateHasCompactButton","validateHasIconsWhenExpanded","defaultStyleCss","KolNavDefaultStyle0","entryIsLink","entryProps","_href","entryIsButton","undefined","_a","_on","onClick","KolNav","this","handleToggleExpansionClick","children","state","_expandedChildren","includes","collapseChildren","expandChildren","linkList","props","h","class","clsx","deep","orientation","links","map","link","index","li","collapsible","hideLabel","_collapsible","_hasCompactButton","_hasIconsWhenExpanded","_hideLabel","_label","_links","_orientation","Object","assign","filter","searchChildren","entry","hasChildren","expanded","icons","_icons","KolLinkWcTag","KolButtonWcTag","event","_children","expandButton","_ariaExpanded","_disabled","translate","placeholders","label","active","_active","Array","isArray","length","Boolean","key","initializeExpandedChildren","handleBranch","branch","childBranch","forEach","render","hasCompactButton","devWarning","id","_ariaControls","_tooltipAlign","_buttonVariant","validateHideLabel","validateLabel","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","devHint","validateOrientation","watchValidator","Set","defaultValue","componentWillLoad","disconnectedCallback"],"sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type CollapsiblePropType = boolean;\n\n/**\n * Defines if navigation nodes can be collapsed or not.\n */\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/* validator */\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\ntype HasCompactButtonPropType = boolean;\n\n/**\n * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n */\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/* validator */\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/**\n * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n */\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/* validator */\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-nav {\n\t\t$root: &;\n\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\n\t\t&--horizontal {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t&__navigation {\n\t\t\t#{$root}:not(#{$root}--is-compact) & {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\n\t\t&__list {\n\t\t\tdisplay: flex;\n\t\t\tlist-style: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\n\t\t\t&--vertical {\n\t\t\t\tflex-direction: column;\n\t\t\t}\n\n\t\t\t&--horizontal {\n\t\t\t\tflex-wrap: wrap;\n\t\t\t}\n\t\t}\n\n\t\t&__entry-wrapper {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t&__entry {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.kol-button {\n\t\ttext-align: left;\n\t}\n}\n","import type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tdevWarning,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { StencilUnknown } from '../../schema';\nimport clsx from 'clsx';\nimport type { OrientationPropType } from '../../schema/props/orientation';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tentry: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean,\n\t): JSX.Element {\n\t\tconst icons =\n\t\t\tthis.state._hasIconsWhenExpanded || this.state._hideLabel\n\t\t\t\t? entry._icons || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)\n\t\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div class=\"kol-nav__entry-wrapper\">\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag class=\"kol-nav__entry kol-nav__entry--link\" {...entry} _hideLabel={hideLabel} _icons={icons} />\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-nav__entry kol-nav__entry--button\"\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, entry as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass={clsx('kol-nav__expand-button', {\n\t\t\t\t\t'kol-nav__expand-button--expanded': expanded,\n\t\t\t\t})}\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icons={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`${expanded ? translate('kol-nav-label-close', { placeholders: { label: link._label } }) : translate('kol-nav-label-open', { placeholders: { label: link._label } })}`}\n\t\t\t\t_on={{ onClick: () => this.handleToggleExpansionClick(link._children) }}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: OrientationPropType,\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={clsx('kol-nav__list-item', {\n\t\t\t\t\t'kol-nav__list-item--active': active,\n\t\t\t\t\t'kol-nav__list-item--expanded': expanded,\n\t\t\t\t\t'kol-nav__list-item--has-children': hasChildren,\n\t\t\t\t})}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, expanded)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children || []} orientation={orientation} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: HideLabelPropType;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: OrientationPropType;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul\n\t\t\t\tclass={clsx('kol-nav__list', {\n\t\t\t\t\t'kol-nav__list--nested': props.deep > 0,\n\t\t\t\t\t'kol-nav__list--horizontal': props.deep === 0 && props.orientation === 'horizontal',\n\t\t\t\t\t'kol-nav__list--vertical': props.deep !== 0 || props.orientation === 'vertical',\n\t\t\t\t})}\n\t\t\t\tdata-deep={props.deep}\n\t\t\t>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\n\t\t//Reset expandedChildren before recalculation\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [],\n\t\t};\n\t\t/**\n\t\t * Recursively process branches and expand branches which are active or have active children somewhere in the tree.\n\t\t * @param {ButtonOrLinkOrTextWithChildrenProps} branch\n\t\t * @return boolean - true indicates that the current branch or a child branch is active\n\t\t */\n\t\tconst handleBranch = (branch: ButtonOrLinkOrTextWithChildrenProps) => {\n\t\t\tif (branch._active) {\n\t\t\t\tif (branch._children) {\n\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t} else if (branch._children) {\n\t\t\t\tfor (const childBranch of branch._children) {\n\t\t\t\t\tif (handleBranch(childBranch)) {\n\t\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\tthis.state._links.forEach(handleBranch);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={clsx('kol-nav', `kol-nav--${orientation}`, {\n\t\t\t\t\t'kol-nav--is-compact': this.state._hideLabel,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<nav class=\"kol-nav__navigation\" aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t</nav>\n\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t<div class=\"kol-nav__compact\">\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-nav__toggle-button\"\n\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\t\t\t\t\t\t\t_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t_buttonVariant=\"ghost\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t */\n\t@Prop() public _hasIconsWhenExpanded?: 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 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, buttons or texts to render.\n\t */\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType = 'vertical';\n\n\t@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t\t_expandedChildren: [],\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\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\ta11yHintLabelingLandmarks(value);\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<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] The navigation structure is not yet validated recursively.`);\n\t\t//Re-initialize expansion on links change\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//     { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//     {\n//       _active: true,\n//       _label: '3 Navigationspunkt',\n//       _href: '#abc',\n//       _icons: 'codicon codicon-folder-closed',\n//       _children: [\n//         { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//         { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//         {\n//           _active: true,\n//           _label: '3.3 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n//             { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         {\n//           _label: '3.4 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n//             { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         { _label: '3.5 Navigationspunkt', _href: '#abc' },\n//       ],\n//     },\n//     { _label: '4 Navigationspunkt', _href: '#abc' },\n//   ])\n// );\n"],"mappings":"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","ignoreList":[]}

package/dist/kolibri/kol-pagination-wc.entry.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{r as t,h as i,H as s,g as e}from"./index-b4e1ceff.js";import{E as o,S as a,w as n,z as l,k as h}from"./index-ebe5a881.js";import{t as r}from"./i18n-260f0fe9.js";import{n as p}from"./dev.utils-d42aaf74.js";import{r as u,a as c}from"./unique-nav-labels-e20db0b7.js";import{r as _,b as d}from"./component-names-0657b355.js";import{d as g,K as f}from"./events-bad0a075.js";import{v as b}from"./custom-class-d73b81b1.js";import{v as m}from"./label-bf9966d0.js";import{v}from"./tooltip-align-465a8590.js";import"./i18n-45224cc3.js";import"./align-d2572387.js";const k=(t,s,a)=>{o(t,"_max",s,a)},y={left:"codicon codicon-debug-reverse-continue"},C={left:"codicon codicon-chevron-left"},S={right:"codicon codicon-chevron-right"},x={right:"codicon codicon-debug-continue"};function z(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const j=z(),B=new Intl.NumberFormat(j,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),O=class{constructor(s){t(this,s),this.nonce=p(),this.calcCount=(t,s=1)=>Math.ceil(t/s),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,s)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,s),this.host&&g(this.host,f.click,s),this.onChangePage(t,s)},this.onChangePage=(t,s)=>{const a=setTimeout((()=>{clearTimeout(a),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,s),this.host&&g(this.host,f.changePage,s)}))},this.onChangePageSize=(t,s)=>{if("number"==typeof(s=parseInt(s))&&s>0&&this._pageSize!==s){this._pageSize=s;const a=setTimeout((()=>{clearTimeout(a),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&g(this.host,f.changePageSize,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,s)=>{let a=s.has("_pageSize")?s.get("_pageSize"):this.state._pageSize;const i=s.has("_pageSizeOptions")?s.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(i)&&i.length>0){const t=i.find((t=>t.value===a));a=void 0===t?i[0].value:t.value,s.set("_pageSize",a)}const e=s.has("_page")?s.get("_page"):this.state._page,o=s.has("_max")?s.get("_max"):this.state._max;this.syncPage(s,e,s.get("_pageSize"),o)},this.syncPage=(t,s,i,e)=>{if(e>0){const o=this.calcCount(e,i);o>0&&(s>o?(t.set("_page",o),this.onChangePage(a,o)):s<1&&(t.set("_page",1),this.onChangePage(a,1)))}},this.beforePageSizeOptions=(t,s)=>{const a=[];if(Array.isArray(t))for(const s of t)"number"==typeof s&&a.push({label:r("kol-page-per-site",{placeholders:{entries:`${s}`}}),value:s});s.set("_pageSizeOptions",a),this.beforePageSize(a,s)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:r("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let a=!1;const e=this.getCount(),o=Array.from(Array(e).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>e-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(a=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===a?(a=!1,i("li",{key:p()},i("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null));return i(s,{class:"kol-pagination"},i("nav",{class:"kol-pagination__navigation","aria-label":this.state._label},i("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&i("li",null,i(d,{class:"kol-pagination__button kol-pagination__button--first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:y,_hideLabel:!0,_label:r("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&i("li",null,i(d,{class:"kol-pagination__button kol-pagination__button--previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:C,_hideLabel:!0,_label:r("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),o,this.state._hasButtons.next&&i("li",null,i(d,{class:"kol-pagination__button kol-pagination__button--next",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:S,_hideLabel:!0,_label:r("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&i("li",null,i(d,{class:"kol-pagination__button kol-pagination__button--last",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:x,_hideLabel:!0,_label:r("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&i(_,{class:"kol-pagination__page-size-select",_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:r("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:this.state._pageSize}))}getUnselectedPageButton(t){return i("li",{key:p()},i(d,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:s=>{this.onClick(s,t)}}},i("span",{slot:"expert"},i("span",{class:"visually-hidden"},r("kol-page"))," ",B.format(t))))}getSelectedPageButton(t){return i("li",{key:p()},i(d,{class:"kol-pagination__button kol-pagination__button--selected",_customClass:this.state._customClass,_disabled:!0,_label:""},i("span",{slot:"expert"},i("span",{class:"visually-hidden"},r("kol-page"))," ",B.format(t))))}validateBoundaryCount(t){o(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){b(this,t)}validateLabel(t,s,a=!1){a||u(this.state._label),m(this,t),c(this.state._label)}validateHasButtons(t){n(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,s)=>{if("boolean"==typeof t)s.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=h(t)}catch(t){s.delete("_hasButtons")}"object"==typeof t&&null!==t&&s.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){o(this,"_page",t,{hooks:{beforePatch:(t,s)=>{const a=s.has("_pageSize")?s.get("_pageSize"):this.state._pageSize,i=s.has("_max")?s.get("_max"):this.state._max;this.syncPage(s,t,a,i)}}})}validatePageSize(t){o(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){l(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){o(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){k(this,t,{hooks:{beforePatch:(t,s)=>{const a=s.has("_page")?s.get("_page"):this.state._page,i=s.has("_pageSize")?s.get("_pageSize"):this.state._pageSize;this.syncPage(s,a,i,t)}}})}validateTooltipAlign(t){v(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){u(this.state._label)}get host(){return e(this)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};export{O as kol_pagination_wc};

package/dist/kolibri/kol-pagination-wc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["validateMax","component","value","options","watchNumber","leftDoubleArrowIcon","left","leftSingleArrow","rightSingleArrowIcon","right","rightDoubleArrowIcon","getUserLanguage","userLanguage","navigator","language","normalizedLanguage","includes","toUpperCase","NUMBER_FORMATTER","Intl","NumberFormat","style","minimumFractionDigits","maximumFractionDigits","KolPaginationWc","this","nonce","calcCount","total","pageSize","Math","ceil","getCount","state","_max","_pageSize","onClick","event","page","_on","host","dispatchDomEvent","KolEvent","click","onChangePage","timeout","setTimeout","clearTimeout","changePage","onChangePageSize","parseInt","changePageSize","onGoToFirst","onGoToEnd","onGoBackward","_page","onGoForward","beforePageSize","_nextValue","nextState","has","get","pageSizeOptions","_pageSizeOptions","Array","isArray","length","find","option","undefined","set","syncPage","count","STATE_CHANGE_EVENT","beforePageSizeOptions","nextValue","push","label","translate","placeholders","entries","_boundaryCount","_label","_hasButtons","first","last","next","previous","_siblingCount","render","ellipsis","pageButtons","from","keys","map","index","getSelectedPageButton","getUnselectedPageButton","h","key","class","Host","KolButtonWcTag","exportparts","_customClass","_disabled","_icons","_hideLabel","_tooltipAlign","_a","KolSelectTag","_id","_options","onChange","_value","slot","format","validateBoundaryCount","max","validateCustomClass","validateLabel","_oldValue","initial","removeNavLabel","addNavLabel","validateHasButtons","watchValidator","Set","hooks","beforePatch","parseJson","e","delete","Object","assign","validateOn","validatePage","validatePageSize","validatePageSizeOptions","watchJsonArrayString","validateSiblingCount","validateTooltipAlign","componentWillLoad","disconnectedCallback"],"sources":["src/schema/props/max.ts","src/components/pagination/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchNumberOptions } from '../utils';\nimport { watchNumber } from '../utils';\n\nimport type { RowsPropType } from './rows';\n\n/* types */\nexport type MaxPropType = number;\n\n/**\n * Number of rows of the input element that should be visible at the same time.\n */\nexport type PropMax = {\n\tmax: MaxPropType;\n};\n\n/* validator */\nexport const validateMax = (component: Generic.Element.Component, value?: RowsPropType, options?: WatchNumberOptions): void => {\n\twatchNumber(component, '_max', value, options);\n};\n","import type {\n\tCustomClassPropType,\n\tKoliBriPaginationButtonCallbacks,\n\tLabelPropType,\n\tMaxPropType,\n\tOption,\n\tPaginationAPI,\n\tPaginationHasButton,\n\tPaginationStates,\n\tStringified,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport {\n\tparseJson,\n\tSTATE_CHANGE_EVENT,\n\tvalidateCustomClass,\n\tvalidateLabel,\n\tvalidateMax,\n\tvalidateTooltipAlign,\n\twatchJsonArrayString,\n\twatchNumber,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { nonce } from '../../utils/dev.utils';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { KolButtonWcTag, KolSelectTag } from '../../core/component-names';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\nconst leftDoubleArrowIcon = {\n\tleft: 'codicon codicon-debug-reverse-continue',\n};\nconst leftSingleArrow = {\n\tleft: 'codicon codicon-chevron-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'codicon codicon-chevron-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'codicon codicon-debug-continue',\n};\n\nfunction getUserLanguage(): string {\n\tconst userLanguage = navigator.language || 'de-DE';\n\tconst normalizedLanguage = userLanguage.includes('-') ? userLanguage : `${userLanguage}-${userLanguage.toUpperCase()}`;\n\treturn normalizedLanguage;\n}\nconst userLanguage = getUserLanguage();\nconst NUMBER_FORMATTER = new Intl.NumberFormat(userLanguage, {\n\tstyle: 'decimal',\n\tminimumFractionDigits: 0,\n\tmaximumFractionDigits: 0,\n});\n\n@Component({\n\ttag: 'kol-pagination-wc',\n\tshadow: false,\n})\nexport class KolPaginationWc implements PaginationAPI {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);\n\n\tprivate readonly getCount = (): number => this.calcCount(this.state._max, this.state._pageSize);\n\n\tpublic render(): JSX.Element {\n\t\tlet ellipsis = false;\n\t\tconst count = this.getCount();\n\t\tconst pageButtons = Array.from(Array(count).keys())\n\t\t\t.map((index: number) => index + 1)\n\t\t\t.map((page: number) => {\n\t\t\t\tif (\n\t\t\t\t\tpage <= this.state._boundaryCount ||\n\t\t\t\t\tpage > count - this.state._boundaryCount ||\n\t\t\t\t\t(page >= this.state._page - this.state._siblingCount && page <= this.state._page + this.state._siblingCount)\n\t\t\t\t) {\n\t\t\t\t\tellipsis = true;\n\t\t\t\t\tif (this.state._page === page) {\n\t\t\t\t\t\treturn this.getSelectedPageButton(page);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn this.getUnselectedPageButton(page);\n\t\t\t\t\t}\n\t\t\t\t} else if (ellipsis === true) {\n\t\t\t\t\tellipsis = false;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<li key={nonce()}>\n\t\t\t\t\t\t\t<span class=\"kol-pagination__separator\" aria-hidden=\"true\"></span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t});\n\n\t\treturn (\n\t\t\t<Host class=\"kol-pagination\">\n\t\t\t\t<nav class=\"kol-pagination__navigation\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"kol-pagination__navigation-list\">\n\t\t\t\t\t\t{this.state._hasButtons.first && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-pagination__button kol-pagination__button--first\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t\t\t_icons={leftDoubleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-first')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoToFirst}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._hasButtons.previous && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-pagination__button kol-pagination__button--previous\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t\t\t_icons={leftSingleArrow}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-back')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoBackward}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{pageButtons}\n\t\t\t\t\t\t{this.state._hasButtons.next && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-pagination__button kol-pagination__button--next\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t\t\t_icons={rightSingleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-next')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoForward}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._hasButtons.last && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-pagination__button kol-pagination__button--last\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t\t\t_icons={rightDoubleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-last')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoToEnd}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t\t{this.state._pageSizeOptions?.length > 0 && (\n\t\t\t\t\t<KolSelectTag\n\t\t\t\t\t\tclass=\"kol-pagination__page-size-select\"\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_id={`pagination-size-${this.nonce}`}\n\t\t\t\t\t\t_label={translate('kol-entries-per-site')}\n\t\t\t\t\t\t_options={this.state._pageSizeOptions}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: this.onChangePageSize,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_value={this.state._pageSize}\n\t\t\t\t\t></KolSelectTag>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the amount of pages to show next to the outer arrow buttons.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\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 * 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 navigation buttons to render (first, last, next, previous buttons).\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Defines the current page.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Defines the amount of entries to show per page.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Defines the options for the page-size-select.\n\t */\n\t@Prop() public _pageSizeOptions: Stringified<number[]> = [];\n\n\t/**\n\t * Gibt an, auf welche Callback-Events reagiert werden.\n\t */\n\t@Prop() public _on!: KoliBriPaginationButtonCallbacks;\n\n\t/**\n\t * Defines the amount of pages to show next to the current page.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\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 the maximum number of pages.\n\t */\n\t@Prop() public _max!: MaxPropType;\n\n\t@State() public state: PaginationStates = {\n\t\t_boundaryCount: 1,\n\t\t_label: translate('kol-pagination'),\n\t\t_hasButtons: {\n\t\t\tfirst: true,\n\t\t\tlast: true,\n\t\t\tnext: true,\n\t\t\tprevious: true,\n\t\t},\n\t\t_on: {\n\t\t\tonClick: () => null,\n\t\t},\n\t\t_page: 0,\n\t\t_pageSize: 1,\n\t\t_pageSizeOptions: [],\n\t\t_siblingCount: 1,\n\t\t_max: 0,\n\t};\n\n\tprivate onClick = (event: Event, page: number) => {\n\t\tif (typeof this.state._on.onClick === 'function') {\n\t\t\tthis.state._on.onClick(event, page);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.click, page);\n\t\t}\n\t\tthis.onChangePage(event, page);\n\t};\n\n\tprivate onChangePage = (event: Event, page: number) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on.onChangePage === 'function') {\n\t\t\t\tthis.state._on.onChangePage(event, page);\n\t\t\t}\n\t\t\tif (this.host) {\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.changePage, page);\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate onChangePageSize = (event: Event, value: unknown) => {\n\t\tvalue = parseInt(value as string);\n\t\tif (typeof value === 'number' && value > 0 && this._pageSize !== value) {\n\t\t\tthis._pageSize = value;\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tif (typeof this.state._on.onChangePageSize === 'function') {\n\t\t\t\t\tthis.state._on.onChangePageSize(event, this._pageSize);\n\t\t\t\t}\n\t\t\t\tif (this.host) {\n\t\t\t\t\tdispatchDomEvent(this.host, KolEvent.changePageSize, this._pageSize);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate readonly onGoToFirst = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, 1);\n\t\t},\n\t};\n\tprivate readonly onGoToEnd = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.getCount());\n\t\t},\n\t};\n\tprivate readonly onGoBackward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page - 1);\n\t\t},\n\t};\n\tprivate readonly onGoForward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page + 1);\n\t\t},\n\t};\n\n\tprivate getUnselectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<li key={nonce()}>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t_label=\"\"\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonClick: (event: Event) => {\n\t\t\t\t\t\t\tthis.onClick(event, page);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t<span class=\"visually-hidden\">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}\n\t\t\t\t\t</span>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate getSelectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<li key={nonce()}>\n\t\t\t\t<KolButtonWcTag class=\"kol-pagination__button kol-pagination__button--selected\" _customClass={this.state._customClass} _disabled={true} _label=\"\">\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t<span class=\"visually-hidden\">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}\n\t\t\t\t\t</span>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t</li>\n\t\t);\n\t}\n\n\t@Watch('_boundaryCount')\n\tpublic validateBoundaryCount(value?: number): void {\n\t\twatchNumber(this, '_boundaryCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(label?: LabelPropType, _oldValue?: LabelPropType, initial = false) {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label);\n\t\t}\n\t\tvalidateLabel(this, label);\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('_hasButtons')\n\tpublic validateHasButtons(value?: string | boolean | Stringified<PaginationHasButton>): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_hasButtons',\n\t\t\t(value) => typeof value === 'boolean' || typeof value === 'string' || (typeof value === 'object' && value !== null),\n\t\t\tnew Set(['Boolean', 'PaginationHasButton']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\t\tif (typeof nextValue === 'boolean') {\n\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\tfirst: nextValue,\n\t\t\t\t\t\t\t\tlast: nextValue,\n\t\t\t\t\t\t\t\tnext: nextValue,\n\t\t\t\t\t\t\t\tprevious: nextValue,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (typeof nextValue === 'string') {\n\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\tnextValue = parseJson<PaginationHasButton>(nextValue);\n\t\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\t\tnextState.delete('_hasButtons');\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (typeof nextValue === 'object' && nextValue !== null) {\n\t\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\t\t...this.state._hasButtons,\n\t\t\t\t\t\t\t\t\tfirst:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).first === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).first === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.first,\n\t\t\t\t\t\t\t\t\tlast:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).last === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).last === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.last,\n\t\t\t\t\t\t\t\t\tnext:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).next === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).next === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.next,\n\t\t\t\t\t\t\t\t\tprevious:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).previous === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).previous === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.previous,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriPaginationButtonCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_page')\n\tpublic validatePage(value?: number): void {\n\t\twatchNumber(this, '_page', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tconst total = nextState.has('_max') ? (nextState.get('_max') as number) : this.state._max;\n\t\t\t\t\tthis.syncPage(nextState, _nextValue as number, pageSize, total);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tprivate beforePageSize = (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tlet pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\tconst pageSizeOptions = nextState.has('_pageSizeOptions') ? (nextState.get('_pageSizeOptions') as Option<number>[]) : this.state._pageSizeOptions;\n\t\tif (Array.isArray(pageSizeOptions) && pageSizeOptions.length > 0) {\n\t\t\tconst find = pageSizeOptions.find((option) => option.value === pageSize);\n\t\t\tif (find === undefined) {\n\t\t\t\tpageSize = pageSizeOptions[0].value;\n\t\t\t} else {\n\t\t\t\tpageSize = find.value;\n\t\t\t}\n\t\t\tnextState.set('_pageSize', pageSize);\n\t\t}\n\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\tconst total = nextState.has('_max') ? (nextState.get('_max') as number) : this.state._max;\n\t\tthis.syncPage(nextState, page, nextState.get('_pageSize') as number, total);\n\t};\n\n\tprivate syncPage = (nextState: Map<string, unknown>, page: number, pageSize: number, total: number) => {\n\t\t// count === 0 means no data\n\t\tif (total > 0) {\n\t\t\tconst count = this.calcCount(total, pageSize);\n\t\t\tif (count > 0) {\n\t\t\t\tif (page > count) {\n\t\t\t\t\tnextState.set('_page', count);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, count);\n\t\t\t\t} else if (page < 1) {\n\t\t\t\t\tnextState.set('_page', 1);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, 1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate beforePageSizeOptions = (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tconst options: Option<number>[] = [];\n\t\tif (Array.isArray(nextValue)) {\n\t\t\tfor (const value of nextValue) {\n\t\t\t\tif (typeof value === 'number') {\n\t\t\t\t\toptions.push({\n\t\t\t\t\t\tlabel: translate('kol-page-per-site', { placeholders: { entries: `${value}` } }),\n\t\t\t\t\t\tvalue: value,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tnextState.set('_pageSizeOptions', options);\n\t\tthis.beforePageSize(options, nextState);\n\t};\n\n\t@Watch('_pageSize')\n\tpublic validatePageSize(value?: number): void {\n\t\twatchNumber(this, '_pageSize', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSize,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_pageSizeOptions')\n\tpublic validatePageSizeOptions(value?: Stringified<number[]>): void {\n\t\twatchJsonArrayString(this, '_pageSizeOptions', (value) => typeof value === 'number', value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSizeOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_siblingCount')\n\tpublic validateSiblingCount(value?: number): void {\n\t\twatchNumber(this, '_siblingCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: MaxPropType): void {\n\t\tvalidateMax(this, value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tthis.syncPage(nextState, page, pageSize, _nextValue as number);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateBoundaryCount(this._boundaryCount);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateHasButtons(this._hasButtons);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateOn(this._on);\n\t\tthis.validatePage(this._page);\n\t\tthis.validatePageSize(this._pageSize);\n\t\tthis.validatePageSizeOptions(this._pageSizeOptions);\n\t\tthis.validateSiblingCount(this._siblingCount);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateMax(this._max);\n\n\t\t/**\n\t\t * Die Seite muss als letztes gesetzt werden, da sonst die Seite\n\t\t * nicht korrekt berechnet wird.\n\t\t */\n\t\tthis.validatePage(this._page);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as i,g as e}from"./index-2f6c3929.js";import{E as o,S as s,w as a,z as l,k as r}from"./index-ebe5a881.js";import{t as h}from"./i18n-260f0fe9.js";import{n as d}from"./dev.utils-ca3cce4b.js";import{r as c,a as p}from"./unique-nav-labels-e20db0b7.js";import{i as u,b as f}from"./component-names-553d8bfa.js";import{d as b,K as g}from"./events-bad0a075.js";import{v as m}from"./custom-class-d73b81b1.js";import{v as _}from"./label-bf9966d0.js";import{v as k}from"./tooltip-align-465a8590.js";import"./i18n-45224cc3.js";import"./align-d2572387.js";const y=(t,n,e)=>{o(t,"_max",n,e)},v="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  /* TODO. Once #7126 is completed, move :host block into .kol-pagination  */\n  :host {\n    align-items: center;\n    display: grid;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n}",x=v,w={left:"codicon codicon-debug-reverse-continue"},z={left:"codicon codicon-chevron-left"},S={right:"codicon codicon-chevron-right"},C={right:"codicon codicon-debug-continue"};function j(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const O=j(),A=new Intl.NumberFormat(O,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),B=class{constructor(n){t(this,n),this.nonce=d(),this.calcCount=(t,n=1)=>Math.ceil(t/n),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,n)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,n),this.host&&b(this.host,g.click,n),this.onChangePage(t,n)},this.onChangePage=(t,n)=>{const e=setTimeout((()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,n),this.host&&b(this.host,g.changePage,n)}))},this.onChangePageSize=(t,n)=>{if("number"==typeof(n=parseInt(n[0]))&&n>0&&this._pageSize!==n){this._pageSize=n;const e=setTimeout((()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&b(this.host,g.changePageSize,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,n)=>{let e=n.has("_pageSize")?n.get("_pageSize"):this.state._pageSize;const i=n.has("_pageSizeOptions")?n.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(i)&&i.length>0){const t=i.find((t=>t.value===e));e=void 0===t?i[0].value:t.value,n.set("_pageSize",e)}const a=n.has("_page")?n.get("_page"):this.state._page,o=n.has("_max")?n.get("_max"):this.state._max;this.syncPage(n,a,n.get("_pageSize"),o)},this.syncPage=(t,n,e,i)=>{if(i>0){const a=this.calcCount(i,e);a>0&&(n>a?(t.set("_page",a),this.onChangePage(s,a)):n<1&&(t.set("_page",1),this.onChangePage(s,1)))}},this.beforePageSizeOptions=(t,n)=>{const e=[];if(Array.isArray(t))for(const n of t)"number"==typeof n&&e.push({label:h("kol-page-per-site",{placeholders:{entries:`${n}`}}),value:n});n.set("_pageSizeOptions",e),this.beforePageSize(e,n)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:h("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let e=!1;const a=this.getCount(),o=Array.from(Array(a).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>a-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(e=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===e?(e=!1,n("li",{key:d()},n("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null));return n(i,{class:"kol-pagination"},n("nav",{class:"kol-pagination__navigation","aria-label":this.state._label},n("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&n("li",null,n(f,{class:"kol-pagination__button kol-pagination__button--first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:w,_hideLabel:!0,_label:h("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&n("li",null,n(f,{class:"kol-pagination__button kol-pagination__button--previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:z,_hideLabel:!0,_label:h("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),o,this.state._hasButtons.next&&n("li",null,n(f,{class:"kol-pagination__button kol-pagination__button--next",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:S,_hideLabel:!0,_label:h("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&n("li",null,n(f,{class:"kol-pagination__button kol-pagination__button--last",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:C,_hideLabel:!0,_label:h("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&n(u,{class:"kol-pagination__page-size-select",_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:h("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return n("li",{key:d()},n(f,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:n=>{this.onClick(n,t)}}},n("span",{slot:"expert"},n("span",{class:"visually-hidden"},h("kol-page"))," ",A.format(t))))}getSelectedPageButton(t){return n("li",{key:d()},n(f,{class:"kol-pagination__button kol-pagination__button--selected",_customClass:this.state._customClass,_disabled:!0,_label:""},n("span",{slot:"expert"},n("span",{class:"visually-hidden"},h("kol-page"))," ",A.format(t))))}validateBoundaryCount(t){o(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){m(this,t)}validateLabel(t,n,e=!1){e||c(this.state._label),_(this,t),p(this.state._label)}validateHasButtons(t){a(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,n)=>{if("boolean"==typeof t)n.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=r(t)}catch(t){n.delete("_hasButtons")}"object"==typeof t&&null!==t&&n.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){o(this,"_page",t,{hooks:{beforePatch:(t,n)=>{const e=n.has("_pageSize")?n.get("_pageSize"):this.state._pageSize,i=n.has("_max")?n.get("_max"):this.state._max;this.syncPage(n,t,e,i)}}})}validatePageSize(t){o(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){l(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){o(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){y(this,t,{hooks:{beforePatch:(t,n)=>{const e=n.has("_page")?n.get("_page"):this.state._page,i=n.has("_pageSize")?n.get("_pageSize"):this.state._pageSize;this.syncPage(n,e,i,t)}}})}validateTooltipAlign(t){k(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){c(this.state._label)}get host(){return e(this)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};B.style={default:x};export{B as kol_pagination};
+import{r as n,h as e}from"./index-b4e1ceff.js";import{i as t}from"./component-names-0657b355.js";const i="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-pagination {\n    align-items: center;\n    display: grid;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n}",o=i,a=class{constructor(t){n(this,t),this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0}render(){return e(t,{key:"14b17e953d67caaa9892271b9c19d40044558418",_boundaryCount:this._boundaryCount,_label:this._label,_customClass:this._customClass,_on:this._on,_hasButtons:this._hasButtons,_page:this._page,_pageSize:this._pageSize,_pageSizeOptions:this._pageSizeOptions,_siblingCount:this._siblingCount,_tooltipAlign:this._tooltipAlign,_max:this._max})}};a.style={default:o};export{a as kol_pagination};