@public-ui/components 4.1.2-rc.5 → 4.1.2-rc.7

package/dist/cjs/kol-toolbar.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CK2nrnns.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),componentNames=require("./component-names-5aGrrIj9.js"),common=require("./common-BDQKBMeS.js"),label=require("./label-DBPPhxGb.js"),keyboard=require("./keyboard-BfFtSnNy.js"),orientation=require("./orientation-07bwEJHd.js"),elementFocus=require("./element-focus-WQBz86oY.js");const validateToolbarItems=(n,e)=>{common.emptyStringByArrayHandler(e,()=>{common.objectObjectHandler(e,()=>{void 0===e&&(e=[]);try{e=common.parseJson(e)}catch(n){}Array.isArray(e)&&e.every(n=>"object"==typeof n&&null!==n)&&common.setState(n,"_items",e)})})},defaultStyleCss='@charset "UTF-8";\n/* 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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774619801488"); /* IE9*/\n  src: url("kolicons.eot?t=1774619801488#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774619801488") format("woff2"), url("kolicons.woff?t=1774619801488") format("woff"), url("kolicons.ttf?t=1774619801488") format("truetype"), url("kolicons.svg?t=1774619801488#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-house::before {\n  content: "\\ea10";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea11";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea12";\n}\n\n.kolicon-link::before {\n  content: "\\ea13";\n}\n\n.kolicon-minus::before {\n  content: "\\ea14";\n}\n\n.kolicon-plus::before {\n  content: "\\ea15";\n}\n\n.kolicon-settings::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea18";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea19";\n}\n\n.kolicon-up::before {\n  content: "\\ea1a";\n}\n\n.kolicon-version::before {\n  content: "\\ea1b";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\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-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-link__text {\n    flex: 1 0 100%;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\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-toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .kol-toolbar--orientation-vertical {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .kol-toolbar--orientation-vertical .kol-span {\n    align-items: flex-start;\n  }\n  .kol-toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}',KolToolbar=class{constructor(n){index.registerInstance(this,n),this.state={_label:"",_items:[]},this.currentIndex=0,this.indexToElement=new Map,this.renderItem=(n,e)=>{const t=this.normalizeItem(n),o=e!==this.currentIndex||(null==t?void 0:t._disabled)?-1:0,i={key:e,class:"button normal kol-toolbar__item",_tabIndex:o,_variant:"normal"},l=n=>{n&&this.indexToElement.set(e,n)};return"link"===t.type?index.h(componentNames.KolLinkWcTag,Object.assign({},i,t,{ref:l})):index.h(componentNames.KolButtonWcTag,Object.assign({},i,t,{ref:l}))}}async focus(){const n=this.indexToElement.get(this.currentIndex);if(n)return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(n))}normalizeItem(n){const{_icons:e,_disabled:t}=n,o=tslib_es6.__rest(n,["_icons","_disabled"]);return Object.assign(Object.assign({},o),{_icons:e,_disabled:t})}render(){return index.h("div",{key:"77ec0acc0ce6d967d49e96d67f0d5c041f6b52a2",class:`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`,role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem))}validateLabel(n){label.validateLabel(this,n)}validateItems(n){validateToolbarItems(this,n),this.indexToElement.clear(),this.setFirstEnabledItemIndex()}validateOrientation(n){orientation.validateOrientation(this,n)}getCurrentToolbarItem(n){return"number"==typeof n?this.indexToElement.get(n):void 0}setFirstEnabledItemIndex(){var n;this.currentIndex=null===(n=this.state._items)||void 0===n?void 0:n.findIndex(n=>!n._disabled)}handleKeyDown(n){var e,t,o,i;const l=n.code;if(![keyboard.KeyboardKey.ArrowUp,keyboard.KeyboardKey.ArrowDown,keyboard.KeyboardKey.ArrowRight,keyboard.KeyboardKey.ArrowLeft].includes(l))return;n.preventDefault();const a=(null!==(t=null===(e=this._items)||void 0===e?void 0:e.length)&&void 0!==t?t:0)-1;if(a<0)return;const r=this.currentIndex;let s=r;switch(l){case keyboard.KeyboardKey.ArrowUp:case keyboard.KeyboardKey.ArrowLeft:s=r>0?r-1:a;break;case keyboard.KeyboardKey.ArrowDown:case keyboard.KeyboardKey.ArrowRight:s=r<a?r+1:0}if(r===s)return;if(null===(i=null===(o=this.state._items)||void 0===o?void 0:o[s])||void 0===i?void 0:i._disabled)return;this.currentIndex=s;const c=this.getCurrentToolbarItem(s);this.host&&(null==c||c.focus())}handleBlur(n){n.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.validateOrientation(this._orientation),this.setFirstEnabledItemIndex()}get host(){return index.getElement(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"],_orientation:["validateOrientation"]}}};KolToolbar.style={default:defaultStyleCss},exports.kol_toolbar=KolToolbar;
+"use strict";var index=require("./index-DT9bjXlJ.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),componentNames=require("./component-names-CLJnvcGE.js"),common=require("./common-CyOOsddt.js"),label=require("./label-BpdiumjJ.js"),keyboard=require("./keyboard-BfFtSnNy.js"),orientation=require("./orientation-CB8_FW89.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");const validateToolbarItems=(n,e)=>{common.emptyStringByArrayHandler(e,()=>{common.objectObjectHandler(e,()=>{void 0===e&&(e=[]);try{e=common.parseJson(e)}catch(n){}Array.isArray(e)&&e.every(n=>"object"==typeof n&&null!==n)&&common.setState(n,"_items",e)})})},defaultStyleCss='@charset "UTF-8";\n/* 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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774956515321"); /* IE9*/\n  src: url("kolicons.eot?t=1774956515321#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774956515321") format("woff2"), url("kolicons.woff?t=1774956515321") format("woff"), url("kolicons.ttf?t=1774956515321") format("truetype"), url("kolicons.svg?t=1774956515321#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\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-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-link__text {\n    flex: 1 0 100%;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\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-toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .kol-toolbar--orientation-vertical {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .kol-toolbar--orientation-vertical .kol-span {\n    align-items: flex-start;\n  }\n  .kol-toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}',KolToolbar=class{constructor(n){index.registerInstance(this,n),this.state={_label:"",_items:[]},this.currentIndex=0,this.indexToElement=new Map,this.renderItem=(n,e)=>{const t=this.normalizeItem(n),o=e!==this.currentIndex||(null==t?void 0:t._disabled)?-1:0,i={key:e,class:"button normal kol-toolbar__item",_tabIndex:o,_variant:"normal"},l=n=>{n&&this.indexToElement.set(e,n)};return"link"===t.type?index.h(componentNames.KolLinkWcTag,Object.assign({},i,t,{ref:l})):index.h(componentNames.KolButtonWcTag,Object.assign({},i,t,{ref:l}))}}async focus(){const n=this.indexToElement.get(this.currentIndex);if(n)return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(n))}async click(){const n=this.indexToElement.get(this.currentIndex);if(n)return elementClick.delegateClick(this.host,async()=>elementClick.setClick(n))}normalizeItem(n){const{_icons:e,_disabled:t}=n,o=tslib_es6.__rest(n,["_icons","_disabled"]);return Object.assign(Object.assign({},o),{_icons:e,_disabled:t})}render(){return index.h("div",{key:"305cc9c0d48d972a6414bb8c4d0c422b76f98214",class:`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`,role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem))}validateLabel(n){label.validateLabel(this,n)}validateItems(n){validateToolbarItems(this,n),this.indexToElement.clear(),this.setFirstEnabledItemIndex()}validateOrientation(n){orientation.validateOrientation(this,n)}getCurrentToolbarItem(n){return"number"==typeof n?this.indexToElement.get(n):void 0}setFirstEnabledItemIndex(){var n;this.currentIndex=null===(n=this.state._items)||void 0===n?void 0:n.findIndex(n=>!n._disabled)}handleKeyDown(n){var e,t,o,i;const l=n.code;if(![keyboard.KeyboardKey.ArrowUp,keyboard.KeyboardKey.ArrowDown,keyboard.KeyboardKey.ArrowRight,keyboard.KeyboardKey.ArrowLeft].includes(l))return;n.preventDefault();const a=(null!==(t=null===(e=this._items)||void 0===e?void 0:e.length)&&void 0!==t?t:0)-1;if(a<0)return;const r=this.currentIndex;let s=r;switch(l){case keyboard.KeyboardKey.ArrowUp:case keyboard.KeyboardKey.ArrowLeft:s=r>0?r-1:a;break;case keyboard.KeyboardKey.ArrowDown:case keyboard.KeyboardKey.ArrowRight:s=r<a?r+1:0}if(r===s)return;if(null===(i=null===(o=this.state._items)||void 0===o?void 0:o[s])||void 0===i?void 0:i._disabled)return;this.currentIndex=s;const c=this.getCurrentToolbarItem(s);this.host&&(null==c||c.focus())}handleBlur(n){n.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.validateOrientation(this._orientation),this.setFirstEnabledItemIndex()}get host(){return index.getElement(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"],_orientation:["validateOrientation"]}}};KolToolbar.style={default:defaultStyleCss},exports.kol_toolbar=KolToolbar;

package/dist/cjs/kol-toolbar.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-toolbar.entry.cjs.js","sources":["src/schema/props/toolbar-items.ts","src/components/toolbar/style.scss?tag=kol-toolbar&mode=default&encapsulation=shadow","src/components/toolbar/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { InternalButtonProps, LinkProps } from '../../schema';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState } from '../utils';\n\n/* types */\nexport type ToolbarItemPropType =\n\t| ({\n\t\t\ttype: 'button';\n\t  } & InternalButtonProps)\n\t| ({\n\t\t\ttype: 'link';\n\t  } & LinkProps);\nexport type ToolbarItemsPropType = ToolbarItemPropType[];\n\n/**\n * Defines the primary toolbar items.\n */\nexport type PropToolbarItems = {\n\titems: ToolbarItemsPropType;\n};\n\n/* validator */\nexport const validateToolbarItems = (component: Generic.Element.Component, value?: ToolbarItemsPropType): void => {\n\temptyStringByArrayHandler(value, () => {\n\t\tobjectObjectHandler(value, () => {\n\t\t\tif (typeof value === 'undefined') {\n\t\t\t\tvalue = [];\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ToolbarItemPropType[]>(value);\n\t\t\t} catch {\n\t\t\t\t// value keeps the original items\n\t\t\t}\n\t\t\tif (Array.isArray(value) && value.every((items: ToolbarItemPropType) => typeof items === 'object' && items !== null)) {\n\t\t\t\tsetState(component, '_items', value);\n\t\t\t}\n\t\t});\n\t});\n};\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/button.mixin' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-link');\n\t@include kol-button-styles('kol-button');\n\n\t.kol-toolbar {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\n\t\t&--orientation-vertical {\n\t\t\tflex-direction: column;\n\t\t\talign-items: stretch;\n\n\t\t\t.kol-span {\n\t\t\t\talign-items: flex-start;\n\t\t\t}\n\t\t}\n\n\t\t&:focus-within {\n\t\t\toutline: 1px solid;\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { FocusableElement, LabelPropType, ToolbarAPI, ToolbarItemPropType, ToolbarItemsPropType, ToolbarStates } from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KeyboardKey } from '../../schema/enums';\nimport type { OrientationPropType } from '../../schema/props/orientation';\nimport { validateOrientation } from '../../schema/props/orientation';\nimport { delegateFocus, setFocus } from '../../utils/element-focus';\n\n@Component({\n\ttag: 'kol-toolbar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToolbar implements ToolbarAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLElement;\n\n\t@State() public state: ToolbarStates = {\n\t\t_label: '',\n\t\t_items: [],\n\t};\n\n\t@State() private currentIndex: number = 0;\n\n\tprivate indexToElement = new Map<number, HTMLKolLinkWcElement | HTMLKolButtonWcElement>();\n\n\t/**\n\t * Sets focus on the currently active toolbar item.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\tconst firstEnabledItem = this.indexToElement.get(this.currentIndex);\n\t\tif (firstEnabledItem) {\n\t\t\treturn delegateFocus(this.host!, () => setFocus(firstEnabledItem));\n\t\t}\n\t}\n\n\tprivate normalizeItem(item: ToolbarItemPropType): ToolbarItemPropType {\n\t\tconst { _icons, _disabled, ...rest } = item;\n\t\treturn { ...rest, _icons, _disabled };\n\t}\n\tprivate renderItem = (raw: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst element = this.normalizeItem(raw);\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\n\n\t\tconst props = {\n\t\t\tkey: index,\n\t\t\tclass: 'button normal kol-toolbar__item',\n\t\t\t_tabIndex: tabIndex,\n\t\t\t_variant: 'normal',\n\t\t};\n\t\tconst catchRef = (el?: HTMLKolLinkWcElement | HTMLKolButtonWcElement) => {\n\t\t\tif (el) this.indexToElement.set(index, el);\n\t\t};\n\t\treturn element.type === 'link' ? (\n\t\t\t<KolLinkWcTag {...props} {...element} ref={catchRef}></KolLinkWcTag>\n\t\t) : (\n\t\t\t<KolButtonWcTag {...props} {...element} ref={catchRef}></KolButtonWcTag>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`} role=\"toolbar\" aria-label={this.state._label}>\n\t\t\t\t{this.state._items.map(this.renderItem)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).\n\t */\n\t@Prop() public _items!: ToolbarItemsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_items')\n\tpublic validateItems(value?: ToolbarItemsPropType): void {\n\t\tvalidateToolbarItems(this, value);\n\t\tthis.indexToElement.clear();\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\tvalidateOrientation(this, value);\n\t}\n\n\t/**\n\t * Retrieves the toolbar item by index if defined.\n\t * If not it use the current index of state.\n\t *\n\t * @returns An array of HTMLElements representing the toolbar items.\n\t */\n\tprivate getCurrentToolbarItem(index?: number): HTMLKolLinkWcElement | HTMLKolButtonWcElement | undefined {\n\t\treturn typeof index === 'number' ? this.indexToElement.get(index) : undefined;\n\t}\n\n\t/**\n\t * Sets the index of the first enabled toolbar item.\n\t */\n\tprivate setFirstEnabledItemIndex() {\n\t\tthis.currentIndex = this.state._items?.findIndex((item) => !item._disabled);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst pressedKey = event.code as KeyboardKey;\n\t\tconst isArrowKey = [KeyboardKey.ArrowUp, KeyboardKey.ArrowDown, KeyboardKey.ArrowRight, KeyboardKey.ArrowLeft].includes(pressedKey);\n\t\tif (!isArrowKey) return;\n\t\tevent.preventDefault();\n\n\t\tconst lastItemIndex = (this._items?.length ?? 0) - 1;\n\t\tif (lastItemIndex < 0) return;\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = currentIndex;\n\n\t\tswitch (pressedKey) {\n\t\t\tcase KeyboardKey.ArrowUp:\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tnextIndex = currentIndex > 0 ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowDown:\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tnextIndex = currentIndex < lastItemIndex ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif (currentIndex === nextIndex) return;\n\n\t\tif (this.state._items?.[nextIndex]?._disabled) return;\n\n\t\tthis.currentIndex = nextIndex;\n\t\tconst item = this.getCurrentToolbarItem(nextIndex);\n\t\tif (this.host) {\n\t\t\tvoid item?.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Resets the tabIndexes of the toolbar to default.\n\t */\n\t@Listen('blur', { capture: true })\n\tpublic handleBlur(event: FocusEvent) {\n\t\tif (event.target === this.host) this.setFirstEnabledItemIndex();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateItems(this._items);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n}\n"],"names":["emptyStringByArrayHandler","objectObjectHandler","parseJson","setState","index","h","KolLinkWcTag","KolButtonWcTag","delegateFocus","setFocus","__rest","validateLabel","validateOrientation","KeyboardKey"],"mappings":"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"}
+{"version":3,"file":"kol-toolbar.entry.cjs.js","sources":["src/schema/props/toolbar-items.ts","src/components/toolbar/style.scss?tag=kol-toolbar&mode=default&encapsulation=shadow","src/components/toolbar/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { InternalButtonProps, LinkProps } from '../../schema';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState } from '../utils';\n\n/* types */\nexport type ToolbarItemPropType =\n\t| ({\n\t\t\ttype: 'button';\n\t  } & InternalButtonProps)\n\t| ({\n\t\t\ttype: 'link';\n\t  } & LinkProps);\nexport type ToolbarItemsPropType = ToolbarItemPropType[];\n\n/**\n * Defines the primary toolbar items.\n */\nexport type PropToolbarItems = {\n\titems: ToolbarItemsPropType;\n};\n\n/* validator */\nexport const validateToolbarItems = (component: Generic.Element.Component, value?: ToolbarItemsPropType): void => {\n\temptyStringByArrayHandler(value, () => {\n\t\tobjectObjectHandler(value, () => {\n\t\t\tif (typeof value === 'undefined') {\n\t\t\t\tvalue = [];\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ToolbarItemPropType[]>(value);\n\t\t\t} catch {\n\t\t\t\t// value keeps the original items\n\t\t\t}\n\t\t\tif (Array.isArray(value) && value.every((items: ToolbarItemPropType) => typeof items === 'object' && items !== null)) {\n\t\t\t\tsetState(component, '_items', value);\n\t\t\t}\n\t\t});\n\t});\n};\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/button.mixin' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-link');\n\t@include kol-button-styles('kol-button');\n\n\t.kol-toolbar {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\n\t\t&--orientation-vertical {\n\t\t\tflex-direction: column;\n\t\t\talign-items: stretch;\n\n\t\t\t.kol-span {\n\t\t\t\talign-items: flex-start;\n\t\t\t}\n\t\t}\n\n\t\t&:focus-within {\n\t\t\toutline: 1px solid;\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { FocusableElement, LabelPropType, ToolbarAPI, ToolbarItemPropType, ToolbarItemsPropType, ToolbarStates } from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KeyboardKey } from '../../schema/enums';\nimport type { OrientationPropType } from '../../schema/props/orientation';\nimport { validateOrientation } from '../../schema/props/orientation';\nimport { delegateClick, setClick } from '../../utils/element-click';\nimport { delegateFocus, setFocus } from '../../utils/element-focus';\n\n@Component({\n\ttag: 'kol-toolbar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToolbar implements ToolbarAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLElement;\n\n\t@State() public state: ToolbarStates = {\n\t\t_label: '',\n\t\t_items: [],\n\t};\n\n\t@State() private currentIndex: number = 0;\n\n\tprivate indexToElement = new Map<number, HTMLKolLinkWcElement | HTMLKolButtonWcElement>();\n\n\t/**\n\t * Sets focus on the currently active toolbar item.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\tconst firstEnabledItem = this.indexToElement.get(this.currentIndex);\n\t\tif (firstEnabledItem) {\n\t\t\treturn delegateFocus(this.host!, () => setFocus(firstEnabledItem));\n\t\t}\n\t}\n\n\t/**\n\t * Triggers a click on the currently active toolbar item.\n\t */\n\t@Method()\n\tpublic async click(): Promise<void> {\n\t\tconst currentItem = this.indexToElement.get(this.currentIndex);\n\t\tif (currentItem) {\n\t\t\treturn delegateClick(this.host!, async () => setClick(currentItem));\n\t\t}\n\t}\n\n\tprivate normalizeItem(item: ToolbarItemPropType): ToolbarItemPropType {\n\t\tconst { _icons, _disabled, ...rest } = item;\n\t\treturn { ...rest, _icons, _disabled };\n\t}\n\tprivate renderItem = (raw: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst element = this.normalizeItem(raw);\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\n\n\t\tconst props = {\n\t\t\tkey: index,\n\t\t\tclass: 'button normal kol-toolbar__item',\n\t\t\t_tabIndex: tabIndex,\n\t\t\t_variant: 'normal',\n\t\t};\n\t\tconst catchRef = (el?: HTMLKolLinkWcElement | HTMLKolButtonWcElement) => {\n\t\t\tif (el) this.indexToElement.set(index, el);\n\t\t};\n\t\treturn element.type === 'link' ? (\n\t\t\t<KolLinkWcTag {...props} {...element} ref={catchRef}></KolLinkWcTag>\n\t\t) : (\n\t\t\t<KolButtonWcTag {...props} {...element} ref={catchRef}></KolButtonWcTag>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`} role=\"toolbar\" aria-label={this.state._label}>\n\t\t\t\t{this.state._items.map(this.renderItem)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).\n\t */\n\t@Prop() public _items!: ToolbarItemsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_items')\n\tpublic validateItems(value?: ToolbarItemsPropType): void {\n\t\tvalidateToolbarItems(this, value);\n\t\tthis.indexToElement.clear();\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\tvalidateOrientation(this, value);\n\t}\n\n\t/**\n\t * Retrieves the toolbar item by index if defined.\n\t * If not it use the current index of state.\n\t *\n\t * @returns An array of HTMLElements representing the toolbar items.\n\t */\n\tprivate getCurrentToolbarItem(index?: number): HTMLKolLinkWcElement | HTMLKolButtonWcElement | undefined {\n\t\treturn typeof index === 'number' ? this.indexToElement.get(index) : undefined;\n\t}\n\n\t/**\n\t * Sets the index of the first enabled toolbar item.\n\t */\n\tprivate setFirstEnabledItemIndex() {\n\t\tthis.currentIndex = this.state._items?.findIndex((item) => !item._disabled);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst pressedKey = event.code as KeyboardKey;\n\t\tconst isArrowKey = [KeyboardKey.ArrowUp, KeyboardKey.ArrowDown, KeyboardKey.ArrowRight, KeyboardKey.ArrowLeft].includes(pressedKey);\n\t\tif (!isArrowKey) return;\n\t\tevent.preventDefault();\n\n\t\tconst lastItemIndex = (this._items?.length ?? 0) - 1;\n\t\tif (lastItemIndex < 0) return;\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = currentIndex;\n\n\t\tswitch (pressedKey) {\n\t\t\tcase KeyboardKey.ArrowUp:\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tnextIndex = currentIndex > 0 ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowDown:\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tnextIndex = currentIndex < lastItemIndex ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif (currentIndex === nextIndex) return;\n\n\t\tif (this.state._items?.[nextIndex]?._disabled) return;\n\n\t\tthis.currentIndex = nextIndex;\n\t\tconst item = this.getCurrentToolbarItem(nextIndex);\n\t\tif (this.host) {\n\t\t\tvoid item?.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Resets the tabIndexes of the toolbar to default.\n\t */\n\t@Listen('blur', { capture: true })\n\tpublic handleBlur(event: FocusEvent) {\n\t\tif (event.target === this.host) this.setFirstEnabledItemIndex();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateItems(this._items);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n}\n"],"names":["emptyStringByArrayHandler","objectObjectHandler","parseJson","setState","index","h","KolLinkWcTag","KolButtonWcTag","delegateFocus","setFocus","delegateClick","setClick","__rest","validateLabel","validateOrientation","KeyboardKey"],"mappings":";;;;;;;;;;;;;;;AAuBO,MAAM,oBAAoB,GAAG,CAAC,SAAoC,EAAE,KAA4B,KAAU;AAChH,IAAAA,gCAAyB,CAAC,KAAK,EAAE,MAAK;AACrC,QAAAC,0BAAmB,CAAC,KAAK,EAAE,MAAK;AAC/B,YAAA,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE;gBACjC,KAAK,GAAG,EAAE;;AAEX,YAAA,IAAI;AACH,gBAAA,KAAK,GAAGC,gBAAS,CAAwB,KAAK,CAAC;;YAC9C,OAAA,EAAA,EAAM;;YAGR,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,KAA0B,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE;AACrH,gBAAAC,eAAQ,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC;;AAEtC,SAAC,CAAC;AACH,KAAC,CAAC;AACH,CAAC;;ACvCD,MAAM,eAAe,GAAG,61VAA61V;;MCmBx2V,UAAU,GAAA,MAAA;AAPvB,IAAA,WAAA,CAAA,OAAA,EAAA;;QAUiB,IAAA,CAAA,KAAK,GAAkB;AACtC,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,MAAM,EAAE,EAAE;SACV;AAEgB,QAAA,IAAY,CAAA,YAAA,GAAW,CAAC;AAEjC,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,GAAG,EAAyD;QA4BjF,IAAA,CAAA,UAAU,GAAG,CAAC,GAAwB,EAAEC,OAAa,KAAiB;YAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;AACvC,YAAA,MAAM,QAAQ,GAAGA,OAAK,KAAK,IAAI,CAAC,YAAY,IAAI,EAAC,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,MAAA,GAAA,MAAA,GAAA,OAAO,CAAE,SAAS,CAAA,GAAG,CAAC,GAAG,EAAE;AAE5E,YAAA,MAAM,KAAK,GAAG;AACb,gBAAA,GAAG,EAAEA,OAAK;AACV,gBAAA,KAAK,EAAE,iCAAiC;AACxC,gBAAA,SAAS,EAAE,QAAQ;AACnB,gBAAA,QAAQ,EAAE,QAAQ;aAClB;AACD,YAAA,MAAM,QAAQ,GAAG,CAAC,EAAkD,KAAI;AACvE,gBAAA,IAAI,EAAE;oBAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAACA,OAAK,EAAE,EAAE,CAAC;AAC3C,aAAC;YACD,OAAO,OAAO,CAAC,IAAI,KAAK,MAAM,IAC7BC,OAAA,CAACC,2BAAY,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,EAAM,OAAO,IAAE,GAAG,EAAE,QAAQ,EAAA,CAAA,CAAiB,KAEpED,QAACE,6BAAc,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAM,OAAO,EAAE,EAAA,GAAG,EAAE,QAAQ,EAAA,CAAA,CAAmB,CACxE;AACF,SAAC;AA0GD;AAlJO,IAAA,MAAM,KAAK,GAAA;AACjB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACnE,IAAI,gBAAgB,EAAE;AACrB,YAAA,OAAOC,0BAAa,CAAC,IAAI,CAAC,IAAK,EAAE,MAAMC,qBAAQ,CAAC,gBAAgB,CAAC,CAAC;;;AAQ7D,IAAA,MAAM,KAAK,GAAA;AACjB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QAC9D,IAAI,WAAW,EAAE;AAChB,YAAA,OAAOC,0BAAa,CAAC,IAAI,CAAC,IAAK,EAAE,YAAYC,qBAAQ,CAAC,WAAW,CAAC,CAAC;;;AAI7D,IAAA,aAAa,CAAC,IAAyB,EAAA;QAC9C,MAAM,EAAE,MAAM,EAAE,SAAS,EAAc,GAAA,IAAI,EAAb,IAAI,GAAKC,gBAAA,CAAA,IAAI,EAArC,CAAA,QAAA,EAAA,WAAA,CAA8B,CAAO;AAC3C,QAAA,OAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAY,IAAI,CAAA,EAAA,EAAE,MAAM,EAAE,SAAS,EAAG,CAAA;;IAsBhC,MAAM,GAAA;QACZ,QACCP,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,qCAAA,EAAwC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAA,CAAE,EAAE,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,KAAK,CAAC,MAAM,EACzH,EAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAClC;;AAmBS,IAAA,aAAa,CAAC,KAAqB,EAAA;AACnD,QAAAQ,mBAAa,CAAC,IAAI,EAAE,KAAK,CAAC;;AAIpB,IAAA,aAAa,CAAC,KAA4B,EAAA;AAChD,QAAA,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC;AACjC,QAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;QAC3B,IAAI,CAAC,wBAAwB,EAAE;;AAIzB,IAAA,mBAAmB,CAAC,KAA2B,EAAA;AACrD,QAAAC,+BAAmB,CAAC,IAAI,EAAE,KAAK,CAAC;;AASzB,IAAA,qBAAqB,CAAC,KAAc,EAAA;AAC3C,QAAA,OAAO,OAAO,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,SAAS;;IAMtE,wBAAwB,GAAA;;AAC/B,QAAA,IAAI,CAAC,YAAY,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,CAAC,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;;AAIrE,IAAA,aAAa,CAAC,KAAoB,EAAA;;AACxC,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,IAAmB;QAC5C,MAAM,UAAU,GAAG,CAACC,oBAAW,CAAC,OAAO,EAAEA,oBAAW,CAAC,SAAS,EAAEA,oBAAW,CAAC,UAAU,EAAEA,oBAAW,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC;AACnI,QAAA,IAAI,CAAC,UAAU;YAAE;QACjB,KAAK,CAAC,cAAc,EAAE;QAEtB,MAAM,aAAa,GAAG,CAAC,CAAA,EAAA,GAAA,MAAA,IAAI,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC,IAAI,CAAC;QACpD,IAAI,aAAa,GAAG,CAAC;YAAE;AACvB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY;QACtC,IAAI,SAAS,GAAG,YAAY;QAE5B,QAAQ,UAAU;YACjB,KAAKA,oBAAW,CAAC,OAAO;YACxB,KAAKA,oBAAW,CAAC,SAAS;AACzB,gBAAA,SAAS,GAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,aAAa;gBAC/D;YACD,KAAKA,oBAAW,CAAC,SAAS;YAC1B,KAAKA,oBAAW,CAAC,UAAU;AAC1B,gBAAA,SAAS,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;gBAC/D;;QAGF,IAAI,YAAY,KAAK,SAAS;YAAE;QAEhC,IAAI,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,CAAC,MAAM,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,SAAS,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS;YAAE;AAE/C,QAAA,IAAI,CAAC,YAAY,GAAG,SAAS;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC;AAClD,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACd,MAAK,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,KAAK,EAAE,CAAA;;;AAQb,IAAA,UAAU,CAAC,KAAiB,EAAA;AAClC,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,wBAAwB,EAAE;;IAGzD,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;AAC/B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;AAC/B,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;QAC3C,IAAI,CAAC,wBAAwB,EAAE;;;;;;;;;;;;;;;"}

package/dist/cjs/kol-tooltip-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CK2nrnns.js"),alignFloatingElements=require("./align-floating-elements-BokToY9Z.js"),common=require("./common-BDQKBMeS.js"),align=require("./align-DvUkg_hj.js"),label=require("./label-DBPPhxGb.js"),component=require("./component-_DwAx_X-.js"),dev_utils=require("./dev.utils-Qu8Yt7sC.js"),tooltipOpenTracking=require("./tooltip-open-tracking-Ba0udJRU.js");require("./tslib.es6-7DbU_BSw.js"),require("./bem-registry-BD-sGSzk.js"),require("./clsx-Bm_HQUnh.js"),require("./component-s9gwr6Zh.js"),require("./isArray-BOIOdEQh.js");const validateBadgeText=(e,t)=>{common.watchString(e,"_badgeText",t)},validateId=(e,t)=>{common.watchString(e,"_id",t)},VISIBLE_OVERLAYS=new Set;function showOverlay(e){VISIBLE_OVERLAYS.forEach(e=>{e.style.setProperty("z-index","999")}),VISIBLE_OVERLAYS.add(e),e.style.setProperty("z-index","1000")}function hideOverlay(e){if(VISIBLE_OVERLAYS.delete(e),VISIBLE_OVERLAYS.size>0){const e=Array.from(VISIBLE_OVERLAYS).pop();e&&e.style.setProperty("z-index","1000")}}const KolTooltipWc=class{constructor(e){index.registerInstance(this,e),this.hasFocusIn=!1,this.hasMouseIn=!1,this.isHiddenForCurrentVisit=!1,this.resetHideFlag=()=>{this.isNewVisit()&&(this.isHiddenForCurrentVisit=!1)},this.showTooltip=()=>{var e;if(!this.isHiddenForCurrentVisit&&this.previousSibling&&this.tooltipElement){showOverlay(this.tooltipElement),tooltipOpenTracking.tooltipOpened(),this.tooltipElement.classList.remove("hide"),this.tooltipElement.classList.add("show"),this.tooltipElement.style.setProperty("display","block"),null===(e=this.parentElement)||void 0===e||e.classList.add("hastooltip"),common.getDocument().addEventListener("keyup",this.hideTooltipByEscape,{once:!0});const t=this.previousSibling,i=this.tooltipElement;this.cleanupAutoPositioning=alignFloatingElements.autoUpdate(t,i,()=>{this.alignTooltip()})}},this.hideTooltipByEscape=e=>{"Escape"===e.key&&this.hideTooltip()},this.addListeners=e=>{e.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),e.addEventListener("mouseleave",this.handleMouseLeave.bind(this)),e.addEventListener("focusin",this.handleFocusIn.bind(this)),e.addEventListener("focusout",this.handleFocusOut.bind(this))},this.removeListeners=e=>{e.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),e.removeEventListener("mouseleave",this.handleMouseLeave.bind(this)),e.removeEventListener("focusin",this.handleFocusIn.bind(this)),e.removeEventListener("focusout",this.handleFocusOut.bind(this))},this.resyncListeners=(e,t,i=!1)=>{e&&this.removeListeners(e),t&&(i&&(this.previousSibling=t),this.addListeners(t))},this.catchTooltipElement=e=>{this.tooltipElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this.state={_align:"top",_id:`id-${dev_utils.nonce()}`,_label:""},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout(()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()},300)}}isNewVisit(){return!this.hasMouseIn&&!this.hasFocusIn}async alignTooltip(){this.tooltipElement&&this.previousSibling&&await alignFloatingElements.alignFloatingElements({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}async hideTooltip(){var e;this.isHiddenForCurrentVisit=!0,this.tooltipElement&&(hideOverlay(this.tooltipElement),tooltipOpenTracking.tooltipClosed(),this.tooltipElement.classList.remove("show"),this.tooltipElement.classList.add("hide"),null===(e=this.parentElement)||void 0===e||e.classList.remove("hastooltip"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),common.getDocument().removeEventListener("keyup",this.hideTooltipByEscape)}handleMouseEnter(){const e=this.isNewVisit();this.hasMouseIn=!0,e&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()}handleMouseLeave(){this.hasMouseIn=!1,this.resetHideFlag(),this.showOrHideTooltip()}handleFocusIn(){const e=this.isNewVisit();this.hasFocusIn=!0,e&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()}handleFocusOut(){this.hasFocusIn=!1,this.resetHideFlag(),this.showOrHideTooltip()}render(){return index.h(index.Host,{key:"474a7e5afd25b2d8599edfc600c18c2ebca06368",class:"kol-tooltip"},index.h("div",{key:"c004812971d204ada360ea6c0b346ed44689c11f",class:"kol-tooltip__floating",hidden:0===this.state._label.length,ref:this.catchTooltipElement},index.h("div",{key:"94b98eca5986c79da35dba6e115e01a14c800fe2",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),index.h(component.SpanFC,{key:"15ec92ad556e44fb5dfb1c3bf2131a465fff0d02",class:"kol-tooltip__content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(e){validateBadgeText(this,e)}validateAlign(e){align.validateAlign(this,e)}validateId(e){validateId(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var e;this.resyncListeners(this.previousSibling,null===(e=this.host)||void 0===e?void 0:e.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var e,t;this.previousSibling=null===(e=this.host)||void 0===e?void 0:e.previousElementSibling,this.parentElement=null===(t=this.host)||void 0===t?void 0:t.parentElement}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return index.getElement(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};exports.kol_tooltip_wc=KolTooltipWc;
+"use strict";var index=require("./index-DT9bjXlJ.js"),alignFloatingElements=require("./align-floating-elements-DUp-he6s.js"),common=require("./common-CyOOsddt.js"),align=require("./align-Dgke5npK.js"),label=require("./label-BpdiumjJ.js"),component=require("./component-_osv0u4g.js"),dev_utils=require("./dev.utils-DQ8NbpWO.js"),tooltipOpenTracking=require("./tooltip-open-tracking-Ba0udJRU.js");require("./tslib.es6-7DbU_BSw.js"),require("./bem-registry-BYsM9uZG.js"),require("./clsx-Bm_HQUnh.js"),require("./component-TRu1ySJ5.js"),require("./isArray-BOIOdEQh.js");const validateBadgeText=(e,t)=>{common.watchString(e,"_badgeText",t)},validateId=(e,t)=>{common.watchString(e,"_id",t)},VISIBLE_OVERLAYS=new Set;function showOverlay(e){VISIBLE_OVERLAYS.forEach(e=>{e.style.setProperty("z-index","999")}),VISIBLE_OVERLAYS.add(e),e.style.setProperty("z-index","1000")}function hideOverlay(e){if(VISIBLE_OVERLAYS.delete(e),VISIBLE_OVERLAYS.size>0){const e=Array.from(VISIBLE_OVERLAYS).pop();e&&e.style.setProperty("z-index","1000")}}const KolTooltipWc=class{constructor(e){index.registerInstance(this,e),this.hasFocusIn=!1,this.hasMouseIn=!1,this.isHiddenForCurrentVisit=!1,this.resetHideFlag=()=>{this.isNewVisit()&&(this.isHiddenForCurrentVisit=!1)},this.showTooltip=()=>{var e;if(!this.isHiddenForCurrentVisit&&this.previousSibling&&this.tooltipElement){showOverlay(this.tooltipElement),tooltipOpenTracking.tooltipOpened(),this.tooltipElement.classList.remove("hide"),this.tooltipElement.classList.add("show"),this.tooltipElement.style.setProperty("display","block"),null===(e=this.parentElement)||void 0===e||e.classList.add("hastooltip"),common.getDocument().addEventListener("keyup",this.hideTooltipByEscape,{once:!0});const t=this.previousSibling,i=this.tooltipElement;this.cleanupAutoPositioning=alignFloatingElements.autoUpdate(t,i,()=>{this.alignTooltip()})}},this.hideTooltipByEscape=e=>{"Escape"===e.key&&this.hideTooltip()},this.addListeners=e=>{e.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),e.addEventListener("mouseleave",this.handleMouseLeave.bind(this)),e.addEventListener("focusin",this.handleFocusIn.bind(this)),e.addEventListener("focusout",this.handleFocusOut.bind(this))},this.removeListeners=e=>{e.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),e.removeEventListener("mouseleave",this.handleMouseLeave.bind(this)),e.removeEventListener("focusin",this.handleFocusIn.bind(this)),e.removeEventListener("focusout",this.handleFocusOut.bind(this))},this.resyncListeners=(e,t,i=!1)=>{e&&this.removeListeners(e),t&&(i&&(this.previousSibling=t),this.addListeners(t))},this.catchTooltipElement=e=>{this.tooltipElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this.state={_align:"top",_id:`id-${dev_utils.nonce()}`,_label:""},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout(()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()},300)}}isNewVisit(){return!this.hasMouseIn&&!this.hasFocusIn}async alignTooltip(){this.tooltipElement&&this.previousSibling&&await alignFloatingElements.alignFloatingElements({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}async hideTooltip(){var e;this.isHiddenForCurrentVisit=!0,this.tooltipElement&&(hideOverlay(this.tooltipElement),tooltipOpenTracking.tooltipClosed(),this.tooltipElement.classList.remove("show"),this.tooltipElement.classList.add("hide"),null===(e=this.parentElement)||void 0===e||e.classList.remove("hastooltip"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),common.getDocument().removeEventListener("keyup",this.hideTooltipByEscape)}handleMouseEnter(){const e=this.isNewVisit();this.hasMouseIn=!0,e&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()}handleMouseLeave(){this.hasMouseIn=!1,this.resetHideFlag(),this.showOrHideTooltip()}handleFocusIn(){const e=this.isNewVisit();this.hasFocusIn=!0,e&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()}handleFocusOut(){this.hasFocusIn=!1,this.resetHideFlag(),this.showOrHideTooltip()}render(){return index.h(index.Host,{key:"8cbfd01c8d2926872117a5eb342cd3e536570c84",class:"kol-tooltip"},index.h("div",{key:"fa5ce76b3ca0ec8a0cd407dd03a6150a563a0923",class:"kol-tooltip__floating",hidden:0===this.state._label.length,ref:this.catchTooltipElement},index.h("div",{key:"7e9ae4f2fa73ed7490ada311ea9ad61ca96fee06",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),index.h(component.SpanFC,{key:"8bbf9a6358130a72a15e79d726188ed6e19e205a",class:"kol-tooltip__content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(e){validateBadgeText(this,e)}validateAlign(e){align.validateAlign(this,e)}validateId(e){validateId(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var e;this.resyncListeners(this.previousSibling,null===(e=this.host)||void 0===e?void 0:e.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var e,t;this.previousSibling=null===(e=this.host)||void 0===e?void 0:e.previousElementSibling,this.parentElement=null===(t=this.host)||void 0===t?void 0:t.parentElement}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return index.getElement(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};exports.kol_tooltip_wc=KolTooltipWc;

package/dist/cjs/kol-tree-item-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CK2nrnns.js"),componentNames=require("./component-names-5aGrrIj9.js"),component=require("./component-s9gwr6Zh.js"),common=require("./common-BDQKBMeS.js"),href=require("./href-C5sTy69s.js"),label=require("./label-DBPPhxGb.js"),open=require("./open-C44zbmgu.js"),clsx=require("./clsx-Bm_HQUnh.js"),dev_utils=require("./dev.utils-Qu8Yt7sC.js");require("./tslib.es6-7DbU_BSw.js"),require("./bem-registry-BD-sGSzk.js");const validateActive=(e,t,i)=>{common.watchBoolean(e,"_active",t,i)},KolTreeItemWc=class{constructor(e){index.registerInstance(this,e),this.groupId=`tree-group-${dev_utils.nonce()}`,this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1}}render(){const{_href:e,_active:t,_hasChildren:i,_open:l,_label:s}=this.state;return index.h(index.Host,{key:"84779b44b60d29ae2a4336a1c769d7339b0205ba",onSlotchange:this.handleSlotchange.bind(this)},index.h("li",{key:"d703da510e3406b8a303795fc93b46b30c2bdce1",class:"kol-tree-item",style:{"--level":`${this.level}`}},index.h(componentNames.KolLinkWcTag,{key:"abaee288fee504151843e9de6c9c992f57c6cd8e",class:clsx.clsx("kol-tree-item__link",{"kol-tree-item__link--first-level":0===this.level,"kol-tree-item__link--active":t}),_href:e,_label:"",_role:"treeitem",_tabIndex:t?0:-1,_ariaExpanded:i?l:void 0,_ariaOwns:i?this.groupId:void 0,ref:e=>this.linkElement=e},index.h("span",{key:"7ec7b0cd425a889e8c45dbdedec8b8c479fb2e83",class:"kol-tree-item__link-inner",slot:"expert"},i?index.h("span",{class:"kol-tree-item__toggle-button",onClick:e=>l?void this.handleCollapseClick(e):void this.handleExpandClick(e)},index.h(component.IconFC,{class:"kol-tree-item__toggle-button-icon",icons:"kolicon kolicon-"+(l?"chevron-down":"chevron-right"),label:""})):index.h("span",{class:"kol-tree-item__toggle-button-placeholder"}),index.h("span",{key:"4b99e88bbb624c5af2f1984561ee3aee63f89be9",class:"kol-tree-item__text"},s))),index.h("ul",{key:"2033da37082e68b37e59d87ca6166c65708eaaf7",class:"kol-tree-item__children",hidden:!i||!l,role:"group",id:this.groupId},index.h("slot",{key:"ab4032f2a472db8135267b1eac2374bfe8b5efc8"}))))}validateActive(e){validateActive(this,e||!1)}validateLabel(e){label.validateLabel(this,e)}validateOpen(e){open.validateOpen(this,e)}validateHref(e){href.validateHref(this,e)}componentWillLoad(){this.validateActive(this._active),this.validateLabel(this._label),this.validateOpen(this._open),this.validateHref(this._href),this.checkForChildren(),this.determineTreeItemDepth()}determineTreeItemDepth(){var e,t;let i=0,l=null===(t=null===(e=this.host)||void 0===e?void 0:e.parentNode)||void 0===t?void 0:t.host.parentNode;for(;null!==l&&l.tagName.toLowerCase()!==componentNames.KolTreeTag&&l!==document.body;)l=l.parentElement,i+=1;this.level=i}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e,t,i;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(i=null===(t=null===(e=this.host)||void 0===e?void 0:e.querySelector("slot"))||void 0===t?void 0:t.assignedElements)||void 0===i?void 0:i.call(t).length)})}getTreeParent(){var e,t;let i=this.host;for(;i;){const l=i.closest(componentNames.KolTreeTag);if(l){const t=null===(e=l.shadowRoot)||void 0===e?void 0:e.querySelector("kol-tree-wc");return t||void 0}const s=null===(t=i.getRootNode())||void 0===t?void 0:t.host;if(!s||s===document.body)break;i=s.parentElement}}async focus(){if(this.host&&this.linkElement)return Promise.resolve(this.linkElement.focus())}async handleExpandClick(e){e.preventDefault(),this.host&&this.linkElement&&await this.linkElement.focus(),await this.expand()}async expand(){var e,t;this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(t=null===(e=this.getTreeParent())||void 0===e?void 0:e.invalidateOpenItemsCache)||void 0===t||t.call(e))}async handleCollapseClick(e){e.preventDefault(),this.host&&this.linkElement&&await this.linkElement.focus(),await this.collapse()}async collapse(){var e,t;this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!1}),null===(t=null===(e=this.getTreeParent())||void 0===e?void 0:e.invalidateOpenItemsCache)||void 0===t||t.call(e))}async isOpen(){var e;return null!==(e=this.state._open)&&void 0!==e&&e}get host(){return index.getElement(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}};exports.kol_tree_item_wc=KolTreeItemWc;
+"use strict";var index=require("./index-DT9bjXlJ.js"),componentNames=require("./component-names-CLJnvcGE.js"),component=require("./component-TRu1ySJ5.js"),common=require("./common-CyOOsddt.js"),href=require("./href-JXTXriAu.js"),label=require("./label-BpdiumjJ.js"),open=require("./open-oQb7b0fd.js"),clsx=require("./clsx-Bm_HQUnh.js"),dev_utils=require("./dev.utils-DQ8NbpWO.js");require("./tslib.es6-7DbU_BSw.js"),require("./bem-registry-BYsM9uZG.js");const validateActive=(e,t,i)=>{common.watchBoolean(e,"_active",t,i)},KolTreeItemWc=class{constructor(e){index.registerInstance(this,e),this.groupId=`tree-group-${dev_utils.nonce()}`,this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1}}render(){const{_href:e,_active:t,_hasChildren:i,_open:l,_label:a}=this.state;return index.h(index.Host,{key:"57ffd0dde1ba35fc04f9d9525b8956f4765f546d",onSlotchange:this.handleSlotchange.bind(this)},index.h("li",{key:"c237a29c538f37cc2335ab2a78077132efe506b3",class:"kol-tree-item",style:{"--level":`${this.level}`}},index.h(componentNames.KolLinkWcTag,{key:"4a9f4686ef4d6179adaef9221b6e254de5f0f07d",class:clsx.clsx("kol-tree-item__link",{"kol-tree-item__link--first-level":0===this.level,"kol-tree-item__link--active":t}),_href:e,_label:"",_role:"treeitem",_tabIndex:t?0:-1,_ariaExpanded:i?l:void 0,_ariaOwns:i?this.groupId:void 0,ref:e=>this.linkElement=e},index.h("span",{key:"bcb17465156e65d2d39cef23ec2ccbc58ae251c9",class:"kol-tree-item__link-inner",slot:"expert"},i?index.h("span",{class:"kol-tree-item__toggle-button",onClick:e=>l?void this.handleCollapseClick(e):void this.handleExpandClick(e)},index.h(component.IconFC,{class:"kol-tree-item__toggle-button-icon",icons:"kolicon kolicon-"+(l?"chevron-down":"chevron-right"),label:""})):index.h("span",{class:"kol-tree-item__toggle-button-placeholder"}),index.h("span",{key:"aa9fe2e0e75a9d02272548ddaeac9bd63c8cebd9",class:"kol-tree-item__text"},a))),index.h("ul",{key:"bda2935c8afca6394fe3ea518c7081f907d74cd8",class:"kol-tree-item__children",hidden:!i||!l,role:"group",id:this.groupId},index.h("slot",{key:"26087d40fa445025028991e6b26a7d8e18ebfbeb"}))))}validateActive(e){validateActive(this,e||!1)}validateLabel(e){label.validateLabel(this,e)}validateOpen(e){open.validateOpen(this,e)}validateHref(e){href.validateHref(this,e)}componentWillLoad(){this.validateActive(this._active),this.validateLabel(this._label),this.validateOpen(this._open),this.validateHref(this._href),this.checkForChildren(),this.determineTreeItemDepth()}determineTreeItemDepth(){var e,t;let i=0,l=null===(t=null===(e=this.host)||void 0===e?void 0:e.parentNode)||void 0===t?void 0:t.host.parentNode;for(;null!==l&&l.tagName.toLowerCase()!==componentNames.KolTreeTag&&l!==document.body;)l=l.parentElement,i+=1;this.level=i}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e,t,i;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(i=null===(t=null===(e=this.host)||void 0===e?void 0:e.querySelector("slot"))||void 0===t?void 0:t.assignedElements)||void 0===i?void 0:i.call(t).length)})}getTreeParent(){var e,t;let i=this.host;for(;i;){const l=i.closest(componentNames.KolTreeTag);if(l){const t=null===(e=l.shadowRoot)||void 0===e?void 0:e.querySelector("kol-tree-wc");return t||void 0}const a=null===(t=i.getRootNode())||void 0===t?void 0:t.host;if(!a||a===document.body)break;i=a.parentElement}}async focus(){if(this.host&&this.linkElement)return Promise.resolve(this.linkElement.focus())}async handleExpandClick(e){e.preventDefault(),this.host&&this.linkElement&&await this.linkElement.focus(),await this.expand()}async expand(){var e,t;this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(t=null===(e=this.getTreeParent())||void 0===e?void 0:e.invalidateOpenItemsCache)||void 0===t||t.call(e))}async handleCollapseClick(e){e.preventDefault(),this.host&&this.linkElement&&await this.linkElement.focus(),await this.collapse()}async collapse(){var e,t;this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!1}),null===(t=null===(e=this.getTreeParent())||void 0===e?void 0:e.invalidateOpenItemsCache)||void 0===t||t.call(e))}async isOpen(){var e;return null!==(e=this.state._open)&&void 0!==e&&e}get host(){return index.getElement(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}};exports.kol_tree_item_wc=KolTreeItemWc;

package/dist/cjs/kol-tree-item.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CK2nrnns.js"),componentNames=require("./component-names-5aGrrIj9.js");require("./common-BDQKBMeS.js");const 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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774619801488"); /* IE9*/\n  src: url("kolicons.eot?t=1774619801488#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774619801488") format("woff2"), url("kolicons.woff?t=1774619801488") format("woff"), url("kolicons.ttf?t=1774619801488") format("truetype"), url("kolicons.svg?t=1774619801488#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-house::before {\n  content: "\\ea10";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea11";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea12";\n}\n\n.kolicon-link::before {\n  content: "\\ea13";\n}\n\n.kolicon-minus::before {\n  content: "\\ea14";\n}\n\n.kolicon-plus::before {\n  content: "\\ea15";\n}\n\n.kolicon-settings::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea18";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea19";\n}\n\n.kolicon-up::before {\n  content: "\\ea1a";\n}\n\n.kolicon-version::before {\n  content: "\\ea1b";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tree-item__link .kol-link {\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    text-decoration: none;\n  }\n  .kol-tree-item__link-inner {\n    display: flex;\n    align-items: center;\n  }\n  .kol-tree-item__children {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree-item .kol-span {\n    place-items: unset;\n  }\n  .kol-tree-item__toggle-button, .kol-tree-item__toggle-button-placeholder {\n    display: inline-flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-tree-item__text {\n    text-decoration: underline;\n  }\n}',KolTreeItem=class{constructor(n){index.registerInstance(this,n)}async focus(){var n;return Promise.resolve(null===(n=this.element)||void 0===n?void 0:n.focus())}async expand(){var n;return Promise.resolve(null===(n=this.element)||void 0===n?void 0:n.expand())}async collapse(){var n;return Promise.resolve(null===(n=this.element)||void 0===n?void 0:n.collapse())}async isOpen(){var n,e;return null!==(e=await(null===(n=this.element)||void 0===n?void 0:n.isOpen()))&&void 0!==e&&e}render(){return index.h(componentNames.KolTreeItemWcTag,{key:"69f11891d14df276dfdaf32bdb1ef448eaff6167",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:n=>this.element=n},index.h("slot",{key:"5994ecaba18fe6289827c57745aaaad5d422b855"}))}};KolTreeItem.style={default:defaultStyleCss},exports.kol_tree_item=KolTreeItem;
+"use strict";var index=require("./index-DT9bjXlJ.js"),componentNames=require("./component-names-CLJnvcGE.js");require("./common-CyOOsddt.js");const 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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774956515321"); /* IE9*/\n  src: url("kolicons.eot?t=1774956515321#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774956515321") format("woff2"), url("kolicons.woff?t=1774956515321") format("woff"), url("kolicons.ttf?t=1774956515321") format("truetype"), url("kolicons.svg?t=1774956515321#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tree-item__link .kol-link {\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    text-decoration: none;\n  }\n  .kol-tree-item__link-inner {\n    display: flex;\n    align-items: center;\n  }\n  .kol-tree-item__children {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree-item .kol-span {\n    place-items: unset;\n  }\n  .kol-tree-item__toggle-button, .kol-tree-item__toggle-button-placeholder {\n    display: inline-flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-tree-item__text {\n    text-decoration: underline;\n  }\n}',KolTreeItem=class{constructor(n){index.registerInstance(this,n)}async focus(){var n;return Promise.resolve(null===(n=this.element)||void 0===n?void 0:n.focus())}async expand(){var n;return Promise.resolve(null===(n=this.element)||void 0===n?void 0:n.expand())}async collapse(){var n;return Promise.resolve(null===(n=this.element)||void 0===n?void 0:n.collapse())}async isOpen(){var n,e;return null!==(e=await(null===(n=this.element)||void 0===n?void 0:n.isOpen()))&&void 0!==e&&e}render(){return index.h(componentNames.KolTreeItemWcTag,{key:"92a14c4b4e42c1e973fe2c786e654c1fc632acab",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:n=>this.element=n},index.h("slot",{key:"cd3ec629ec335d54b4989d089ca269ff2493b18e"}))}};KolTreeItem.style={default:defaultStyleCss},exports.kol_tree_item=KolTreeItem;

package/dist/cjs/kol-tree-item.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-tree-item.entry.cjs.js","sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../@shared/icon.mixin' as *;\n\n@layer kol-component {\n\t@include kol-icon-styles();\n\n\t.kol-tree-item {\n\t\t$root: &;\n\n\t\t&__link {\n\t\t\t.kol-link {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: var(--a11y-min-size);\n\t\t\t\talign-items: center;\n\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t}\n\n\t\t&__link-inner {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__children {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t.kol-span {\n\t\t\tplace-items: unset; // unset 'center' style from global layer\n\t\t}\n\n\t\t&__toggle-button,\n\t\t&__toggle-button-placeholder {\n\t\t\tdisplay: inline-flex;\n\t\t\tmin-width: var(--a11y-min-size);\n\t\t\tmin-height: var(--a11y-min-size);\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\t&__text {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport { KolTreeItemWcTag } from '../../core/component-names';\nimport type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\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() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focus() {\n\t\treturn Promise.resolve(this.element?.focus());\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method() async expand() {\n\t\treturn Promise.resolve(this.element?.expand());\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method() async collapse() {\n\t\treturn Promise.resolve(this.element?.collapse());\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"names":["h","KolTreeItemWcTag"],"mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,k0QAAk0Q;;MCY70Q,WAAW,GAAA,MAAA;;;;AA0Bb,IAAA,MAAM,KAAK,GAAA;;AACpB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;;AAMpC,IAAA,MAAM,MAAM,GAAA;;AACrB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,EAAE,CAAC;;AAMrC,IAAA,MAAM,QAAQ,GAAA;;AACvB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE,CAAC;;AAMvC,IAAA,MAAM,MAAM,GAAA;;QACrB,OAAO,CAAA,EAAA,IAAC,OAAM,MAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE,CAAA,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK;;IAGxC,MAAM,GAAA;AACZ,QAAA,QACCA,OAAC,CAAAC,+BAAgB,qDAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,OAAkC,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAAA,EAErED,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACU;;;;;;;;;"}
+{"version":3,"file":"kol-tree-item.entry.cjs.js","sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../@shared/icon.mixin' as *;\n\n@layer kol-component {\n\t@include kol-icon-styles();\n\n\t.kol-tree-item {\n\t\t$root: &;\n\n\t\t&__link {\n\t\t\t.kol-link {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: var(--a11y-min-size);\n\t\t\t\talign-items: center;\n\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t}\n\n\t\t&__link-inner {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__children {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t.kol-span {\n\t\t\tplace-items: unset; // unset 'center' style from global layer\n\t\t}\n\n\t\t&__toggle-button,\n\t\t&__toggle-button-placeholder {\n\t\t\tdisplay: inline-flex;\n\t\t\tmin-width: var(--a11y-min-size);\n\t\t\tmin-height: var(--a11y-min-size);\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\t&__text {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport { KolTreeItemWcTag } from '../../core/component-names';\nimport type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\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() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focus() {\n\t\treturn Promise.resolve(this.element?.focus());\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method() async expand() {\n\t\treturn Promise.resolve(this.element?.expand());\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method() async collapse() {\n\t\treturn Promise.resolve(this.element?.collapse());\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"names":["h","KolTreeItemWcTag"],"mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,u9QAAu9Q;;MCYl+Q,WAAW,GAAA,MAAA;;;;AA0Bb,IAAA,MAAM,KAAK,GAAA;;AACpB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;;AAMpC,IAAA,MAAM,MAAM,GAAA;;AACrB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,EAAE,CAAC;;AAMrC,IAAA,MAAM,QAAQ,GAAA;;AACvB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE,CAAC;;AAMvC,IAAA,MAAM,MAAM,GAAA;;QACrB,OAAO,CAAA,EAAA,IAAC,OAAM,MAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE,CAAA,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK;;IAGxC,MAAM,GAAA;AACZ,QAAA,QACCA,OAAC,CAAAC,+BAAgB,qDAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,OAAkC,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAAA,EAErED,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACU;;;;;;;;;"}

package/dist/cjs/kol-tree-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CK2nrnns.js"),componentNames=require("./component-names-5aGrrIj9.js");require("./common-BDQKBMeS.js");var label=require("./label-DBPPhxGb.js");const KolTreeWc=class{constructor(e){index.registerInstance(this,e),this.state={_label:""},this.cacheValid=!1}validateLabel(e){label.validateLabel(this,e)}async focus(){var e;const t=await this.getOpenTreeItemElements();await(null===(e=null==t?void 0:t[0])||void 0===e?void 0:e.focus())}async invalidateOpenItemsCache(){await Promise.resolve(this.cacheValid=!1)}render(){return index.h(index.Host,{key:"636acab7d852b078c00f01e6d72fd95fcfcb74da",onSlotchange:this.handleSlotchange.bind(this)},index.h("nav",{key:"55cda41b0618a7150831099204fcbf42811e5b77",class:"kol-tree","aria-label":this.state._label},index.h("ul",{key:"b3f05a87934f6bc409e0699cf96adc595954f8fc",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},index.h("slot",{key:"6e85788adae9f7254ce2ef7723121dd31db6a52c"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===componentNames.KolTreeItemTag.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect(),void 0!==this.rafHandle&&(cancelAnimationFrame(this.rafHandle),this.rafHandle=void 0)}observeChildListMutations(){this.observer=new MutationObserver(()=>this.scheduleTreeChange()),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.scheduleTreeChange()}observeTopLevelItems(){var e;null===(e=this.getTopLevelTreeItems())||void 0===e||e.forEach(e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})})}scheduleTreeChange(){this.rafHandle&&cancelAnimationFrame(this.rafHandle),this.rafHandle=requestAnimationFrame(()=>{this.handleTreeChange()})}getTopLevelTreeItems(){var e,t,a,i;return null===(i=null===(a=null===(t=null===(e=this.host)||void 0===e?void 0:e.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===i?void 0:i.filter(KolTreeWc.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.cacheValid=!1,this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce((e,t)=>{const a=t.querySelectorAll(componentNames.KolTreeItemTag);return[...e,t,...a]},[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;if(this.cacheValid&&this.cachedOpenItems)return this.cachedOpenItems;const e=async e=>{let t=e.parentElement;for(;t&&KolTreeWc.isTreeItem(t);){if(!await t.isOpen())return!1;t=t.parentElement}return!0};return this.cachedOpenItems=await Promise.all(this.treeItemElements.map(async t=>({item:t,isOpen:await e(t)}))).then(e=>e.filter(({isOpen:e})=>e).map(({item:e})=>e)),this.cacheValid=!0,this.cachedOpenItems}async handleKeyDown(e){var t,a,i,n,l,s,r,o,c,d;const v=await this.getOpenTreeItemElements(),h=null===(t=document.activeElement)||void 0===t?void 0:t.closest(componentNames.KolTreeItemTag),u=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!v||!h)return;const m=null==v?void 0:v.findIndex(e=>e===h);switch(e.key){case"ArrowDown":await(null===(a=v[m+1])||void 0===a?void 0:a.focus()),e.preventDefault();break;case"ArrowUp":await(null===(i=v[m-1])||void 0===i?void 0:i.focus()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await h.isOpen()?await(null===(n=v[m+1])||void 0===n?void 0:n.focus()):await h.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await h.isOpen())await h.collapse();else{const e=h.parentElement,t=e?v.indexOf(e):-1;-1!==t&&await(null===(l=v[t])||void 0===l?void 0:l.focus())}break;case"Home":await(null===(s=v[0])||void 0===s?void 0:s.focus()),e.preventDefault();break;case"End":await(null===(r=v[v.length-1])||void 0===r?void 0:r.focus()),e.preventDefault();break;case null===(o=e.key.match(/^[a-zA-Z0-9]$/))||void 0===o?void 0:o.input:if(!u){const t=e.key.toLowerCase(),a=v.indexOf(h)+1;let i=v.slice(a).findIndex(e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)});-1===i?i=v.slice(0,a).findIndex(e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)}):i+=a,-1!==i&&(await(null===(c=v[i])||void 0===c?void 0:c.focus()),e.preventDefault())}break;case"*":{const e=null===(d=h.parentElement)||void 0===d?void 0:d.querySelectorAll(componentNames.KolTreeItemTag);null==e||e.forEach(e=>{e.expand()});break}}}handleFocusIn(e){var t;e.target!==this.host||(null===(t=document.activeElement)||void 0===t?void 0:t.closest(componentNames.KolTreeItemTag))||requestAnimationFrame(()=>{this.focus()})}handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(componentNames.KolTreeTag)&&this.ensureActiveItemVisibility()}ensureActiveItemVisibility(){const e=t=>{KolTreeWc.isTreeItem(t.parentElement)&&(t.parentElement.expand(),e(t.parentElement))},t=(()=>{var e,t,a,i,n;const l=null!==(n=null===(i=null===(a=null===(t=null===(e=this.host)||void 0===e?void 0:e.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===i?void 0:i.filter(KolTreeWc.isTreeItem))&&void 0!==n?n:[];for(const e of l){if(e._active)return e;const t=e.querySelector(`${componentNames.KolTreeItemTag}[_active="true"]`);if(t&&t._active)return t}})();t&&e(t)}get host(){return index.getElement(this)}static get watchers(){return{_label:["validateLabel"]}}};exports.kol_tree_wc=KolTreeWc;
+"use strict";var index=require("./index-DT9bjXlJ.js"),componentNames=require("./component-names-CLJnvcGE.js");require("./common-CyOOsddt.js");var label=require("./label-BpdiumjJ.js");const KolTreeWc=class{constructor(e){index.registerInstance(this,e),this.state={_label:""},this.cacheValid=!1}validateLabel(e){label.validateLabel(this,e)}async focus(){var e;const t=await this.getOpenTreeItemElements();await(null===(e=null==t?void 0:t[0])||void 0===e?void 0:e.focus())}async invalidateOpenItemsCache(){await Promise.resolve(this.cacheValid=!1)}render(){return index.h(index.Host,{key:"38c0d00f5c5f427bfbad26155726ffbd5eab0ac6",onSlotchange:this.handleSlotchange.bind(this)},index.h("nav",{key:"3e6b19a1f8b15cd1e0981c1bfa2617c7fbb96443",class:"kol-tree","aria-label":this.state._label},index.h("ul",{key:"982058efdc400d5ced02c528cefa4838932908bf",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},index.h("slot",{key:"2c2a57f705d3466931665c98bb6387e5cd1465b2"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===componentNames.KolTreeItemTag.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect(),void 0!==this.rafHandle&&(cancelAnimationFrame(this.rafHandle),this.rafHandle=void 0)}observeChildListMutations(){this.observer=new MutationObserver(()=>this.scheduleTreeChange()),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.scheduleTreeChange()}observeTopLevelItems(){var e;null===(e=this.getTopLevelTreeItems())||void 0===e||e.forEach(e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})})}scheduleTreeChange(){this.rafHandle&&cancelAnimationFrame(this.rafHandle),this.rafHandle=requestAnimationFrame(()=>{this.handleTreeChange()})}getTopLevelTreeItems(){var e,t,a,i;return null===(i=null===(a=null===(t=null===(e=this.host)||void 0===e?void 0:e.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===i?void 0:i.filter(KolTreeWc.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.cacheValid=!1,this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce((e,t)=>{const a=t.querySelectorAll(componentNames.KolTreeItemTag);return[...e,t,...a]},[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;if(this.cacheValid&&this.cachedOpenItems)return this.cachedOpenItems;const e=async e=>{let t=e.parentElement;for(;t&&KolTreeWc.isTreeItem(t);){if(!await t.isOpen())return!1;t=t.parentElement}return!0};return this.cachedOpenItems=await Promise.all(this.treeItemElements.map(async t=>({item:t,isOpen:await e(t)}))).then(e=>e.filter(({isOpen:e})=>e).map(({item:e})=>e)),this.cacheValid=!0,this.cachedOpenItems}async handleKeyDown(e){var t,a,i,l,n,s,r,o,c,d;const v=await this.getOpenTreeItemElements(),h=null===(t=document.activeElement)||void 0===t?void 0:t.closest(componentNames.KolTreeItemTag),u=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!v||!h)return;const m=null==v?void 0:v.findIndex(e=>e===h);switch(e.key){case"ArrowDown":await(null===(a=v[m+1])||void 0===a?void 0:a.focus()),e.preventDefault();break;case"ArrowUp":await(null===(i=v[m-1])||void 0===i?void 0:i.focus()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await h.isOpen()?await(null===(l=v[m+1])||void 0===l?void 0:l.focus()):await h.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await h.isOpen())await h.collapse();else{const e=h.parentElement,t=e?v.indexOf(e):-1;-1!==t&&await(null===(n=v[t])||void 0===n?void 0:n.focus())}break;case"Home":await(null===(s=v[0])||void 0===s?void 0:s.focus()),e.preventDefault();break;case"End":await(null===(r=v[v.length-1])||void 0===r?void 0:r.focus()),e.preventDefault();break;case null===(o=e.key.match(/^[a-zA-Z0-9]$/))||void 0===o?void 0:o.input:if(!u){const t=e.key.toLowerCase(),a=v.indexOf(h)+1;let i=v.slice(a).findIndex(e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)});-1===i?i=v.slice(0,a).findIndex(e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)}):i+=a,-1!==i&&(await(null===(c=v[i])||void 0===c?void 0:c.focus()),e.preventDefault())}break;case"*":{const e=null===(d=h.parentElement)||void 0===d?void 0:d.querySelectorAll(componentNames.KolTreeItemTag);null==e||e.forEach(e=>{e.expand()});break}}}handleFocusIn(e){var t;e.target!==this.host||(null===(t=document.activeElement)||void 0===t?void 0:t.closest(componentNames.KolTreeItemTag))||requestAnimationFrame(()=>{this.focus()})}handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(componentNames.KolTreeTag)&&this.ensureActiveItemVisibility()}ensureActiveItemVisibility(){const e=t=>{KolTreeWc.isTreeItem(t.parentElement)&&(t.parentElement.expand(),e(t.parentElement))},t=(()=>{var e,t,a,i,l;const n=null!==(l=null===(i=null===(a=null===(t=null===(e=this.host)||void 0===e?void 0:e.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===i?void 0:i.filter(KolTreeWc.isTreeItem))&&void 0!==l?l:[];for(const e of n){if(e._active)return e;const t=e.querySelector(`${componentNames.KolTreeItemTag}[_active="true"]`);if(t&&t._active)return t}})();t&&e(t)}get host(){return index.getElement(this)}static get watchers(){return{_label:["validateLabel"]}}};exports.kol_tree_wc=KolTreeWc;

package/dist/cjs/kol-tree.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CK2nrnns.js"),componentNames=require("./component-names-5aGrrIj9.js"),elementFocus=require("./element-focus-WQBz86oY.js");require("./common-BDQKBMeS.js");const 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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",KolTree=class{constructor(n){index.registerInstance(this,n),this.setTreeWcRef=n=>{this.treeWcRef=n}}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.treeWcRef))}render(){return index.h(componentNames.KolTreeWcTag,{key:"7b6b9dfaee144719998aa82de51327e0d52cc559",_label:this._label,ref:this.setTreeWcRef},index.h("slot",{key:"37d6b152b229ce91b7e990efef85b86ed4f93415"}))}get host(){return index.getElement(this)}};KolTree.style={default:defaultStyleCss},exports.kol_tree=KolTree;
+"use strict";var index=require("./index-DT9bjXlJ.js"),componentNames=require("./component-names-CLJnvcGE.js"),elementFocus=require("./element-focus-r03qIEIv.js");require("./common-CyOOsddt.js");const 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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",KolTree=class{constructor(n){index.registerInstance(this,n),this.setTreeWcRef=n=>{this.treeWcRef=n}}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.treeWcRef))}render(){return index.h(componentNames.KolTreeWcTag,{key:"7949f9ffc416ad89da8bf7d1f38d0120c8db4676",_label:this._label,ref:this.setTreeWcRef},index.h("slot",{key:"bd820a08b5ce3e434d4fdea624263cacee6dcc1f"}))}get host(){return index.getElement(this)}};KolTree.style={default:defaultStyleCss},exports.kol_tree=KolTree;

package/dist/cjs/kol-version.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-CK2nrnns.js");require("./common-BDQKBMeS.js");var label=require("./label-DBPPhxGb.js"),i18n=require("./i18n-BWA16k5X.js"),componentNames=require("./component-names-5aGrrIj9.js");require("./i18n-yHKQt1gl.js");const defaultStyleCss="/*\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  .hastooltip {\n    z-index: 900 !important;\n  }\n}",KolVersion=class{constructor(n){index.registerInstance(this,n),this.translateVersion=i18n.translate("kol-version"),this.state={_label:"0.0.0-alpha.0"}}render(){return index.h(index.Host,{key:"366e90528852843f511d5f935511d55bd565957b",class:"kol-version"},index.h(componentNames.KolBadgeTag,{key:"8d7a198cbf5b56ec5d0187b11d7e35f2205fbf0b",_color:"#bec5c9",_icons:{left:{icon:"kolicon-version",label:this.translateVersion}},_label:this.state._label}))}validateLabel(n){label.validateLabel(this,n,{required:!0})}componentWillLoad(){this.validateLabel(this._label)}static get watchers(){return{_label:["validateLabel"]}}};KolVersion.style={default:defaultStyleCss},exports.kol_version=KolVersion;
+"use strict";var index=require("./index-DT9bjXlJ.js");require("./common-CyOOsddt.js");var label=require("./label-BpdiumjJ.js"),i18n=require("./i18n-DevJo9yF.js"),componentNames=require("./component-names-CLJnvcGE.js");require("./i18n-CgUN6lev.js");const defaultStyleCss="/*\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  .hastooltip {\n    z-index: 900 !important;\n  }\n}",KolVersion=class{constructor(n){index.registerInstance(this,n),this.translateVersion=i18n.translate("kol-version"),this.state={_label:"0.0.0-alpha.0"}}render(){return index.h(index.Host,{key:"0b06b2307b6f09bccf41a83a26837e065749ca54",class:"kol-version"},index.h(componentNames.KolBadgeTag,{key:"104ef2aaa3bb71a96fd5740d105fd4f1a9824b51",_color:"#bec5c9",_icons:{left:{icon:"kolicon-version",label:this.translateVersion}},_label:this.state._label}))}validateLabel(n){label.validateLabel(this,n,{required:!0})}componentWillLoad(){this.validateLabel(this._label)}static get watchers(){return{_label:["validateLabel"]}}};KolVersion.style={default:defaultStyleCss},exports.kol_version=KolVersion;