@public-ui/sample-react 4.0.0-alpha.1 → 4.0.0-alpha.10

package/dist/assets/{kol-table-stateless.entry-BEhPeAso.js → kol-table-stateless.entry-BDJGhfHG.js}

@@ -1,6 +1,4 @@
-import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const i=`@charset "UTF-8";
+import{r as e,h as t,ab as o}from"./index-D9ygQgpL.js";const i=`@charset "UTF-8";
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
 * The order is important as it determines the cascade priority.
@@ -20,8 +18,8 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
 @layer kol-a11y {
   :host {
     /*
-     * Minimum size of interactive elements.
-     */
+                   * Minimum size of interactive elements.
+                   */
     --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
@@ -42,6 +40,10 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
      * Word spacing is required for all texts.
      */
     word-spacing: inherit;
+    /*
+     * Text should be aligned left by default to provide a predictable starting point.
+     */
+    text-align: left;
   }
   * {
     /*
@@ -80,6 +82,10 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
   option,
   select,
   textarea {
+    /*
+     * All elements should inherit the text color from his parent element.
+     */
+    color: inherit;
     /*
      * All elements should inherit the font family from his parent element.
      */
@@ -156,13 +162,15 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
   }
   .kol-span {
     /* KolSpan is a layout component with icons in all directions and a label text in the middle. */
-    display: grid;
-    place-items: center;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
     /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
   }
   .kol-span__container {
     display: flex;
-    place-items: center;
+    align-items: center;
   }
   a,
   button {
@@ -196,18 +204,11 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
   }
 }
 @layer kol-component {
-  @keyframes fadeInOpacity {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
   .kol-tooltip {
     display: contents;
   }
   .kol-tooltip__floating {
+    opacity: 0;
     display: none;
     position: fixed;
     /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
@@ -218,12 +219,19 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));
     max-width: 90vw;
     max-height: 90vh;
-    visibility: hidden;
-    animation-duration: 0.25s;
+    animation-direction: normal;
+    /* Can be used to specify the animation duration from the outside. 250ms by default. */
+    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);
+    animation-fill-mode: forwards;
     animation-iteration-count: 1;
-    animation-name: fadeInOpacity;
     animation-timing-function: ease-in;
   }
+  .kol-tooltip__floating.hide {
+    animation-name: hideTooltip;
+  }
+  .kol-tooltip__floating.show {
+    animation-name: showTooltip;
+  }
   .kol-tooltip__arrow {
     transform: rotate(45deg);
     color: #000;
@@ -239,6 +247,23 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
     position: relative;
     z-index: 1000;
   }
+  @keyframes hideTooltip {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      display: none;
+    }
+  }
+  @keyframes showTooltip {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 @layer kol-component {
   .kol-alert {
@@ -259,10 +284,9 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
     display: inline-block;
   }
   .kol-button {
-    display: inline-flex;
-    place-items: center;
+    display: flex;
+    min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
-    text-align: center;
     text-decoration-line: none;
   }
   .kol-button::before {
@@ -270,8 +294,7 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
     content: "​";
   }
   .kol-button__text {
-    width: 100%;
-    margin: auto;
+    flex: 1 0 100%;
   }
   .kol-popover-button__button {
     display: inline-block;
@@ -281,6 +304,9 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
     padding: 0;
     border: 0;
   }
+  .kol-popover-button--inline .kol-popover-button__button {
+    display: inline;
+  }
   .kol-table-settings {
     background: #fff;
     position: absolute;
@@ -314,16 +340,16 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
     position: relative;
     max-width: 100%;
   }
-  .kol-table__scroll-container {
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
   .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {
     /* @see https://remysharp.com/til/css/focus-ring-default-styles */
     outline: 5px auto Highlight;
     outline: 5px auto -webkit-focus-ring-color;
     outline-offset: 2px;
   }
+  .kol-table__scroll-container {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
   .kol-table__table {
     width: 100%;
   }
@@ -335,6 +361,16 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
   .kol-table__sort-button .kol-button {
     color: inherit;
   }
+  .kol-table__sort {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+  }
+  .kol-table__sort-order {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
   .kol-table__body {
     text-align: left;
   }
@@ -345,19 +381,19 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
     text-align: left;
   }
   .kol-table__cell--align-left .kol-button__text {
-    justify-items: start;
+    align-items: start;
   }
   .kol-table__cell--align-center {
     text-align: center;
   }
   .kol-table__cell--align-center .kol-button__text {
-    justify-items: center;
+    align-items: center;
   }
   .kol-table__cell--align-right {
     text-align: right;
   }
   .kol-table__cell--align-right .kol-button__text {
-    justify-items: end;
+    align-items: end;
   }
   .kol-table__cell--selection {
     width: var(--a11y-min-size);
@@ -434,4 +470,4 @@ import{r as e,h as t,ab as o}from"./index-BvWOSbaR.js";/*!
     }
   }
 }`,l=class{constructor(n){e(this,n)}render(){return t(o,{key:"3f600244a23f03d0dfbddb1be4006cc50b1cf46f",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection,_tableSettings:this._tableSettings,_hasSettingsMenu:this._hasSettingsMenu})}};l.style={default:i};export{l as kol_table_stateless};
-//# sourceMappingURL=kol-table-stateless.entry-BEhPeAso.js.map
+//# sourceMappingURL=kol-table-stateless.entry-BDJGhfHG.js.map

package/dist/assets/kol-table-stateless.entry-BDJGhfHG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-table-stateless.entry-BDJGhfHG.js","sources":["../../../../components/dist/esm/kol-table-stateless.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h } from './index-DXabIfEM.js';\nimport { m as KolTableStatelessWcTag } from './component-names-CkE54Ym7.js';\nimport './common-L1K0yh1S.js';\n\nconst defaultStyleCss = \"@charset \\\"UTF-8\\\";\\n/*\\n* This file defines the layer order for all CSS layers used in KoliBri.\\n* The order is important as it determines the cascade priority.\\n*\\n* Layer order (lowest to highest priority):\\n* 1. kol-a11y - Accessibility defaults and requirements\\n* 2. kol-global - Global component styles and resets\\n* 3. kol-component - Component-specific styles\\n* 4. kol-theme-global - Theme-specific global styles\\n* 5. kol-theme-component - Theme-specific component styles\\n*/\\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\\n/* forward the rem function */\\n/*\\n * This file contains all rules for accessibility.\\n */\\n@layer kol-a11y {\\n  :host {\\n    /*\\n                   * Minimum size of interactive elements.\\n                   */\\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\\n    /*\\n     * No element should be used without verifying the contrast ratio of its background and font colors.\\n     * By initially setting the background color to white and the font color to black,\\n     * the contrast ratio is ensured and explicit adjustment is forced.\\n     */\\n    color: black;\\n    background-color: white;\\n    /*\\n     * Verdana is an accessible font that can be used without requiring additional loading time.\\n     */\\n    font-family: Verdana;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n    /*\\n     * Text should be aligned left by default to provide a predictable starting point.\\n     */\\n    text-align: left;\\n  }\\n  * {\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    hyphens: auto;\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    word-break: break-word;\\n  }\\n  /*\\n   * All interactive elements should have a minimum size of to-rem(44).\\n   */\\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\\n  /* option, */\\n  /* select, */\\n  /* textarea, */\\n  button,\\n  .kol-input .input {\\n    min-width: var(--a11y-min-size);\\n    min-height: var(--a11y-min-size);\\n  }\\n  /*\\n   * Some interactive elements should not inherit the font-family and font-size.\\n   */\\n  a,\\n  button,\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6,\\n  input,\\n  option,\\n  select,\\n  textarea {\\n    /*\\n     * All elements should inherit the text color from his parent element.\\n     */\\n    color: inherit;\\n    /*\\n     * All elements should inherit the font family from his parent element.\\n     */\\n    font-family: inherit;\\n    /*\\n     * All elements should inherit the font size from his parent element.\\n     */\\n    font-size: inherit;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n  }\\n  /**\\n  * Sometimes we need the semantic element for accessibility reasons,\\n  * but we don't want to show it.\\n  *\\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\\n  */\\n  .visually-hidden {\\n    position: fixed;\\n    top: 0;\\n    left: 0;\\n    width: 1px;\\n    height: 1px;\\n    overflow: hidden;\\n    white-space: nowrap;\\n    clip-path: inset(50%);\\n  }\\n}\\n@layer kol-global {\\n  /*\\n   * Dieses CSS stellt sicher, dass der Standard-Style\\n   * von A und Button resettet werden.\\n   */\\n  :is(a, button) {\\n    background-color: transparent;\\n    width: 100%;\\n    margin: 0;\\n    padding: 0;\\n    border: none;\\n    /* 100% needed for custom width from outside */\\n  }\\n  /*\\n   * Ensure elements with hidden attribute to be actually not visible\\n   * @see https://meowni.ca/hidden.is.a.lie.html\\n   */\\n  [hidden] {\\n    display: none !important;\\n  }\\n  .badge-text-hint {\\n    color: black;\\n    background-color: lightgray;\\n  }\\n}\\n@layer kol-global {\\n  :host {\\n    /*\\n     * The max-width is needed to prevent the table from overflowing the\\n     * parent node, if the table is wider than the parent node.\\n     */\\n    max-width: 100%;\\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  * {\\n    /*\\n     * We prefer to box-sizing: border-box for all elements.\\n     */\\n    box-sizing: border-box;\\n  }\\n  .kol-span {\\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\\n    display: flex;\\n    flex-flow: column;\\n    align-items: center;\\n    justify-content: center;\\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\\n  }\\n  .kol-span__container {\\n    display: flex;\\n    align-items: center;\\n  }\\n  a,\\n  button {\\n    cursor: pointer;\\n  }\\n  .kol-span .kol-span__label--hide-label .kol-span__label {\\n    display: none;\\n  }\\n  /* Reset browser agent style. */\\n  button:disabled {\\n    color: unset;\\n  }\\n  .disabled label,\\n  .disabled:focus-within label,\\n  [aria-disabled=true],\\n  [aria-disabled=true]:focus,\\n  [disabled],\\n  [disabled]:focus {\\n    opacity: 0.5;\\n    outline: none;\\n    cursor: not-allowed;\\n  }\\n  [aria-disabled=true]:focus .kol-span,\\n  [disabled]:focus .kol-span {\\n    outline: none !important;\\n  }\\n}\\n@layer kol-component {\\n  :host {\\n    display: block;\\n  }\\n}\\n@layer kol-component {\\n  .kol-tooltip {\\n    display: contents;\\n  }\\n  .kol-tooltip__floating {\\n    opacity: 0;\\n    display: none;\\n    position: fixed;\\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\\n    top: 0;\\n    left: 0;\\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\\n    width: var(--kol-tooltip-width, max-content);\\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\\n    max-width: 90vw;\\n    max-height: 90vh;\\n    animation-direction: normal;\\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\\n    animation-fill-mode: forwards;\\n    animation-iteration-count: 1;\\n    animation-timing-function: ease-in;\\n  }\\n  .kol-tooltip__floating.hide {\\n    animation-name: hideTooltip;\\n  }\\n  .kol-tooltip__floating.show {\\n    animation-name: showTooltip;\\n  }\\n  .kol-tooltip__arrow {\\n    transform: rotate(45deg);\\n    color: #000;\\n    background-color: #fff;\\n    position: absolute;\\n    z-index: 999;\\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-tooltip__content {\\n    color: #000;\\n    background-color: #fff;\\n    position: relative;\\n    z-index: 1000;\\n  }\\n  @keyframes hideTooltip {\\n    0% {\\n      opacity: 1;\\n    }\\n    100% {\\n      opacity: 0;\\n      display: none;\\n    }\\n  }\\n  @keyframes showTooltip {\\n    0% {\\n      opacity: 0;\\n    }\\n    100% {\\n      opacity: 1;\\n    }\\n  }\\n}\\n@layer kol-component {\\n  .kol-alert {\\n    display: grid;\\n  }\\n  .kol-alert__container {\\n    display: flex;\\n    place-items: center;\\n  }\\n  .kol-alert__container-content {\\n    flex-grow: 1;\\n  }\\n  .kol-alert__closer {\\n    /* Visible with forced colors */\\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  :host {\\n    display: inline-block;\\n  }\\n  .kol-button {\\n    display: flex;\\n    min-height: var(--a11y-min-size);\\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\\n    text-decoration-line: none;\\n  }\\n  .kol-button::before {\\n    /* Render zero-width character as first element to set the baseline correctly. */\\n    content: \\\"​\\\";\\n  }\\n  .kol-button__text {\\n    flex: 1 0 100%;\\n  }\\n  .kol-popover-button__button {\\n    display: inline-block;\\n  }\\n  .kol-popover-button__popover {\\n    margin: 0;\\n    padding: 0;\\n    border: 0;\\n  }\\n  .kol-popover-button--inline .kol-popover-button__button {\\n    display: inline;\\n  }\\n  .kol-table-settings {\\n    background: #fff;\\n    position: absolute;\\n    top: 0;\\n    right: 0;\\n    z-index: 1;\\n  }\\n  .kol-table-settings .kol-popover-button__popover {\\n    background: #fff;\\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\\n    border: 1px solid #d1d5db;\\n  }\\n  .kol-table-settings__columns-container {\\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\\n    overflow: auto;\\n  }\\n  .kol-table-settings__columns {\\n    display: grid;\\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\\n    align-items: center;\\n    grid-auto-rows: min-content;\\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\\n  }\\n  .kol-table-settings__column {\\n    display: contents;\\n  }\\n  .kol-table {\\n    display: block;\\n    position: relative;\\n    max-width: 100%;\\n  }\\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\\n    outline: 5px auto Highlight;\\n    outline: 5px auto -webkit-focus-ring-color;\\n    outline-offset: 2px;\\n  }\\n  .kol-table__scroll-container {\\n    overflow-x: auto;\\n    overflow-y: hidden;\\n  }\\n  .kol-table__table {\\n    width: 100%;\\n  }\\n  .kol-table__caption {\\n    min-height: var(--a11y-min-size);\\n    padding-right: var(--a11y-min-size);\\n    text-align: start;\\n  }\\n  .kol-table__sort-button .kol-button {\\n    color: inherit;\\n  }\\n  .kol-table__sort {\\n    display: inline-flex;\\n    gap: 0.25rem;\\n    align-items: center;\\n  }\\n  .kol-table__sort-order {\\n    display: inline-flex;\\n    align-items: center;\\n    justify-content: center;\\n  }\\n  .kol-table__body {\\n    text-align: left;\\n  }\\n  .kol-table__body .kol-button__text {\\n    justify-items: start;\\n  }\\n  .kol-table__cell--align-left {\\n    text-align: left;\\n  }\\n  .kol-table__cell--align-left .kol-button__text {\\n    align-items: start;\\n  }\\n  .kol-table__cell--align-center {\\n    text-align: center;\\n  }\\n  .kol-table__cell--align-center .kol-button__text {\\n    align-items: center;\\n  }\\n  .kol-table__cell--align-right {\\n    text-align: right;\\n  }\\n  .kol-table__cell--align-right .kol-button__text {\\n    align-items: end;\\n  }\\n  .kol-table__cell--selection {\\n    width: var(--a11y-min-size);\\n    height: var(--a11y-min-size);\\n    white-space: nowrap;\\n  }\\n  .kol-table__spacer {\\n    display: none;\\n  }\\n  .kol-table__selection-label {\\n    display: flex;\\n    position: relative;\\n    width: var(--a11y-min-size);\\n    height: var(--a11y-min-size);\\n    align-items: center;\\n    justify-content: center;\\n    cursor: pointer;\\n  }\\n  .kol-table__selection-label--disabled {\\n    cursor: not-allowed;\\n  }\\n  .kol-table__selection-icon {\\n    display: block;\\n    position: absolute;\\n    inset: auto;\\n    z-index: 1;\\n  }\\n  .kol-table__selection-input {\\n    border-style: solid;\\n    margin: 0;\\n    appearance: none;\\n    cursor: pointer;\\n  }\\n  .kol-table__selection-input:disabled {\\n    cursor: not-allowed;\\n  }\\n  .kol-table__selection-input:before {\\n    content: \\\"\\\";\\n  }\\n  .kol-table__selection-input--checkbox {\\n    background-color: rgb(255, 255, 255);\\n    display: flex;\\n    position: relative;\\n    width: calc(var(--a11y-min-size) / 2);\\n    height: calc(var(--a11y-min-size) / 2);\\n    border-width: 2px;\\n    align-items: center;\\n    justify-content: center;\\n    line-height: 1.5;\\n  }\\n  .kol-table__selection-input--radio {\\n    border-radius: 100%;\\n    display: flex;\\n    width: 1.5em;\\n    min-width: 1.5em;\\n    height: 1.5em;\\n    min-height: 1.5em;\\n    padding: 0;\\n    border-width: 2px;\\n  }\\n  .kol-table__selection-input--radio:before {\\n    border-radius: 100%;\\n    width: 0.75em;\\n    height: 0.75em;\\n    margin: auto;\\n  }\\n  .kol-table__selection-input--radio:checked:before {\\n    background-color: #000;\\n  }\\n  @media (forced-colors: active) {\\n    .kol-table__selection-input--radio:checked:before {\\n      /* Give it a visible background in forced colors mode */\\n      background-color: selectedItem !important;\\n    }\\n  }\\n}\";\n\nconst KolTableStateless = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n    }\n    render() {\n        return (h(KolTableStatelessWcTag, { key: '3f600244a23f03d0dfbddb1be4006cc50b1cf46f', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection, _tableSettings: this._tableSettings, _hasSettingsMenu: this._hasSettingsMenu }));\n    }\n};\nKolTableStateless.style = {\n    default: defaultStyleCss\n};\n\nexport { KolTableStateless as kol_table_stateless };\n//# sourceMappingURL=kol-table-stateless.entry.js.map\n"],"names":["defaultStyleCss","KolTableStateless","hostRef","registerInstance","h","KolTableStatelessWcTag"],"mappings":"uDAOA,MAAMA,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAElBC,EAAoB,KAAM,CAC5B,YAAYC,EAAS,CACjBC,EAAiB,KAAMD,CAAO,CAClC,CACA,QAAS,CACL,OAAQE,EAAEC,EAAwB,CAAE,IAAK,2CAA4C,MAAO,KAAK,MAAO,UAAW,KAAK,UAAW,aAAc,KAAK,aAAc,OAAQ,KAAK,OAAQ,UAAW,KAAK,UAAW,IAAK,KAAK,IAAK,WAAY,KAAK,WAAY,eAAgB,KAAK,eAAgB,iBAAkB,KAAK,iBAAkB,CAClV,CACJ,EACAJ,EAAkB,MAAQ,CACtB,QAASD,CACb"}

package/dist/assets/{kol-tabs.entry-4stJU6kl.js → kol-tabs.entry-Ctu4XMNN.js}

@@ -1,6 +1,4 @@
-import{r as p,v as f,d as h,a as c,h as l,e as b,s as m,a6 as g,a0 as _,a1 as v,ac as y,g as k,w,m as T}from"./index-BvWOSbaR.js";import{v as x}from"./align-CyK0wp7d-B1c2PRsI.js";import{v as C}from"./label-CdtNxOKu-BgP05vXh.js";import{t as P}from"./i18n-CdSCDnmA-CsM0aySV.js";import{K as r}from"./keyboard-D6PoWr38-Bn_Qh8Bq.js";import{c as S}from"./clsx-eK3rPvPS-BT_IL7Fz.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const u=["select-automatic","select-manual"],A=(e,t)=>{w(e,"_behavior",n=>typeof n=="string"&&u.includes(n),new Set([`KoliBriTabBehavior {${u.join(", ")}`]),t)},B=(e,t)=>{T(e,"_hasCreateButton",t)},z=`/* forward the rem function */
+import{r as p,v as f,d as h,a as c,h as l,e as b,s as m,a5 as g,$ as _,a0 as v,ac as y,g as k,w,m as T}from"./index-D9ygQgpL.js";import{v as x}from"./align-Bcqvz5vw-BBjz1uM7.js";import{v as C}from"./label-ohY9ajP0-DL9LDU0L.js";import{c as A}from"./clsx-eK3rPvPS-B-dksMZM.js";import{t as P}from"./i18n-CQxlBXNV-Bs_gON2P.js";import{K as r}from"./keyboard-D6PoWr38-BGYQJqo4.js";const u=["select-automatic","select-manual"],S=(e,t)=>{w(e,"_behavior",n=>typeof n=="string"&&u.includes(n),new Set([`KoliBriTabBehavior {${u.join(", ")}`]),t)},B=(e,t)=>{T(e,"_hasCreateButton",t)},z=`/* forward the rem function */
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
 * The order is important as it determines the cascade priority.
@@ -19,8 +17,8 @@ import{r as p,v as f,d as h,a as c,h as l,e as b,s as m,a6 as g,a0 as _,a1 as v,
 @layer kol-a11y {
   :host {
     /*
-     * Minimum size of interactive elements.
-     */
+                   * Minimum size of interactive elements.
+                   */
     --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
@@ -41,6 +39,10 @@ import{r as p,v as f,d as h,a as c,h as l,e as b,s as m,a6 as g,a0 as _,a1 as v,
      * Word spacing is required for all texts.
      */
     word-spacing: inherit;
+    /*
+     * Text should be aligned left by default to provide a predictable starting point.
+     */
+    text-align: left;
   }
   * {
     /*
@@ -79,6 +81,10 @@ import{r as p,v as f,d as h,a as c,h as l,e as b,s as m,a6 as g,a0 as _,a1 as v,
   option,
   select,
   textarea {
+    /*
+     * All elements should inherit the text color from his parent element.
+     */
+    color: inherit;
     /*
      * All elements should inherit the font family from his parent element.
      */
@@ -155,13 +161,15 @@ import{r as p,v as f,d as h,a as c,h as l,e as b,s as m,a6 as g,a0 as _,a1 as v,
   }
   .kol-span {
     /* KolSpan is a layout component with icons in all directions and a label text in the middle. */
-    display: grid;
-    place-items: center;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
     /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
   }
   .kol-span__container {
     display: flex;
-    place-items: center;
+    align-items: center;
   }
   a,
   button {
@@ -195,18 +203,11 @@ import{r as p,v as f,d as h,a as c,h as l,e as b,s as m,a6 as g,a0 as _,a1 as v,
   }
 }
 @layer kol-component {
-  @keyframes fadeInOpacity {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
   .kol-tooltip {
     display: contents;
   }
   .kol-tooltip__floating {
+    opacity: 0;
     display: none;
     position: fixed;
     /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
@@ -217,12 +218,19 @@ import{r as p,v as f,d as h,a as c,h as l,e as b,s as m,a6 as g,a0 as _,a1 as v,
     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));
     max-width: 90vw;
     max-height: 90vh;
-    visibility: hidden;
-    animation-duration: 0.25s;
+    animation-direction: normal;
+    /* Can be used to specify the animation duration from the outside. 250ms by default. */
+    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);
+    animation-fill-mode: forwards;
     animation-iteration-count: 1;
-    animation-name: fadeInOpacity;
     animation-timing-function: ease-in;
   }
+  .kol-tooltip__floating.hide {
+    animation-name: hideTooltip;
+  }
+  .kol-tooltip__floating.show {
+    animation-name: showTooltip;
+  }
   .kol-tooltip__arrow {
     transform: rotate(45deg);
     color: #000;
@@ -238,6 +246,23 @@ import{r as p,v as f,d as h,a as c,h as l,e as b,s as m,a6 as g,a0 as _,a1 as v,
     position: relative;
     z-index: 1000;
   }
+  @keyframes hideTooltip {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      display: none;
+    }
+  }
+  @keyframes showTooltip {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 @layer kol-component {
   .kol-tabs {
@@ -281,5 +306,5 @@ import{r as p,v as f,d as h,a as c,h as l,e as b,s as m,a6 as g,a0 as _,a1 as v,
   .kol-tabs__panel {
     height: 100%;
   }
-}`,I=class{constructor(e){p(this,e),this.onCreateLabel=`${P("kol-new")} …`,this.nextPossibleTabIndex=(t,n,i=1)=>{const a=n+i;return a<t.length?t[a]._disabled?this.nextPossibleTabIndex(t,n,i+1):a:n},this.prevPossibleTabIndex=(t,n,i=1)=>{const a=n-i;return a>=0?t[a]._disabled?this.prevPossibleTabIndex(t,n,i+1):a:n},this.onKeyDown=t=>{switch(t.key){case r.ArrowRight:this.goToNextTab(t);break;case r.ArrowLeft:this.goToPreviousTab(t);break;case r.Space:case r.Enter:this.activateFocusedTab(t);break}},this.onClickSelect=(t,n)=>{this.selectNextTabEvent(t,n)},this.onMouseDown=t=>{t.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this._align="top",this._hasCreateButton=!1,this._selected=0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]},this.selectNextNotDisabledTab=(t,n,i=!0,a)=>{if(t>n.length-1&&(t=n.length-1),t<0&&(t=0),Array.isArray(n)&&n[t]&&n[t]._disabled){if(i===!0){if(t<n.length-1)return this.selectNextNotDisabledTab(t+1,n,!0,a||t);t=a||t,i=!1}if(i===!1){if(t>0)return this.selectNextNotDisabledTab(t-1,n,!1,a||t);f("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,n,i,a)=>{let o;a==="_selected"?o=t:o=this.state._selected;let s;a==="_tabs"?s=t:s=this.state._tabs,s.length>0&&n.set("_selected",this.selectNextNotDisabledTab(o,s))},this.refreshTabPanels=()=>{var t,n,i,a;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let o=0;o<((t=this.state._tabs)===null||t===void 0?void 0:t.length);o++){const s=document.createElement("div");s.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),s.setAttribute("id",`tabpanel-${o}`),s.setAttribute("role","tabpanel"),s.setAttribute("hidden","");const d=document.createElement("slot");d.setAttribute("name",`tabpanel-slot-${o}`),s.appendChild(d),(n=this.tabPanelHost)===null||n===void 0||n.appendChild(s),typeof HTMLCollection<"u"&&((i=this.host)===null||i===void 0?void 0:i.children)instanceof HTMLCollection&&(!((a=this.host)===null||a===void 0)&&a.children[o])&&this.host.children[o].setAttribute("slot",`tabpanel-slot-${o}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach((t,n)=>{n===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")})},this.onCreate=t=>{var n,i;t.preventDefault(),(i=(n=this.state._on)===null||n===void 0?void 0:n.onCreate)===null||i===void 0||i.call(n,t),this.host&&h(this.host,c.create)},this.onBlur=()=>{this.currentFocusIndex=void 0}}getCurrentFocusIndex(){return typeof this.currentFocusIndex=="number"?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return this._behavior==="select-manual"?"selectFocusOnly":"activateCompletely"}goToNextTab(e){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}goToPreviousTab(e){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}activateFocusedTab(e){typeof this.currentFocusIndex=="number"&&this.onSelect(e,this.currentFocusIndex)}selectNextTabEvent(e,t,n="activateCompletely"){var i,a;this.currentFocusIndex=t,this.focusTabById(t),n==="activateCompletely"&&(this._selected=t,(a=(i=this.state._tabs[t]._on)===null||i===void 0?void 0:i.onSelect)===null||a===void 0||a.call(i,e,t),this.onSelect(e,t))}renderButtonGroup(){return l("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map((e,t)=>l(b,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===t?0:-1,_tooltipAlign:e._tooltipAlign,_buttonVariant:this.state._selected===t?"custom":void 0,_customClass:this.state._selected===t?"selected":void 0,_ariaControls:`tabpanel-${t}`,_ariaSelected:this.state._selected===t,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${t}`,_role:"tab",_value:t})),this.state._hasCreateButton&&l(b,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"codicon codicon-plus","data-testid":"tabs-create-button"}))}render(){return l("div",{key:"651b397e4e56da8694268e5670dd12da67fb4430",ref:e=>{this.tabPanelsElement=e},class:S("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),l("div",{key:"2583e66740101758cdf796a45961142384bf9fdf",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(e){x(this,e)}validateBehavior(e){A(this,e)}validateHasCreateButton(e){B(this,e)}validateLabel(e){C(this,e,{required:!0})}validateOn(e){if(typeof e=="object"&&e!==null){const t={};typeof e.onCreate=="function"&&(t.onCreate=e.onCreate),typeof e.onSelect=="function"&&(t.onSelect=e.onSelect),m(this,"_on",t)}}validateSelected(e){g(this,"_selected",e,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(e){_(this,"_tabs",t=>typeof t=="object"&&t!==null&&typeof t._label=="string"&&t._label.length>0,e,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),v("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior),this.validateHasCreateButton(this._hasCreateButton)}componentDidRender(){this.refreshTabPanels()}focusTabById(e){if(this.tabPanelsElement){const t=y(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);t?.focus()}}onSelect(e,t){var n,i;(i=(n=this._on)===null||n===void 0?void 0:n.onSelect)===null||i===void 0||i.call(n,e,t),this.host&&h(this.host,c.select,t),this.focusTabById(t)}get host(){return k(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};I.style={default:z};export{I as kol_tabs};
-//# sourceMappingURL=kol-tabs.entry-4stJU6kl.js.map
+}`,H=class{constructor(e){p(this,e),this.onCreateLabel=`${P("kol-new")} …`,this.nextPossibleTabIndex=(t,n,o=1)=>{const i=n+o;return i<t.length?t[i]._disabled?this.nextPossibleTabIndex(t,n,o+1):i:n},this.prevPossibleTabIndex=(t,n,o=1)=>{const i=n-o;return i>=0?t[i]._disabled?this.prevPossibleTabIndex(t,n,o+1):i:n},this.onKeyDown=t=>{switch(t.key){case r.ArrowRight:this.goToNextTab(t);break;case r.ArrowLeft:this.goToPreviousTab(t);break;case r.Space:case r.Enter:this.activateFocusedTab(t);break}},this.onClickSelect=(t,n)=>{this.selectNextTabEvent(t,n)},this.onMouseDown=t=>{t.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this._align="top",this._hasCreateButton=!1,this._selected=0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]},this.selectNextNotDisabledTab=(t,n,o=!0,i)=>{if(t>n.length-1&&(t=n.length-1),t<0&&(t=0),Array.isArray(n)&&n[t]&&n[t]._disabled){if(o===!0){if(t<n.length-1)return this.selectNextNotDisabledTab(t+1,n,!0,i||t);t=i||t,o=!1}if(o===!1){if(t>0)return this.selectNextNotDisabledTab(t-1,n,!1,i||t);f("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,n,o,i)=>{let a;i==="_selected"?a=t:a=this.state._selected;let s;i==="_tabs"?s=t:s=this.state._tabs,s.length>0&&n.set("_selected",this.selectNextNotDisabledTab(a,s))},this.refreshTabPanels=()=>{var t,n,o,i;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let a=0;a<((t=this.state._tabs)===null||t===void 0?void 0:t.length);a++){const s=document.createElement("div");s.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${a}`),s.setAttribute("id",`tabpanel-${a}`),s.setAttribute("role","tabpanel"),s.setAttribute("hidden","");const d=document.createElement("slot");d.setAttribute("name",`tabpanel-slot-${a}`),s.appendChild(d),(n=this.tabPanelHost)===null||n===void 0||n.appendChild(s),typeof HTMLCollection<"u"&&((o=this.host)===null||o===void 0?void 0:o.children)instanceof HTMLCollection&&(!((i=this.host)===null||i===void 0)&&i.children[a])&&this.host.children[a].setAttribute("slot",`tabpanel-slot-${a}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach((t,n)=>{n===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")})},this.onCreate=t=>{var n,o;t.preventDefault(),(o=(n=this.state._on)===null||n===void 0?void 0:n.onCreate)===null||o===void 0||o.call(n,t),this.host&&h(this.host,c.create)},this.onBlur=()=>{this.currentFocusIndex=void 0}}getCurrentFocusIndex(){return typeof this.currentFocusIndex=="number"?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return this._behavior==="select-manual"?"selectFocusOnly":"activateCompletely"}goToNextTab(e){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}goToPreviousTab(e){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}activateFocusedTab(e){typeof this.currentFocusIndex=="number"&&this.onSelect(e,this.currentFocusIndex)}selectNextTabEvent(e,t,n="activateCompletely"){var o,i;this.currentFocusIndex=t,this.focusTabById(t),n==="activateCompletely"&&(this._selected=t,(i=(o=this.state._tabs[t]._on)===null||o===void 0?void 0:o.onSelect)===null||i===void 0||i.call(o,e,t),this.onSelect(e,t))}renderButtonGroup(){return l("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map((e,t)=>l(b,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===t?0:-1,_tooltipAlign:e._tooltipAlign,_buttonVariant:this.state._selected===t?"custom":void 0,_customClass:this.state._selected===t?"selected":void 0,_ariaControls:`tabpanel-${t}`,_ariaSelected:this.state._selected===t,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${t}`,_role:"tab",_value:t})),this.state._hasCreateButton&&l(b,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"codicon codicon-plus","data-testid":"tabs-create-button"}))}render(){return l("div",{key:"651b397e4e56da8694268e5670dd12da67fb4430",ref:e=>{this.tabPanelsElement=e},class:A("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),l("div",{key:"2583e66740101758cdf796a45961142384bf9fdf",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(e){x(this,e)}validateBehavior(e){S(this,e)}validateHasCreateButton(e){B(this,e)}validateLabel(e){C(this,e,{required:!0})}validateOn(e){if(typeof e=="object"&&e!==null){const t={};typeof e.onCreate=="function"&&(t.onCreate=e.onCreate),typeof e.onSelect=="function"&&(t.onSelect=e.onSelect),m(this,"_on",t)}}validateSelected(e){g(this,"_selected",e,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(e){_(this,"_tabs",t=>typeof t=="object"&&t!==null&&typeof t._label=="string"&&t._label.length>0,e,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),v("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior),this.validateHasCreateButton(this._hasCreateButton)}componentDidRender(){this.refreshTabPanels()}focusTabById(e){if(this.tabPanelsElement){const t=y(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);t?.focus()}}onSelect(e,t){var n,o;(o=(n=this._on)===null||n===void 0?void 0:n.onSelect)===null||o===void 0||o.call(n,e,t),this.host&&h(this.host,c.select,t),this.focusTabById(t)}get host(){return k(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};H.style={default:z};export{H as kol_tabs};
+//# sourceMappingURL=kol-tabs.entry-Ctu4XMNN.js.map

package/dist/assets/kol-tabs.entry-Ctu4XMNN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-tabs.entry-Ctu4XMNN.js","sources":["../../../../components/dist/esm/kol-tabs.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h, g as getElement } from './index-DXabIfEM.js';\nimport { w as watchValidator, d as watchBoolean, j as devHint, s as setState, M as watchNumber, G as watchJsonArrayString, H as uiUxHintMillerscheZahl, P as koliBriQuerySelector } from './common-L1K0yh1S.js';\nimport { v as validateAlign } from './align-Bcqvz5vw.js';\nimport { v as validateLabel } from './label-ohY9ajP0.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\nimport { d as KolButtonWcTag } from './component-names-CkE54Ym7.js';\nimport { t as translate } from './i18n-CQxlBXNV.js';\nimport { K as KeyboardKey } from './keyboard-D6PoWr38.js';\nimport { d as dispatchDomEvent, K as KolEvent } from './events-9-skLO0f.js';\nimport './i18n-B-iJAw_i.js';\n\nconst tabBehaviorPropTypeOptions = ['select-automatic', 'select-manual'];\nconst validateTabBehavior = (component, value) => {\n    watchValidator(component, `_behavior`, (value) => typeof value === 'string' && tabBehaviorPropTypeOptions.includes(value), new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(', ')}`]), value);\n};\n\nconst validateHasCreateButton = (component, value) => {\n    watchBoolean(component, '_hasCreateButton', value);\n};\n\nconst defaultStyleCss = \"/* forward the rem function */\\n/*\\n* This file defines the layer order for all CSS layers used in KoliBri.\\n* The order is important as it determines the cascade priority.\\n*\\n* Layer order (lowest to highest priority):\\n* 1. kol-a11y - Accessibility defaults and requirements\\n* 2. kol-global - Global component styles and resets\\n* 3. kol-component - Component-specific styles\\n* 4. kol-theme-global - Theme-specific global styles\\n* 5. kol-theme-component - Theme-specific component styles\\n*/\\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\\n/*\\n * This file contains all rules for accessibility.\\n */\\n@layer kol-a11y {\\n  :host {\\n    /*\\n                   * Minimum size of interactive elements.\\n                   */\\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\\n    /*\\n     * No element should be used without verifying the contrast ratio of its background and font colors.\\n     * By initially setting the background color to white and the font color to black,\\n     * the contrast ratio is ensured and explicit adjustment is forced.\\n     */\\n    color: black;\\n    background-color: white;\\n    /*\\n     * Verdana is an accessible font that can be used without requiring additional loading time.\\n     */\\n    font-family: Verdana;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n    /*\\n     * Text should be aligned left by default to provide a predictable starting point.\\n     */\\n    text-align: left;\\n  }\\n  * {\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    hyphens: auto;\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    word-break: break-word;\\n  }\\n  /*\\n   * All interactive elements should have a minimum size of to-rem(44).\\n   */\\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\\n  /* option, */\\n  /* select, */\\n  /* textarea, */\\n  button,\\n  .kol-input .input {\\n    min-width: var(--a11y-min-size);\\n    min-height: var(--a11y-min-size);\\n  }\\n  /*\\n   * Some interactive elements should not inherit the font-family and font-size.\\n   */\\n  a,\\n  button,\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6,\\n  input,\\n  option,\\n  select,\\n  textarea {\\n    /*\\n     * All elements should inherit the text color from his parent element.\\n     */\\n    color: inherit;\\n    /*\\n     * All elements should inherit the font family from his parent element.\\n     */\\n    font-family: inherit;\\n    /*\\n     * All elements should inherit the font size from his parent element.\\n     */\\n    font-size: inherit;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n  }\\n  /**\\n  * Sometimes we need the semantic element for accessibility reasons,\\n  * but we don't want to show it.\\n  *\\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\\n  */\\n  .visually-hidden {\\n    position: fixed;\\n    top: 0;\\n    left: 0;\\n    width: 1px;\\n    height: 1px;\\n    overflow: hidden;\\n    white-space: nowrap;\\n    clip-path: inset(50%);\\n  }\\n}\\n@layer kol-global {\\n  /*\\n   * Dieses CSS stellt sicher, dass der Standard-Style\\n   * von A und Button resettet werden.\\n   */\\n  :is(a, button) {\\n    background-color: transparent;\\n    width: 100%;\\n    margin: 0;\\n    padding: 0;\\n    border: none;\\n    /* 100% needed for custom width from outside */\\n  }\\n  /*\\n   * Ensure elements with hidden attribute to be actually not visible\\n   * @see https://meowni.ca/hidden.is.a.lie.html\\n   */\\n  [hidden] {\\n    display: none !important;\\n  }\\n  .badge-text-hint {\\n    color: black;\\n    background-color: lightgray;\\n  }\\n}\\n@layer kol-global {\\n  :host {\\n    /*\\n     * The max-width is needed to prevent the table from overflowing the\\n     * parent node, if the table is wider than the parent node.\\n     */\\n    max-width: 100%;\\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  * {\\n    /*\\n     * We prefer to box-sizing: border-box for all elements.\\n     */\\n    box-sizing: border-box;\\n  }\\n  .kol-span {\\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\\n    display: flex;\\n    flex-flow: column;\\n    align-items: center;\\n    justify-content: center;\\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\\n  }\\n  .kol-span__container {\\n    display: flex;\\n    align-items: center;\\n  }\\n  a,\\n  button {\\n    cursor: pointer;\\n  }\\n  .kol-span .kol-span__label--hide-label .kol-span__label {\\n    display: none;\\n  }\\n  /* Reset browser agent style. */\\n  button:disabled {\\n    color: unset;\\n  }\\n  .disabled label,\\n  .disabled:focus-within label,\\n  [aria-disabled=true],\\n  [aria-disabled=true]:focus,\\n  [disabled],\\n  [disabled]:focus {\\n    opacity: 0.5;\\n    outline: none;\\n    cursor: not-allowed;\\n  }\\n  [aria-disabled=true]:focus .kol-span,\\n  [disabled]:focus .kol-span {\\n    outline: none !important;\\n  }\\n}\\n@layer kol-component {\\n  :host {\\n    display: block;\\n  }\\n}\\n@layer kol-component {\\n  .kol-tooltip {\\n    display: contents;\\n  }\\n  .kol-tooltip__floating {\\n    opacity: 0;\\n    display: none;\\n    position: fixed;\\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\\n    top: 0;\\n    left: 0;\\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\\n    width: var(--kol-tooltip-width, max-content);\\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\\n    max-width: 90vw;\\n    max-height: 90vh;\\n    animation-direction: normal;\\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\\n    animation-fill-mode: forwards;\\n    animation-iteration-count: 1;\\n    animation-timing-function: ease-in;\\n  }\\n  .kol-tooltip__floating.hide {\\n    animation-name: hideTooltip;\\n  }\\n  .kol-tooltip__floating.show {\\n    animation-name: showTooltip;\\n  }\\n  .kol-tooltip__arrow {\\n    transform: rotate(45deg);\\n    color: #000;\\n    background-color: #fff;\\n    position: absolute;\\n    z-index: 999;\\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-tooltip__content {\\n    color: #000;\\n    background-color: #fff;\\n    position: relative;\\n    z-index: 1000;\\n  }\\n  @keyframes hideTooltip {\\n    0% {\\n      opacity: 1;\\n    }\\n    100% {\\n      opacity: 0;\\n      display: none;\\n    }\\n  }\\n  @keyframes showTooltip {\\n    0% {\\n      opacity: 0;\\n    }\\n    100% {\\n      opacity: 1;\\n    }\\n  }\\n}\\n@layer kol-component {\\n  .kol-tabs {\\n    display: var(--display);\\n    grid-template-columns: var(--grid-template-columns);\\n    grid-template-rows: var(--grid-template-rows);\\n  }\\n  .kol-tabs--align-right {\\n    --display: grid;\\n    --grid-template-columns: 1fr auto;\\n    --button-group-flex-direction: column;\\n    --button-group-order: 2;\\n  }\\n  .kol-tabs--align-left {\\n    --display: grid;\\n    --grid-template-columns: auto 1fr;\\n    --button-group-flex-direction: column;\\n    --button-group-order: 0;\\n  }\\n  .kol-tabs--align-bottom {\\n    --display: grid;\\n    --grid-template-rows: 1fr auto;\\n    --button-group-order: 2;\\n  }\\n  .kol-tabs__tabs-align-top {\\n    --display: grid;\\n    --grid-template-rows: auto 1fr;\\n    --button-group-order: 0;\\n  }\\n  .kol-tabs__button-group {\\n    display: flex;\\n    order: var(--button-group-order);\\n    flex-direction: var(--button-group-flex-direction);\\n    flex-wrap: wrap;\\n  }\\n  .kol-tabs__button-group .kol-button {\\n    border-bottom-color: transparent;\\n    display: block;\\n    border-bottom-style: solid;\\n  }\\n  .kol-tabs__panel {\\n    height: 100%;\\n  }\\n}\";\n\nconst KolTabs = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this.onCreateLabel = `${translate('kol-new')} …`;\n        this.nextPossibleTabIndex = (tabs, offset, step = 1) => {\n            const nextOffset = offset + step;\n            if (nextOffset < tabs.length) {\n                if (tabs[nextOffset]._disabled) {\n                    return this.nextPossibleTabIndex(tabs, offset, step + 1);\n                }\n                return nextOffset;\n            }\n            return offset;\n        };\n        this.prevPossibleTabIndex = (tabs, offset, step = 1) => {\n            const nextOffset = offset - step;\n            if (nextOffset >= 0) {\n                if (tabs[nextOffset]._disabled) {\n                    return this.prevPossibleTabIndex(tabs, offset, step + 1);\n                }\n                return nextOffset;\n            }\n            return offset;\n        };\n        this.onKeyDown = (event) => {\n            switch (event.key) {\n                case KeyboardKey.ArrowRight:\n                    this.goToNextTab(event);\n                    break;\n                case KeyboardKey.ArrowLeft:\n                    this.goToPreviousTab(event);\n                    break;\n                case KeyboardKey.Space:\n                case KeyboardKey.Enter:\n                    this.activateFocusedTab(event);\n                    break;\n            }\n        };\n        this.onClickSelect = (event, index) => {\n            this.selectNextTabEvent(event, index);\n        };\n        this.onMouseDown = (event) => {\n            event.preventDefault();\n        };\n        this.callbacks = {\n            onClick: this.onClickSelect,\n            onMouseDown: this.onMouseDown,\n        };\n        this.catchTabPanelHost = (el) => {\n            this.tabPanelHost = el;\n        };\n        this._align = 'top';\n        this._hasCreateButton = false;\n        this._selected = 0;\n        this.state = {\n            _align: 'top',\n            _label: '',\n            _selected: 0,\n            _tabs: [],\n        };\n        this.selectNextNotDisabledTab = (selected, tabs, upOrDown = true, initialSelected) => {\n            if (selected > tabs.length - 1) {\n                selected = tabs.length - 1;\n            }\n            if (selected < 0) {\n                selected = 0;\n            }\n            if (Array.isArray(tabs) && tabs[selected]) {\n                if (tabs[selected]._disabled) {\n                    if (upOrDown === true) {\n                        if (selected < tabs.length - 1) {\n                            return this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n                        }\n                        else {\n                            selected = initialSelected || selected;\n                            upOrDown = false;\n                        }\n                    }\n                    if (upOrDown === false) {\n                        if (selected > 0) {\n                            return this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n                        }\n                        else {\n                            devHint(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`);\n                        }\n                    }\n                }\n            }\n            return selected;\n        };\n        this.syncSelectedAndTabs = (nextValue, nextState, _component, key) => {\n            let selected;\n            if (key === '_selected') {\n                selected = nextValue;\n            }\n            else {\n                selected = this.state._selected;\n            }\n            let tabs;\n            if (key === '_tabs') {\n                tabs = nextValue;\n            }\n            else {\n                tabs = this.state._tabs;\n            }\n            if (tabs.length > 0) {\n                nextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n            }\n        };\n        this.refreshTabPanels = () => {\n            var _a, _b, _c, _d;\n            if (!this.tabPanelHost)\n                return;\n            while (this.tabPanelHost.firstChild) {\n                this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);\n            }\n            for (let i = 0; i < ((_a = this.state._tabs) === null || _a === void 0 ? void 0 : _a.length); i++) {\n                const div = document.createElement('div');\n                div.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n                div.setAttribute('id', `tabpanel-${i}`);\n                div.setAttribute('role', 'tabpanel');\n                div.setAttribute('hidden', '');\n                const slot = document.createElement('slot');\n                slot.setAttribute('name', `tabpanel-slot-${i}`);\n                div.appendChild(slot);\n                (_b = this.tabPanelHost) === null || _b === void 0 ? void 0 : _b.appendChild(div);\n                if (typeof HTMLCollection !== 'undefined' && ((_c = this.host) === null || _c === void 0 ? void 0 : _c.children) instanceof HTMLCollection && ((_d = this.host) === null || _d === void 0 ? void 0 : _d.children[i])) {\n                    this.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n                }\n            }\n            this.updateVisiblePanel();\n        };\n        this.updateVisiblePanel = () => {\n            if (!this.tabPanelHost)\n                return;\n            Array.from(this.tabPanelHost.children).forEach((child, i) => {\n                if (i === this.state._selected) {\n                    child.removeAttribute('hidden');\n                }\n                else {\n                    child.setAttribute('hidden', '');\n                }\n            });\n        };\n        this.onCreate = (event) => {\n            var _a, _b;\n            event.preventDefault();\n            (_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onCreate) === null || _b === void 0 ? void 0 : _b.call(_a, event);\n            if (this.host) {\n                dispatchDomEvent(this.host, KolEvent.create);\n            }\n        };\n        this.onBlur = () => {\n            this.currentFocusIndex = undefined;\n        };\n    }\n    getCurrentFocusIndex() {\n        if (typeof this.currentFocusIndex === 'number') {\n            return this.currentFocusIndex;\n        }\n        return this.state._selected;\n    }\n    getKeyboardTabChangeMode() {\n        if (this._behavior === 'select-manual') {\n            return 'selectFocusOnly';\n        }\n        return 'activateCompletely';\n    }\n    goToNextTab(event) {\n        const nextFocusIndex = this.nextPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n        this.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n    }\n    goToPreviousTab(event) {\n        const nextFocusIndex = this.prevPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n        this.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n    }\n    activateFocusedTab(event) {\n        if (typeof this.currentFocusIndex === 'number') {\n            this.onSelect(event, this.currentFocusIndex);\n        }\n    }\n    selectNextTabEvent(event, nextTabIndex, changeMode = 'activateCompletely') {\n        var _a, _b;\n        this.currentFocusIndex = nextTabIndex;\n        this.focusTabById(nextTabIndex);\n        if (changeMode === 'activateCompletely') {\n            this._selected = nextTabIndex;\n            const tab = this.state._tabs[nextTabIndex];\n            (_b = (_a = tab._on) === null || _a === void 0 ? void 0 : _a.onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, event, nextTabIndex);\n            this.onSelect(event, nextTabIndex);\n        }\n    }\n    renderButtonGroup() {\n        return (h(\"div\", { \"aria-label\": this.state._label, class: \"kol-tabs__button-group\", role: \"tablist\", onKeyDown: this.onKeyDown, onBlur: this.onBlur }, this.state._tabs.map((button, index) => (h(KolButtonWcTag, { _disabled: button._disabled, _icons: button._icons, _hideLabel: button._hideLabel, _label: button._label, _on: this.callbacks, _tabIndex: this.state._selected === index ? 0 : -1, _tooltipAlign: button._tooltipAlign, _buttonVariant: this.state._selected === index ? 'custom' : undefined, _customClass: this.state._selected === index ? 'selected' : undefined, _ariaControls: `tabpanel-${index}`, _ariaSelected: this.state._selected === index, _id: `${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, _role: \"tab\", _value: index }))), this.state._hasCreateButton && (h(KolButtonWcTag, { class: \"kol-tabs__button-create\", _label: this.onCreateLabel, _on: {\n                onClick: this.onCreate,\n            }, _icons: \"codicon codicon-plus\", \"data-testid\": \"tabs-create-button\" }))));\n    }\n    render() {\n        return (h(\"div\", { key: '651b397e4e56da8694268e5670dd12da67fb4430', ref: (el) => {\n                this.tabPanelsElement = el;\n            }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), h(\"div\", { key: '2583e66740101758cdf796a45961142384bf9fdf', class: \"kol-tabs__content\", ref: this.catchTabPanelHost })));\n    }\n    validateAlign(value) {\n        validateAlign(this, value);\n    }\n    validateBehavior(value) {\n        validateTabBehavior(this, value);\n    }\n    validateHasCreateButton(value) {\n        validateHasCreateButton(this, value);\n    }\n    validateLabel(value) {\n        validateLabel(this, value, {\n            required: true,\n        });\n    }\n    validateOn(value) {\n        if (typeof value === 'object' && value !== null) {\n            const callbacks = {};\n            if (typeof value.onCreate === 'function') {\n                callbacks.onCreate = value.onCreate;\n            }\n            if (typeof value.onSelect === 'function') {\n                callbacks.onSelect = value.onSelect;\n            }\n            setState(this, '_on', callbacks);\n        }\n    }\n    validateSelected(value) {\n        watchNumber(this, '_selected', value, {\n            hooks: {\n                beforePatch: this.syncSelectedAndTabs,\n            },\n        });\n    }\n    validateTabs(value) {\n        watchJsonArrayString(this, '_tabs', (item) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0, value, undefined, {\n            hooks: {\n                beforePatch: this.syncSelectedAndTabs,\n                afterPatch: this.refreshTabPanels,\n            },\n        });\n        uiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n    }\n    componentWillLoad() {\n        this.validateAlign(this._align);\n        this.validateLabel(this._label);\n        this.validateOn(this._on);\n        this.validateSelected(this._selected);\n        this.validateTabs(this._tabs);\n        this.validateBehavior(this._behavior);\n        this.validateHasCreateButton(this._hasCreateButton);\n    }\n    componentDidRender() {\n        this.refreshTabPanels();\n    }\n    focusTabById(index) {\n        if (this.tabPanelsElement) {\n            const button = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n            button === null || button === void 0 ? void 0 : button.focus();\n        }\n    }\n    onSelect(event, index) {\n        var _a, _b;\n        (_b = (_a = this._on) === null || _a === void 0 ? void 0 : _a.onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, event, index);\n        if (this.host) {\n            dispatchDomEvent(this.host, KolEvent.select, index);\n        }\n        this.focusTabById(index);\n    }\n    get host() { return getElement(this); }\n    static get watchers() { return {\n        \"_align\": [\"validateAlign\"],\n        \"_behavior\": [\"validateBehavior\"],\n        \"_hasCreateButton\": [\"validateHasCreateButton\"],\n        \"_label\": [\"validateLabel\"],\n        \"_on\": [\"validateOn\"],\n        \"_selected\": [\"validateSelected\"],\n        \"_tabs\": [\"validateTabs\"]\n    }; }\n};\nKolTabs.style = {\n    default: defaultStyleCss\n};\n\nexport { KolTabs as kol_tabs };\n//# sourceMappingURL=kol-tabs.entry.js.map\n"],"names":["tabBehaviorPropTypeOptions","validateTabBehavior","component","value","watchValidator","validateHasCreateButton","watchBoolean","defaultStyleCss","KolTabs","hostRef","registerInstance","translate","tabs","offset","step","nextOffset","event","KeyboardKey","index","el","selected","upOrDown","initialSelected","devHint","nextValue","nextState","_component","key","_a","_b","_c","_d","i","div","slot","child","dispatchDomEvent","KolEvent","nextFocusIndex","nextTabIndex","changeMode","h","button","KolButtonWcTag","clsx","validateAlign","validateLabel","callbacks","setState","watchNumber","watchJsonArrayString","item","uiUxHintMillerscheZahl","koliBriQuerySelector","getElement"],"mappings":"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"}