@public-ui/components 3.0.2-4633c75bfe6e8436d102c316ead90b0a2b4974ef.0 → 3.0.2-4f2652e383001617fed2c8414b4cf7ac25f38716.0

package/dist/components/kol-toast-container.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,proxyCustomElement,HTMLElement,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{n as nonce}from"./dev.utils.js";import{t as KolButtonTag}from"./component-names.js";import"./bem.js";import"./index2.js";import"./markdown.js";import{_ as __rest}from"./tslib.es6.js";import{K as KolAlertFc}from"./Alert.js";import{c as clsx}from"./clsx.js";const ToastItemFc=t=>{var{status:n,toast:e,onClose:o}=t,s=__rest(t,["status","toast","onClose"]);const{type:a,label:i,description:l,variant:r}=e;return h("div",{class:clsx("kol-toast-item",`kol-toast-item--${n}`)},h(KolAlertFc,{class:"kol-toast-item__alert",alert:!0,label:i,level:0,hasCloser:!0,type:a,variant:r||"card",onCloserClick:o},h("div",Object.assign({},s),l)))},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    flex-direction: column;\n    position: fixed;\n    z-index: 200;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}",KolToastContainerDefaultStyle0=defaultStyleCss,TRANSITION_TIMEOUT=300,KolToastContainer$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}async enqueue(t){const n={toast:t,status:"adding",id:`toast-${nonce()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[n,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===n.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),300),()=>{this.handleClose(n)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((n=>(n.id===t.id&&(n.status="removing"),n)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((n=>n.id!==t.id))})}),300)}async closeAll(t=!1){if(t)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const t=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:t.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((n=>t.every((t=>t.id!==n.id))))})}),300)}}handleToastRef(t,n){n&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(n,{close:()=>this.handleClose(t)}))}render(){return h(Host,{key:"4286f2f18e5333c7238c10d5fa73167650b067a4",class:"kol-toast-container"},this.state._toastStates.length>1&&h(KolButtonTag,{key:"d00f8dde0a2cc279b13cadd17fcad3e585bb0164",_label:translate("kol-toast-close-all"),class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((t=>h(ToastItemFc,{key:t.id,onClose:()=>this.handleClose(t),ref:n=>this.handleToastRef(t,n),toast:t.toast,status:t.status}))))}static get style(){return{default:KolToastContainerDefaultStyle0}}},[33,"kol-toast-container",{state:[32],enqueue:[64],closeAll:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-toast-container"].forEach((t=>{if("kol-toast-container"===t)customElements.get(t)||customElements.define(t,KolToastContainer$1)}))}const KolToastContainer=KolToastContainer$1,defineCustomElement=defineCustomElement$1;export{KolToastContainer,defineCustomElement};
+import{h,proxyCustomElement,HTMLElement,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n.js";import{n as nonce}from"./dev.utils.js";import{t as KolButtonTag}from"./component-names.js";import"./bem.js";import"./progress.js";import"./markdown.js";import{_ as __rest}from"./tslib.es6.js";import{K as KolAlertFc}from"./Alert.js";import{c as clsx}from"./clsx.js";const ToastItemFc=t=>{var{status:n,toast:e,onClose:o}=t,s=__rest(t,["status","toast","onClose"]);const{type:a,label:i,description:l,variant:r}=e;return h("div",{class:clsx("kol-toast-item",`kol-toast-item--${n}`)},h(KolAlertFc,{class:"kol-toast-item__alert",alert:!0,label:i,level:0,hasCloser:!0,type:a,variant:r||"card",onCloserClick:o},h("div",Object.assign({},s),l)))},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    flex-direction: column;\n    position: fixed;\n    z-index: 200;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}",TRANSITION_TIMEOUT=300,KolToastContainer$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.state={_toastStates:[]},this.knownRenderFunctions=new Set}async enqueue(t){const n={toast:t,status:"adding",id:`toast-${nonce()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[n,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===n.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),300),()=>{this.handleClose(n)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((n=>(n.id===t.id&&(n.status="removing"),n)))}),setTimeout((()=>{var n,e;this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((n=>n.id!==t.id))}),null===(e=(n=t.toast).onClose)||void 0===e||e.call(n)}),300)}async closeAll(t=!1){if(t)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const t=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:t.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((n=>t.every((t=>t.id!==n.id))))}),t.forEach((t=>{var n,e;null===(e=(n=t.toast).onClose)||void 0===e||e.call(n)}))}),300)}}handleToastRef(t,n){n&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(n,{close:()=>this.handleClose(t)}))}render(){return h(Host,{key:"9cd066a5431870964c5ebcf63f3e6cfc485999fa",class:"kol-toast-container"},this.state._toastStates.length>1&&h(KolButtonTag,{key:"5f7311b53ebf68798955e351c9a634190cc0242d",_label:translate("kol-toast-close-all"),class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((t=>h(ToastItemFc,{key:t.id,onClose:()=>this.handleClose(t),ref:n=>this.handleToastRef(t,n),toast:t.toast,status:t.status}))))}static get style(){return{default:defaultStyleCss}}},[33,"kol-toast-container",{state:[32],enqueue:[64],closeAll:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-toast-container"].forEach((t=>{if("kol-toast-container"===t)customElements.get(t)||customElements.define(t,KolToastContainer$1)}))}const KolToastContainer=KolToastContainer$1,defineCustomElement=defineCustomElement$1;export{KolToastContainer,defineCustomElement};

package/dist/components/kol-toast-container.js.map

@@ -1 +1 @@
-{"file":"kol-toast-container.js","mappings":"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","names":["KolToastContainer","KolToastItemFc"],"sources":["src/functional-components/ToastItem/ToastItem.tsx","src/components/toaster/style.scss?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/shadow.tsx"],"sourcesContent":["import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { type Toast } from '../../schema';\n\nimport KolAlertFc from '../Alert';\nimport clsx from 'clsx';\n\ntype ToastItemProps = JSXBase.HTMLAttributes<HTMLDivElement> & {\n\tstatus: 'adding' | 'settled' | 'removing';\n\ttoast: Toast;\n\tonClose: () => void;\n};\n\nconst ToastItemFc: FC<ToastItemProps> = ({ status, toast, onClose, ...other }) => {\n\tconst { type, label, description, variant } = toast;\n\n\treturn (\n\t\t<div class={clsx('kol-toast-item', `kol-toast-item--${status}`)}>\n\t\t\t<KolAlertFc\n\t\t\t\tclass=\"kol-toast-item__alert\"\n\t\t\t\talert={true}\n\t\t\t\tlabel={label}\n\t\t\t\tlevel={0}\n\t\t\t\thasCloser={true}\n\t\t\t\ttype={type}\n\t\t\t\tvariant={variant || 'card'}\n\t\t\t\tonCloserClick={onClose}\n\t\t\t>\n\t\t\t\t<div {...other}>{description}</div>\n\t\t\t</KolAlertFc>\n\t\t</div>\n\t);\n};\n\nexport default ToastItemFc;\n","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-alert;\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: fixed;\n\t\tz-index: 200;\n\t}\n\n\t.kol-toast-container {\n\t\t&__close-all {\n\t\t\talign-self: flex-end;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { Toast, ToasterAPI, ToasterStates, ToastRenderFunction, ToastState } from '../../schema';\nimport { KolButtonTag } from '../../core/component-names';\nimport { KolToastItemFc } from '../../functional-components';\n\nconst TRANSITION_TIMEOUT = 300;\n\n@Component({\n\ttag: 'kol-toast-container',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToastContainer implements ToasterAPI {\n\t@State() public state: ToasterStates = {\n\t\t_toastStates: [],\n\t};\n\n\t/* Keep track of render functions, so we call each only once. */\n\tprivate knownRenderFunctions = new Set<ToastRenderFunction>();\n\n\t// Stencil requires async function:\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async enqueue(toast: Toast) {\n\t\tconst newToastState: ToastState = {\n\t\t\ttoast,\n\t\t\tstatus: 'adding',\n\t\t\tid: `toast-${nonce()}`,\n\t\t};\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: [newToastState, ...this.state._toastStates],\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.map((localToastState) =>\n\t\t\t\t\tlocalToastState.id === newToastState.id && localToastState.status !== 'removing'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...localToastState,\n\t\t\t\t\t\t\t\tstatus: 'settled',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: localToastState,\n\t\t\t\t),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\n\t\treturn () => {\n\t\t\tthis.handleClose(newToastState);\n\t\t};\n\t}\n\n\tprivate handleClose(toastState: ToastState) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => {\n\t\t\t\tif (localToastState.id === toastState.id) {\n\t\t\t\t\tlocalToastState.status = 'removing';\n\t\t\t\t}\n\t\t\t\treturn localToastState;\n\t\t\t}),\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeAll(immediate: boolean = false) {\n\t\tif (immediate) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: [],\n\t\t\t};\n\t\t} else {\n\t\t\tconst toastsToClose = [...this.state._toastStates]; // Create a snapshot of the open toasts at the time closeAll has been called\n\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: toastsToClose.map((localToastState) => ({\n\t\t\t\t\t...localToastState,\n\t\t\t\t\tstatus: 'removing',\n\t\t\t\t})),\n\t\t\t};\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_toastStates: this.state._toastStates.filter((toastState) => toastsToClose.every((toastToClose) => toastToClose.id !== toastState.id)),\n\t\t\t\t};\n\t\t\t}, TRANSITION_TIMEOUT);\n\t\t}\n\t}\n\n\tprivate handleToastRef(toastState: ToastState, element?: HTMLDivElement) {\n\t\tif (element && typeof toastState.toast.render === 'function' && !this.knownRenderFunctions.has(toastState.toast.render)) {\n\t\t\tthis.knownRenderFunctions.add(toastState.toast.render);\n\t\t\ttoastState.toast.render(element, { close: () => this.handleClose(toastState) });\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-toast-container\">\n\t\t\t\t{this.state._toastStates.length > 1 && (\n\t\t\t\t\t<KolButtonTag\n\t\t\t\t\t\t_label={translate('kol-toast-close-all')}\n\t\t\t\t\t\tclass=\"kol-toast-container__button-close-all\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid this.closeAll();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButtonTag>\n\t\t\t\t)}\n\t\t\t\t{this.state._toastStates.map((toastState) => (\n\t\t\t\t\t<KolToastItemFc\n\t\t\t\t\t\tkey={toastState.id}\n\t\t\t\t\t\tonClose={() => this.handleClose(toastState)}\n\t\t\t\t\t\tref={(element?: HTMLDivElement) => this.handleToastRef(toastState, element)}\n\t\t\t\t\t\ttoast={toastState.toast}\n\t\t\t\t\t\tstatus={toastState.status}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-toast-container.js","mappings":"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","names":["KolToastContainer","__stencil_proxyCustomElement","KolToastItemFc"],"sources":["src/functional-components/ToastItem/ToastItem.tsx","src/components/toaster/style.scss?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/shadow.tsx"],"sourcesContent":["import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { type Toast } from '../../schema';\n\nimport KolAlertFc from '../Alert';\nimport clsx from 'clsx';\n\ntype ToastItemProps = JSXBase.HTMLAttributes<HTMLDivElement> & {\n\tstatus: 'adding' | 'settled' | 'removing';\n\ttoast: Toast;\n\tonClose: () => void;\n};\n\nconst ToastItemFc: FC<ToastItemProps> = ({ status, toast, onClose, ...other }) => {\n\tconst { type, label, description, variant } = toast;\n\n\treturn (\n\t\t<div class={clsx('kol-toast-item', `kol-toast-item--${status}`)}>\n\t\t\t<KolAlertFc\n\t\t\t\tclass=\"kol-toast-item__alert\"\n\t\t\t\talert={true}\n\t\t\t\tlabel={label}\n\t\t\t\tlevel={0}\n\t\t\t\thasCloser={true}\n\t\t\t\ttype={type}\n\t\t\t\tvariant={variant || 'card'}\n\t\t\t\tonCloserClick={onClose}\n\t\t\t>\n\t\t\t\t<div {...other}>{description}</div>\n\t\t\t</KolAlertFc>\n\t\t</div>\n\t);\n};\n\nexport default ToastItemFc;\n","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-alert;\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: fixed;\n\t\tz-index: 200;\n\t}\n\n\t.kol-toast-container {\n\t\t&__close-all {\n\t\t\talign-self: flex-end;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { Toast, ToasterAPI, ToasterStates, ToastRenderFunction, ToastState } from '../../schema';\nimport { KolButtonTag } from '../../core/component-names';\nimport { KolToastItemFc } from '../../functional-components';\n\nconst TRANSITION_TIMEOUT = 300;\n\n@Component({\n\ttag: 'kol-toast-container',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToastContainer implements ToasterAPI {\n\t@State() public state: ToasterStates = {\n\t\t_toastStates: [],\n\t};\n\n\t/* Keep track of render functions, so we call each only once. */\n\tprivate knownRenderFunctions = new Set<ToastRenderFunction>();\n\n\t// Stencil requires async function:\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async enqueue(toast: Toast) {\n\t\tconst newToastState: ToastState = {\n\t\t\ttoast,\n\t\t\tstatus: 'adding',\n\t\t\tid: `toast-${nonce()}`,\n\t\t};\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: [newToastState, ...this.state._toastStates],\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.map((localToastState) =>\n\t\t\t\t\tlocalToastState.id === newToastState.id && localToastState.status !== 'removing'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...localToastState,\n\t\t\t\t\t\t\t\tstatus: 'settled',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: localToastState,\n\t\t\t\t),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\n\t\treturn () => {\n\t\t\tthis.handleClose(newToastState);\n\t\t};\n\t}\n\n\tprivate handleClose(toastState: ToastState) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => {\n\t\t\t\tif (localToastState.id === toastState.id) {\n\t\t\t\t\tlocalToastState.status = 'removing';\n\t\t\t\t}\n\t\t\t\treturn localToastState;\n\t\t\t}),\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id),\n\t\t\t};\n\t\t\ttoastState.toast.onClose?.();\n\t\t}, TRANSITION_TIMEOUT);\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeAll(immediate: boolean = false) {\n\t\tif (immediate) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: [],\n\t\t\t};\n\t\t} else {\n\t\t\tconst toastsToClose = [...this.state._toastStates]; // Create a snapshot of the open toasts at the time closeAll has been called\n\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: toastsToClose.map((localToastState) => ({\n\t\t\t\t\t...localToastState,\n\t\t\t\t\tstatus: 'removing',\n\t\t\t\t})),\n\t\t\t};\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_toastStates: this.state._toastStates.filter((toastState) => toastsToClose.every((toastToClose) => toastToClose.id !== toastState.id)),\n\t\t\t\t};\n\t\t\t\ttoastsToClose.forEach((toastState) => {\n\t\t\t\t\ttoastState.toast.onClose?.();\n\t\t\t\t});\n\t\t\t}, TRANSITION_TIMEOUT);\n\t\t}\n\t}\n\n\tprivate handleToastRef(toastState: ToastState, element?: HTMLDivElement) {\n\t\tif (element && typeof toastState.toast.render === 'function' && !this.knownRenderFunctions.has(toastState.toast.render)) {\n\t\t\tthis.knownRenderFunctions.add(toastState.toast.render);\n\t\t\ttoastState.toast.render(element, { close: () => this.handleClose(toastState) });\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-toast-container\">\n\t\t\t\t{this.state._toastStates.length > 1 && (\n\t\t\t\t\t<KolButtonTag\n\t\t\t\t\t\t_label={translate('kol-toast-close-all')}\n\t\t\t\t\t\tclass=\"kol-toast-container__button-close-all\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid this.closeAll();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButtonTag>\n\t\t\t\t)}\n\t\t\t\t{this.state._toastStates.map((toastState) => (\n\t\t\t\t\t<KolToastItemFc\n\t\t\t\t\t\tkey={toastState.id}\n\t\t\t\t\t\tonClose={() => this.handleClose(toastState)}\n\t\t\t\t\t\tref={(element?: HTMLDivElement) => this.handleToastRef(toastState, element)}\n\t\t\t\t\t\ttoast={toastState.toast}\n\t\t\t\t\t\tstatus={toastState.status}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-toolbar.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{O as emptyStringByArrayHandler,o as objectObjectHandler,m as parseJson,k as setState}from"./index2.js";import{f as KolLinkWcTag,b as KolButtonWcTag}from"./component-names.js";import{v as validateOrientation}from"./orientation.js";import{K as KeyboardKey}from"./keyboard.js";import{v as validateLabel}from"./label.js";const validateToolbarItems=(n,e)=>{emptyStringByArrayHandler(e,(()=>{objectObjectHandler(e,(()=>{void 0===e&&(e=[]);try{e=parseJson(e)}catch(n){}Array.isArray(e)&&e.every((n=>"object"==typeof n&&null!==n))&&setState(n,"_items",e)}))}))},defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-toolbar {\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .kol-toolbar--orientation-vertical {\n    align-items: stretch;\n    flex-direction: column;\n  }\n  .kol-toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",KolToolbarDefaultStyle0=defaultStyleCss,KolToolbar$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.indexToElement=new Map,this.renderItem=(n,e)=>{const t=e!==this.currentIndex||(null==n?void 0:n._disabled)?-1:0,o={key:e,class:"button normal kol-toolbar__item",_tabIndex:t},i=n=>{n&&this.indexToElement.set(e,n)};return"_href"in n?h(KolLinkWcTag,Object.assign({},n,o,{ref:i,_role:"button"})):h(KolButtonWcTag,Object.assign({},n,o,{ref:i}))},this.state={_label:"",_items:[]},this.currentIndex=0,this._label=void 0,this._items=void 0,this._orientation=void 0}render(){return h("div",{key:"820d0df7f0df9ab8a3e8de78b0d3fead62abfff8",class:`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`,role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem))}validateLabel(n){validateLabel(this,n)}validateItems(n){validateToolbarItems(this,n)}validateOrientation(n){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;const o=n.code;if(![KeyboardKey.ArrowUp,KeyboardKey.ArrowDown,KeyboardKey.ArrowRight,KeyboardKey.ArrowLeft].includes(o))return;n.preventDefault();const i=(null===(e=this._items)||void 0===e?void 0:e.length)-1,a=this.currentIndex;let l=0;switch(o){case KeyboardKey.ArrowUp:case KeyboardKey.ArrowLeft:l=a!==l?a-1:i;break;case KeyboardKey.ArrowDown:case KeyboardKey.ArrowRight:i!==a&&(l=a+1)}a!==l&&(this.currentIndex=l,null===(t=this.getCurrentToolbarItem(l))||void 0===t||t.kolFocus())}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 this}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"],_orientation:["validateOrientation"]}}static get style(){return{default:KolToolbarDefaultStyle0}}},[33,"kol-toolbar",{_label:[1],_items:[16],_orientation:[1],state:[32],currentIndex:[32]},[[0,"keydown","handleKeyDown"],[2,"blur","handleBlur"]],{_label:["validateLabel"],_items:["validateItems"],_orientation:["validateOrientation"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-toolbar"].forEach((n=>{if("kol-toolbar"===n)customElements.get(n)||customElements.define(n,KolToolbar$1)}))}const KolToolbar=KolToolbar$1,defineCustomElement=defineCustomElement$1;export{KolToolbar,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{R as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,s as setState}from"./progress.js";import{v as validateLabel}from"./label.js";import{f as KolLinkWcTag,d as KolButtonWcTag}from"./component-names.js";import{v as validateOrientation}from"./orientation.js";import{K as KeyboardKey}from"./keyboard.js";const validateToolbarItems=(n,e)=>{emptyStringByArrayHandler(e,(()=>{objectObjectHandler(e,(()=>{void 0===e&&(e=[]);try{e=parseJson(e)}catch(n){}Array.isArray(e)&&e.every((n=>"object"==typeof n&&null!==n))&&setState(n,"_items",e)}))}))},defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-toolbar {\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .kol-toolbar--orientation-vertical {\n    align-items: stretch;\n    flex-direction: column;\n  }\n  .kol-toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",KolToolbar$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.state={_label:"",_items:[]},this.currentIndex=0,this.indexToElement=new Map,this.renderItem=(n,e)=>{const t=e!==this.currentIndex||(null==n?void 0:n._disabled)?-1:0,o={key:e,class:"button normal kol-toolbar__item",_tabIndex:t},i=n=>{n&&this.indexToElement.set(e,n)};return"_href"in n?h(KolLinkWcTag,Object.assign({},n,o,{ref:i,_role:"button"})):h(KolButtonWcTag,Object.assign({},n,o,{ref:i}))}}render(){return h("div",{key:"820d0df7f0df9ab8a3e8de78b0d3fead62abfff8",class:`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`,role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem))}validateLabel(n){validateLabel(this,n)}validateItems(n){validateToolbarItems(this,n)}validateOrientation(n){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;const o=n.code;if(![KeyboardKey.ArrowUp,KeyboardKey.ArrowDown,KeyboardKey.ArrowRight,KeyboardKey.ArrowLeft].includes(o))return;n.preventDefault();const i=(null===(e=this._items)||void 0===e?void 0:e.length)-1,a=this.currentIndex;let l=0;switch(o){case KeyboardKey.ArrowUp:case KeyboardKey.ArrowLeft:l=a!==l?a-1:i;break;case KeyboardKey.ArrowDown:case KeyboardKey.ArrowRight:i!==a&&(l=a+1)}a!==l&&(this.currentIndex=l,null===(t=this.getCurrentToolbarItem(l))||void 0===t||t.kolFocus())}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 this}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"],_orientation:["validateOrientation"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-toolbar",{_label:[1],_items:[16],_orientation:[1],state:[32],currentIndex:[32]},[[0,"keydown","handleKeyDown"],[2,"blur","handleBlur"]],{_label:["validateLabel"],_items:["validateItems"],_orientation:["validateOrientation"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-toolbar"].forEach((n=>{if("kol-toolbar"===n)customElements.get(n)||customElements.define(n,KolToolbar$1)}))}const KolToolbar=KolToolbar$1,defineCustomElement=defineCustomElement$1;export{KolToolbar,defineCustomElement};

package/dist/components/kol-toolbar.js.map

@@ -1 +1 @@
-{"file":"kol-toolbar.js","mappings":"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","names":["KolToolbar"],"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 { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState } from '../utils';\nimport type { ButtonProps, LinkProps } from '../../schema';\n\n/* types */\nexport type ToolbarItemPropType = ButtonProps | 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\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\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 '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/kol-button-mixin' as *;\n\n@include kol-button-styles('kol-link');\n\n@layer kol-component {\n\t.kol-toolbar {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\n\t\t&--orientation-vertical {\n\t\t\talign-items: stretch;\n\t\t\tflex-direction: column;\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, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, ToolbarAPI, ToolbarStates, ToolbarItemsPropType, ToolbarItemPropType } from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KolLinkWcTag, KolButtonWcTag } from '../../core/component-names';\nimport type { OrientationPropType } from '../../schema/props/orientation';\nimport { validateOrientation } from '../../schema/props/orientation';\nimport { KeyboardKey } from '../../schema/enums';\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 {\n\t@Element() 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\tprivate renderItem = (element: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\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};\n\t\tconst catchRef = (element?: HTMLKolLinkWcElement | HTMLKolButtonWcElement) => {\n\t\t\telement && this.indexToElement.set(index, element);\n\t\t};\n\n\t\treturn '_href' in element ? (\n\t\t\t<KolLinkWcTag {...element} {...props} ref={catchRef} _role=\"button\"></KolLinkWcTag>\n\t\t) : (\n\t\t\t<KolButtonWcTag {...element} {...props} 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}\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): ChildNode | 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 - 1;\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = 0;\n\n\t\tswitch (pressedKey) {\n\t\t\tcase KeyboardKey.ArrowUp:\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tnextIndex = currentIndex !== nextIndex ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowDown:\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tif (lastItemIndex !== currentIndex) nextIndex = currentIndex + 1;\n\t\t\t\tbreak;\n\t\t}\n\t\tif (currentIndex === nextIndex) return;\n\n\t\tthis.currentIndex = nextIndex;\n\t\tvoid (this.getCurrentToolbarItem(nextIndex) as HTMLKolLinkWcElement | HTMLKolButtonWcElement | undefined)?.kolFocus();\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"],"version":3}
+{"file":"kol-toolbar.js","mappings":"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","names":["KolToolbar","__stencil_proxyCustomElement"],"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 { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState } from '../utils';\nimport type { ButtonProps, LinkProps } from '../../schema';\n\n/* types */\nexport type ToolbarItemPropType = ButtonProps | 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\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\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 '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/kol-button-mixin' as *;\n\n@include kol-button-styles('kol-link');\n\n@layer kol-component {\n\t.kol-toolbar {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\n\t\t&--orientation-vertical {\n\t\t\talign-items: stretch;\n\t\t\tflex-direction: column;\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, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, ToolbarAPI, ToolbarStates, ToolbarItemsPropType, ToolbarItemPropType } from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KolLinkWcTag, KolButtonWcTag } from '../../core/component-names';\nimport type { OrientationPropType } from '../../schema/props/orientation';\nimport { validateOrientation } from '../../schema/props/orientation';\nimport { KeyboardKey } from '../../schema/enums';\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 {\n\t@Element() 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\tprivate renderItem = (element: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\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};\n\t\tconst catchRef = (element?: HTMLKolLinkWcElement | HTMLKolButtonWcElement) => {\n\t\t\telement && this.indexToElement.set(index, element);\n\t\t};\n\n\t\treturn '_href' in element ? (\n\t\t\t<KolLinkWcTag {...element} {...props} ref={catchRef} _role=\"button\"></KolLinkWcTag>\n\t\t) : (\n\t\t\t<KolButtonWcTag {...element} {...props} 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}\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): ChildNode | 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 - 1;\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = 0;\n\n\t\tswitch (pressedKey) {\n\t\t\tcase KeyboardKey.ArrowUp:\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tnextIndex = currentIndex !== nextIndex ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowDown:\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tif (lastItemIndex !== currentIndex) nextIndex = currentIndex + 1;\n\t\t\t\tbreak;\n\t\t}\n\t\tif (currentIndex === nextIndex) return;\n\n\t\tthis.currentIndex = nextIndex;\n\t\tvoid (this.getCurrentToolbarItem(nextIndex) as HTMLKolLinkWcElement | HTMLKolButtonWcElement | undefined)?.kolFocus();\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"],"version":3}

package/dist/components/kol-tooltip-wc.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{b as autoUpdate,a as alignFloatingElements}from"./align-floating-elements.js";import{l as watchString,g as getDocument}from"./index2.js";import"./i18n2.js";import"./bem.js";import{K as KolSpanFc}from"./Span.js";import{a as validateAlign}from"./align.js";import{v as validateLabel}from"./label.js";const validateBadgeText=(t,e)=>{watchString(t,"_badgeText",e)},validateId=(t,e)=>{watchString(t,"_id",e)},VISIBLE_OVERLAYS=new Set;function showOverlay(t){VISIBLE_OVERLAYS.forEach((t=>{t.style.setProperty("z-index","999")})),VISIBLE_OVERLAYS.add(t),t.style.setProperty("z-index","1000")}function hideOverlay(t){if(VISIBLE_OVERLAYS.delete(t),VISIBLE_OVERLAYS.size>0){const t=Array.from(VISIBLE_OVERLAYS).pop();t&&t.style.setProperty("z-index","1000")}}const KolTooltipWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.hasFocusIn=!1,this.hasMouseIn=!1,this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){showOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),getDocument().addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=autoUpdate(t,e,(()=>{this.alignTooltip()}))}},this.hideTooltip=()=>{this.tooltipElement&&(hideOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),getDocument().removeEventListener("keyup",this.hideTooltipByEscape)},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.addEventListener("mouseleave",this.handleMouseleave.bind(this)),t.addEventListener("focusin",this.handleFocusIn.bind(this)),t.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),t.removeEventListener("focusin",this.handleFocusIn.bind(this)),t.removeEventListener("focusout",this.handleFocusout.bind(this))},this.resyncListeners=(t,e,i=!1)=>{t&&this.removeListeners(t),e&&(i&&(this.previousSibling=e),this.addListeners(e))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()}),300)},this._badgeText=void 0,this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_label:""}}async alignTooltip(){this.tooltipElement&&this.previousSibling&&await alignFloatingElements({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}handleMouseEnter(){this.hasMouseIn=!0,this.showOrHideTooltip()}handleMouseleave(){this.hasMouseIn=!1,this.showOrHideTooltip()}handleFocusIn(){this.hasFocusIn=!0,this.showOrHideTooltip()}handleFocusout(){this.hasFocusIn=!1,this.showOrHideTooltip()}render(){return h(Host,{key:"de08062e83c35022db6132bfb4726e1cb7244dcc",class:"kol-tooltip"},""!==this.state._label&&h("div",{key:"2ebc4f82d4fade592b5e8703b0cf4c0041a9ddb6",class:"kol-tooltip__floating",ref:this.catchTooltipElement},h("div",{key:"861cdf3e0914c808e09056e8964d619fb0ecf6fd",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),h(KolSpanFc,{key:"a92d13e134f6a905a052c61c51961be851e406c1",class:"kol-tooltip__content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(t){validateBadgeText(this,t)}validateAlign(t){validateAlign(this,t)}validateId(t){validateId(this,t)}validateLabel(t){validateLabel(this,t,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t;this.resyncListeners(this.previousSibling,null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t;this.previousSibling=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling}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 this}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}},[0,"kol-tooltip-wc",{_badgeText:[1,"_badge-text"],_align:[1],_id:[1],_label:[1],state:[32]},void 0,{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tooltip-wc"].forEach((t=>{if("kol-tooltip-wc"===t)customElements.get(t)||customElements.define(t,KolTooltipWc$1)}))}const KolTooltipWc=KolTooltipWc$1,defineCustomElement=defineCustomElement$1;export{KolTooltipWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{b as autoUpdate,a as alignFloatingElements}from"./align-floating-elements.js";import{e as watchString,E as getDocument}from"./progress.js";import{v as validateAlign}from"./align.js";import{v as validateLabel}from"./label.js";import"./i18n.js";import"./bem.js";import{K as KolSpanFc}from"./Span.js";const validateBadgeText=(t,e)=>{watchString(t,"_badgeText",e)},validateId=(t,e)=>{watchString(t,"_id",e)},VISIBLE_OVERLAYS=new Set;function showOverlay(t){VISIBLE_OVERLAYS.forEach((t=>{t.style.setProperty("z-index","999")})),VISIBLE_OVERLAYS.add(t),t.style.setProperty("z-index","1000")}function hideOverlay(t){if(VISIBLE_OVERLAYS.delete(t),VISIBLE_OVERLAYS.size>0){const t=Array.from(VISIBLE_OVERLAYS).pop();t&&t.style.setProperty("z-index","1000")}}const TOOLTIP_DELAY=300,KolTooltipWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){showOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),getDocument().addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=autoUpdate(t,e,(()=>{this.alignTooltip()}))}},this.showTooltipWithDelay=()=>{clearTimeout(this.hideTooltipTimeout),clearTimeout(this.showTooltipTimeout),this.showTooltipTimeout=setTimeout((()=>{this.showTooltip()}),300)},this.hideTooltipWithDelay=()=>{clearTimeout(this.hideTooltipTimeout),this.hideTooltipTimeout=setTimeout((()=>{this.hideTooltip()}),300)},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.addEventListener("mouseleave",this.handleMouseleave.bind(this)),t.addEventListener("focusin",this.handleFocusIn.bind(this)),t.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),t.removeEventListener("focusin",this.handleFocusIn.bind(this)),t.removeEventListener("focusout",this.handleFocusout.bind(this))},this.resyncListeners=(t,e,i=!1)=>{t&&this.removeListeners(t),e&&(i&&(this.previousSibling=e),this.addListeners(e))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this.state={_align:"top",_label:""}}async alignTooltip(){this.tooltipElement&&this.previousSibling&&await alignFloatingElements({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}async hideTooltip(){clearTimeout(this.showTooltipTimeout),this.tooltipElement&&(hideOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),getDocument().removeEventListener("keyup",this.hideTooltipByEscape)}handleMouseEnter(){this.showTooltipWithDelay()}handleMouseleave(){this.hideTooltipWithDelay()}handleFocusIn(){this.showTooltipWithDelay()}handleFocusout(){this.hideTooltipWithDelay()}render(){return h(Host,{key:"a0b8abd0d04248fd423143784ea3446ce74d5455",class:"kol-tooltip"},""!==this.state._label&&h("div",{key:"e3f3912c333b523115ab170a7034d095ff66eea8",class:"kol-tooltip__floating",ref:this.catchTooltipElement},h("div",{key:"de357980b3f8b686ec462194563cba1b8cc22d09",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),h(KolSpanFc,{key:"102ee0ea200adef3dbee5c134c11af045102e131",class:"kol-tooltip__content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(t){validateBadgeText(this,t)}validateAlign(t){validateAlign(this,t)}validateId(t){validateId(this,t)}validateLabel(t){validateLabel(this,t,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t;this.resyncListeners(this.previousSibling,null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t;this.previousSibling=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling}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 this}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}},[0,"kol-tooltip-wc",{_badgeText:[1,"_badge-text"],_align:[1],_id:[1],_label:[1],state:[32],hideTooltip:[64]},void 0,{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tooltip-wc"].forEach((t=>{if("kol-tooltip-wc"===t)customElements.get(t)||customElements.define(t,KolTooltipWc$1)}))}const KolTooltipWc=KolTooltipWc$1,defineCustomElement=defineCustomElement$1;export{KolTooltipWc,defineCustomElement};

package/dist/components/kol-tooltip-wc.js.map

@@ -1 +1 @@
-{"file":"kol-tooltip-wc.js","mappings":"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","names":["KolTooltipWc"],"sources":["src/schema/props/badge-text.ts","src/schema/props/id.ts","src/utils/overlay.ts","src/components/tooltip/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { watchString } from '../utils';\nimport type { AccessKeyPropType } from './access-key';\nimport type { ShortKeyPropType } from './short-key';\n\n/* types */\nexport type BadgeTextPropType = AccessKeyPropType | ShortKeyPropType;\n\n/**\n * Defines the elements badge text.\n */\nexport type PropBadgeText = {\n\tbadgeText: BadgeTextPropType;\n};\n\n/* validator */\nexport const validateBadgeText = (component: Generic.Element.Component, value?: BadgeTextPropType): void => {\n\twatchString(component, '_badgeText', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchString } from '../utils';\n\n/* types */\nexport type IdPropType = string;\n\n/**\n * Defines the internal ID of the primary component element.\n */\nexport type PropId = {\n\tid: IdPropType;\n};\n\n/* validator */\nexport const validateId = (component: Generic.Element.Component, value?: IdPropType): void => {\n\twatchString(component, '_id', value);\n};\n","/**\n * This file contains the functions used to manage the visible overlays.\n */\n\n/**\n * This set contains all the visible overlays.\n */\nconst VISIBLE_OVERLAYS: Set<HTMLElement> = new Set();\n\n/**\n * This function is used to add an overlay to the visible overlay list.\n * All overlays in the list will have a z-index of 999, except the last\n * one, which will have a z-index of 1000.\n *\n * @param overlay Get the overlay element reference\n */\nexport function showOverlay(overlay: HTMLElement): void {\n\tVISIBLE_OVERLAYS.forEach((visibleOverlay) => {\n\t\tvisibleOverlay.style.setProperty('z-index', '999');\n\t});\n\tVISIBLE_OVERLAYS.add(overlay);\n\toverlay.style.setProperty('z-index', '1000');\n}\n\n/**\n * This function is used to remove an overlay from the visible overlay list.\n * All overlays in the list will have a z-index of 999, except the last\n * one, which will have a z-index of 1000.\n *\n * @param overlay Get the overlay element reference\n */\nexport function hideOverlay(overlay: HTMLElement): void {\n\tVISIBLE_OVERLAYS.delete(overlay);\n\tif (VISIBLE_OVERLAYS.size > 0) {\n\t\tconst last = Array.from(VISIBLE_OVERLAYS).pop();\n\t\tif (last) {\n\t\t\tlast.style.setProperty('z-index', '1000');\n\t\t}\n\t}\n}\n","import { autoUpdate } from '@floating-ui/dom';\nimport type { AlignPropType, BadgeTextPropType, IdPropType, LabelPropType, TooltipAPI, TooltipStates } from '../../schema';\nimport { getDocument, validateBadgeText, validateAlign, validateId, validateLabel } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\nimport { hideOverlay, showOverlay } from '../../utils/overlay';\nimport { KolSpanFc } from '../../functional-components';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tooltip-wc',\n\tshadow: false,\n})\nexport class KolTooltipWc implements TooltipAPI {\n\t@Element() private host!: HTMLKolTooltipWcElement;\n\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate previousSibling?: Element | null;\n\tprivate tooltipElement?: HTMLDivElement;\n\tprivate hasFocusIn = false;\n\tprivate hasMouseIn = false;\n\n\tprivate cleanupAutoPositioning?: () => void;\n\n\tprivate async alignTooltip(): Promise<void> {\n\t\tif (this.tooltipElement && this.previousSibling) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.previousSibling,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.tooltipElement,\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate showTooltip = (): void => {\n\t\tif (this.previousSibling && this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tshowOverlay(this.tooltipElement);\n\t\t\tthis.tooltipElement.style.setProperty('display', 'block');\n\t\t\tgetDocument().addEventListener('keyup', this.hideTooltipByEscape);\n\n\t\t\tconst target = this.previousSibling;\n\t\t\tconst tooltipEl = this.tooltipElement;\n\t\t\tthis.cleanupAutoPositioning = autoUpdate(target, tooltipEl, () => {\n\t\t\t\tvoid this.alignTooltip();\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate hideTooltip = (): void => {\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\thideOverlay(this.tooltipElement);\n\t\t\tthis.tooltipElement.style.setProperty('display', 'none');\n\t\t\tthis.tooltipElement.style.setProperty('visibility', 'hidden');\n\t\t\tif (this.cleanupAutoPositioning) {\n\t\t\t\tthis.cleanupAutoPositioning();\n\t\t\t\tthis.cleanupAutoPositioning = undefined;\n\t\t\t}\n\t\t}\n\t\tgetDocument().removeEventListener('keyup', this.hideTooltipByEscape);\n\t};\n\n\tprivate hideTooltipByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\tthis.hideTooltip();\n\t\t}\n\t};\n\n\tprivate handleMouseEnter() {\n\t\tthis.hasMouseIn = true;\n\t\tthis.showOrHideTooltip();\n\t}\n\tprivate handleMouseleave() {\n\t\tthis.hasMouseIn = false;\n\t\tthis.showOrHideTooltip();\n\t}\n\tprivate handleFocusIn() {\n\t\tthis.hasFocusIn = true;\n\t\tthis.showOrHideTooltip();\n\t}\n\tprivate handleFocusout() {\n\t\tthis.hasFocusIn = false;\n\t\tthis.showOrHideTooltip();\n\t}\n\n\tprivate addListeners = (el: Element): void => {\n\t\tel.addEventListener('mouseenter', this.handleMouseEnter.bind(this));\n\t\tel.addEventListener('mouseleave', this.handleMouseleave.bind(this));\n\t\tel.addEventListener('focusin', this.handleFocusIn.bind(this));\n\t\tel.addEventListener('focusout', this.handleFocusout.bind(this));\n\t};\n\n\tprivate removeListeners = (el: Element): void => {\n\t\tel.removeEventListener('mouseenter', this.handleMouseEnter.bind(this));\n\t\tel.removeEventListener('mouseleave', this.handleMouseleave.bind(this));\n\t\tel.removeEventListener('focusin', this.handleFocusIn.bind(this));\n\t\tel.removeEventListener('focusout', this.handleFocusout.bind(this));\n\t};\n\n\tprivate resyncListeners = (last?: Element | null, next?: Element | null, replacePreviousSibling = false): void => {\n\t\tif (last) {\n\t\t\tthis.removeListeners(last);\n\t\t}\n\t\tif (next) {\n\t\t\t/**\n\t\t\t * This makes the next element to the last element for the next resync cycle.\n\t\t\t */\n\t\t\tif (replacePreviousSibling) {\n\t\t\t\tthis.previousSibling = next;\n\t\t\t}\n\t\t\tthis.addListeners(next);\n\t\t}\n\t};\n\n\tprivate catchTooltipElement = (el?: HTMLDivElement): void => {\n\t\tthis.tooltipElement = el;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-tooltip\">\n\t\t\t\t{this.state._label !== '' && (\n\t\t\t\t\t<div class=\"kol-tooltip__floating\" ref={this.catchTooltipElement}>\n\t\t\t\t\t\t<div class=\"kol-tooltip__arrow\" ref={this.catchArrowElement} />\n\t\t\t\t\t\t<KolSpanFc class=\"kol-tooltip__content\" id={this.state._id} badgeText={this._badgeText} label={this.state._label} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements badge text.\n\t */\n\t@Prop() public _badgeText?: BadgeTextPropType;\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: TooltipStates = {\n\t\t_align: 'top',\n\t\t_label: '', // ⚠ required\n\t};\n\n\t@Watch('_badgeText')\n\tpublic validateBadgeText(value?: BadgeTextPropType): void {\n\t\tvalidateBadgeText(this, value);\n\t}\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: IdPropType): void {\n\t\tvalidateId(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tprivate overFocusTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate showOrHideTooltip = (): void => {\n\t\tclearTimeout(this.overFocusTimeout);\n\t\tthis.overFocusTimeout = setTimeout(() => {\n\t\t\tif (this.hasMouseIn || this.hasFocusIn) {\n\t\t\t\tthis.showTooltip();\n\t\t\t} else {\n\t\t\t\tthis.hideTooltip();\n\t\t\t}\n\t\t\t// Timing Guidelines for Exposing Hidden Content: https://www.nngroup.com/articles/timing-exposing-content/\n\t\t}, 300);\n\t};\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateBadgeText(this._badgeText);\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t}\n\n\tprivate handleEventListeners(): void {\n\t\tthis.resyncListeners(this.previousSibling, this.host?.previousElementSibling, true);\n\t\tthis.resyncListeners(this.tooltipElement, this.tooltipElement);\n\t}\n\n\tpublic connectedCallback(): void {\n\t\tthis.previousSibling = this.host?.previousElementSibling;\n\t}\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleEventListeners();\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentDidLoad)\n\t */\n\tpublic disconnectedCallback(): void {\n\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.previousSibling);\n\t\t\tthis.previousSibling = undefined;\n\t\t}\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.tooltipElement);\n\t\t}\n\t\tif (this.cleanupAutoPositioning) {\n\t\t\tthis.cleanupAutoPositioning();\n\t\t}\n\t}\n}\n"],"version":3}
+{"file":"kol-tooltip-wc.js","mappings":"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","names":["KolTooltipWc","__stencil_proxyCustomElement"],"sources":["src/schema/props/badge-text.ts","src/schema/props/id.ts","src/utils/overlay.ts","src/components/tooltip/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { watchString } from '../utils';\nimport type { AccessKeyPropType } from './access-key';\nimport type { ShortKeyPropType } from './short-key';\n\n/* types */\nexport type BadgeTextPropType = AccessKeyPropType | ShortKeyPropType;\n\n/**\n * Defines the elements badge text.\n */\nexport type PropBadgeText = {\n\tbadgeText: BadgeTextPropType;\n};\n\n/* validator */\nexport const validateBadgeText = (component: Generic.Element.Component, value?: BadgeTextPropType): void => {\n\twatchString(component, '_badgeText', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchString } from '../utils';\n\n/* types */\nexport type IdPropType = string;\n\n/**\n * Defines the internal ID of the primary component element.\n */\nexport type PropId = {\n\tid: IdPropType;\n};\n\n/* validator */\nexport const validateId = (component: Generic.Element.Component, value?: IdPropType): void => {\n\twatchString(component, '_id', value);\n};\n","/**\n * This file contains the functions used to manage the visible overlays.\n */\n\n/**\n * This set contains all the visible overlays.\n */\nconst VISIBLE_OVERLAYS: Set<HTMLElement> = new Set();\n\n/**\n * This function is used to add an overlay to the visible overlay list.\n * All overlays in the list will have a z-index of 999, except the last\n * one, which will have a z-index of 1000.\n *\n * @param overlay Get the overlay element reference\n */\nexport function showOverlay(overlay: HTMLElement): void {\n\tVISIBLE_OVERLAYS.forEach((visibleOverlay) => {\n\t\tvisibleOverlay.style.setProperty('z-index', '999');\n\t});\n\tVISIBLE_OVERLAYS.add(overlay);\n\toverlay.style.setProperty('z-index', '1000');\n}\n\n/**\n * This function is used to remove an overlay from the visible overlay list.\n * All overlays in the list will have a z-index of 999, except the last\n * one, which will have a z-index of 1000.\n *\n * @param overlay Get the overlay element reference\n */\nexport function hideOverlay(overlay: HTMLElement): void {\n\tVISIBLE_OVERLAYS.delete(overlay);\n\tif (VISIBLE_OVERLAYS.size > 0) {\n\t\tconst last = Array.from(VISIBLE_OVERLAYS).pop();\n\t\tif (last) {\n\t\t\tlast.style.setProperty('z-index', '1000');\n\t\t}\n\t}\n}\n","import { autoUpdate } from '@floating-ui/dom';\nimport type { AlignPropType, BadgeTextPropType, IdPropType, LabelPropType, TooltipAPI, TooltipStates } from '../../schema';\nimport { getDocument, validateBadgeText, validateAlign, validateId, validateLabel } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Method } from '@stencil/core';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\nimport { hideOverlay, showOverlay } from '../../utils/overlay';\nimport { KolSpanFc } from '../../functional-components';\n\n// Timing Guidelines for Exposing Hidden Content: https://www.nngroup.com/articles/timing-exposing-content/\nconst TOOLTIP_DELAY = 300;\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tooltip-wc',\n\tshadow: false,\n})\nexport class KolTooltipWc implements TooltipAPI {\n\t@Element() private host!: HTMLKolTooltipWcElement;\n\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate previousSibling?: Element | null;\n\tprivate tooltipElement?: HTMLDivElement;\n\n\tprivate cleanupAutoPositioning?: () => void;\n\n\tprivate async alignTooltip(): Promise<void> {\n\t\tif (this.tooltipElement && this.previousSibling) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.previousSibling,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.tooltipElement,\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate showTooltip = (): void => {\n\t\tif (this.previousSibling && this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tshowOverlay(this.tooltipElement);\n\t\t\tthis.tooltipElement.style.setProperty('display', 'block');\n\t\t\tgetDocument().addEventListener('keyup', this.hideTooltipByEscape);\n\n\t\t\tconst target = this.previousSibling;\n\t\t\tconst tooltipEl = this.tooltipElement;\n\t\t\tthis.cleanupAutoPositioning = autoUpdate(target, tooltipEl, () => {\n\t\t\t\tvoid this.alignTooltip();\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate showTooltipTimeout?: ReturnType<typeof setTimeout>;\n\tprivate showTooltipWithDelay = (): void => {\n\t\tclearTimeout(this.hideTooltipTimeout); // Cancel scheduled closings on re-enter\n\t\tclearTimeout(this.showTooltipTimeout);\n\t\tthis.showTooltipTimeout = setTimeout(() => {\n\t\t\tthis.showTooltip();\n\t\t}, TOOLTIP_DELAY);\n\t};\n\n\tprivate hideTooltipTimeout?: ReturnType<typeof setTimeout>;\n\tprivate hideTooltipWithDelay = (): void => {\n\t\tclearTimeout(this.hideTooltipTimeout);\n\t\tthis.hideTooltipTimeout = setTimeout(() => {\n\t\t\tvoid this.hideTooltip();\n\t\t}, TOOLTIP_DELAY);\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hideTooltip() {\n\t\tclearTimeout(this.showTooltipTimeout); // Cancel scheduled tooltips\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\thideOverlay(this.tooltipElement);\n\t\t\tthis.tooltipElement.style.setProperty('display', 'none');\n\t\t\tthis.tooltipElement.style.setProperty('visibility', 'hidden');\n\t\t\tif (this.cleanupAutoPositioning) {\n\t\t\t\tthis.cleanupAutoPositioning();\n\t\t\t\tthis.cleanupAutoPositioning = undefined;\n\t\t\t}\n\t\t}\n\t\tgetDocument().removeEventListener('keyup', this.hideTooltipByEscape);\n\t}\n\n\tprivate hideTooltipByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\tvoid this.hideTooltip();\n\t\t}\n\t};\n\n\tprivate handleMouseEnter() {\n\t\tthis.showTooltipWithDelay();\n\t}\n\tprivate handleMouseleave() {\n\t\tthis.hideTooltipWithDelay();\n\t}\n\tprivate handleFocusIn() {\n\t\tthis.showTooltipWithDelay();\n\t}\n\tprivate handleFocusout() {\n\t\tthis.hideTooltipWithDelay();\n\t}\n\n\tprivate addListeners = (el: Element): void => {\n\t\tel.addEventListener('mouseenter', this.handleMouseEnter.bind(this));\n\t\tel.addEventListener('mouseleave', this.handleMouseleave.bind(this));\n\t\tel.addEventListener('focusin', this.handleFocusIn.bind(this));\n\t\tel.addEventListener('focusout', this.handleFocusout.bind(this));\n\t};\n\n\tprivate removeListeners = (el: Element): void => {\n\t\tel.removeEventListener('mouseenter', this.handleMouseEnter.bind(this));\n\t\tel.removeEventListener('mouseleave', this.handleMouseleave.bind(this));\n\t\tel.removeEventListener('focusin', this.handleFocusIn.bind(this));\n\t\tel.removeEventListener('focusout', this.handleFocusout.bind(this));\n\t};\n\n\tprivate resyncListeners = (last?: Element | null, next?: Element | null, replacePreviousSibling = false): void => {\n\t\tif (last) {\n\t\t\tthis.removeListeners(last);\n\t\t}\n\t\tif (next) {\n\t\t\t/**\n\t\t\t * This makes the next element to the last element for the next resync cycle.\n\t\t\t */\n\t\t\tif (replacePreviousSibling) {\n\t\t\t\tthis.previousSibling = next;\n\t\t\t}\n\t\t\tthis.addListeners(next);\n\t\t}\n\t};\n\n\tprivate catchTooltipElement = (el?: HTMLDivElement): void => {\n\t\tthis.tooltipElement = el;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-tooltip\">\n\t\t\t\t{this.state._label !== '' && (\n\t\t\t\t\t<div class=\"kol-tooltip__floating\" ref={this.catchTooltipElement}>\n\t\t\t\t\t\t<div class=\"kol-tooltip__arrow\" ref={this.catchArrowElement} />\n\t\t\t\t\t\t<KolSpanFc class=\"kol-tooltip__content\" id={this.state._id} badgeText={this._badgeText} label={this.state._label} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements badge text.\n\t */\n\t@Prop() public _badgeText?: BadgeTextPropType;\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: TooltipStates = {\n\t\t_align: 'top',\n\t\t_label: '', // ⚠ required\n\t};\n\n\t@Watch('_badgeText')\n\tpublic validateBadgeText(value?: BadgeTextPropType): void {\n\t\tvalidateBadgeText(this, value);\n\t}\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: IdPropType): void {\n\t\tvalidateId(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateBadgeText(this._badgeText);\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t}\n\n\tprivate handleEventListeners(): void {\n\t\tthis.resyncListeners(this.previousSibling, this.host?.previousElementSibling, true);\n\t\tthis.resyncListeners(this.tooltipElement, this.tooltipElement);\n\t}\n\n\tpublic connectedCallback(): void {\n\t\tthis.previousSibling = this.host?.previousElementSibling;\n\t}\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleEventListeners();\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentDidLoad)\n\t */\n\tpublic disconnectedCallback(): void {\n\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.previousSibling);\n\t\t\tthis.previousSibling = undefined;\n\t\t}\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.tooltipElement);\n\t\t}\n\t\tif (this.cleanupAutoPositioning) {\n\t\t\tthis.cleanupAutoPositioning();\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/components/kol-tree-item-wc.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{i as watchBoolean}from"./index2.js";import{f as KolLinkWcTag,d as KolIconTag,w as KolTreeTag}from"./component-names.js";import{n as nonce}from"./dev.utils.js";import{c as clsx}from"./clsx.js";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";import{v as validateHref}from"./href.js";const validateActive=(e,t,a)=>{watchBoolean(e,"_active",t,a)},KolTreeItemWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.groupId=`tree-group-${nonce()}`,this.level=void 0,this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1},this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}render(){const{_href:e,_active:t,_hasChildren:a,_open:i,_label:l}=this.state;return h(Host,{key:"e0d63b982e56ef662c1420fc9ade69068b8a81ff",onSlotchange:this.handleSlotchange.bind(this)},h("li",{key:"7c2d91957ad2e92256d5bc8bcbfa003d830a3645",class:"kol-tree-item",style:{"--level":`${this.level}`}},h(KolLinkWcTag,{key:"7207fe34d30d14349d397fbd75ff2f0d16aa7086",class: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:a?i:void 0,_ariaOwns:a?this.groupId:void 0,ref:e=>this.linkElement=e},h("span",{key:"d959cfb814982fcbb72f89a7fea3e2b6031e7ab4",class:"kol-tree-item__link-inner",slot:"expert"},a?h("span",{class:"kol-tree-item__toggle-button",onClick:e=>i?void this.handleCollapseClick(e):void this.handleExpandClick(e)},h(KolIconTag,{class:"kol-tree-item__toggle-button-icon",_icons:"codicon codicon-"+(i?"chevron-down":"chevron-right"),_label:""})):h("span",{class:"kol-tree-item__toggle-button-placeholder"}),h("span",{key:"2249d95f2466360ef113bb8f271d91d5b7ed88e4",class:"kol-tree-item__text"},l))),h("ul",{key:"1648a8aebf70ae58ad6068bf5192078de6d05cfd",class:"kol-tree-item__children",hidden:!a||!i,role:"group",id:this.groupId},h("slot",{key:"07aceb35f569834db39a1d9cfb18f80a5a9753e4"}))))}validateActive(e){validateActive(this,e||!1)}validateLabel(e){validateLabel(this,e)}validateOpen(e){validateOpen(this,e)}validateHref(e){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(){let e=0,t=this.host.parentNode.host.parentNode;for(;null!==t&&t.tagName.toLowerCase()!==KolTreeTag&&t!==document.body;)t=t.parentElement,e+=1;this.level=e}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e,t;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedElements)||void 0===t?void 0:t.call(e).length)})}async focusLink(){await this.linkElement.kolFocus()}async handleExpandClick(e){e.preventDefault(),await this.linkElement.kolFocus(),await this.expand()}async expand(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}))}async handleCollapseClick(e){e.preventDefault(),this.linkElement.focus(),await this.collapse()}async collapse(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!1}))}async isOpen(){var e;return null!==(e=this.state._open)&&void 0!==e&&e}get host(){return this}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}},[4,"kol-tree-item-wc",{_active:[4],_label:[1],_open:[4],_href:[1],level:[32],state:[32],focusLink:[64],expand:[64],collapse:[64],isOpen:[64]},void 0,{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-item-wc"].forEach((e=>{if("kol-tree-item-wc"===e)customElements.get(e)||customElements.define(e,KolTreeItemWc$1)}))}const KolTreeItemWc=KolTreeItemWc$1,defineCustomElement=defineCustomElement$1;export{KolTreeItemWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{c as watchBoolean}from"./progress.js";import{v as validateHref}from"./href.js";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";import{f as KolLinkWcTag,e as KolIconTag,w as KolTreeTag}from"./component-names.js";import{n as nonce}from"./dev.utils.js";import{c as clsx}from"./clsx.js";const validateActive=(e,t,a)=>{watchBoolean(e,"_active",t,a)},KolTreeItemWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.groupId=`tree-group-${nonce()}`,this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1}}render(){const{_href:e,_active:t,_hasChildren:a,_open:l,_label:i}=this.state;return h(Host,{key:"e0d63b982e56ef662c1420fc9ade69068b8a81ff",onSlotchange:this.handleSlotchange.bind(this)},h("li",{key:"7c2d91957ad2e92256d5bc8bcbfa003d830a3645",class:"kol-tree-item",style:{"--level":`${this.level}`}},h(KolLinkWcTag,{key:"7207fe34d30d14349d397fbd75ff2f0d16aa7086",class: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:a?l:void 0,_ariaOwns:a?this.groupId:void 0,ref:e=>this.linkElement=e},h("span",{key:"d959cfb814982fcbb72f89a7fea3e2b6031e7ab4",class:"kol-tree-item__link-inner",slot:"expert"},a?h("span",{class:"kol-tree-item__toggle-button",onClick:e=>l?void this.handleCollapseClick(e):void this.handleExpandClick(e)},h(KolIconTag,{class:"kol-tree-item__toggle-button-icon",_icons:"codicon codicon-"+(l?"chevron-down":"chevron-right"),_label:""})):h("span",{class:"kol-tree-item__toggle-button-placeholder"}),h("span",{key:"2249d95f2466360ef113bb8f271d91d5b7ed88e4",class:"kol-tree-item__text"},i))),h("ul",{key:"1648a8aebf70ae58ad6068bf5192078de6d05cfd",class:"kol-tree-item__children",hidden:!a||!l,role:"group",id:this.groupId},h("slot",{key:"07aceb35f569834db39a1d9cfb18f80a5a9753e4"}))))}validateActive(e){validateActive(this,e||!1)}validateLabel(e){validateLabel(this,e)}validateOpen(e){validateOpen(this,e)}validateHref(e){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(){let e=0,t=this.host.parentNode.host.parentNode;for(;null!==t&&t.tagName.toLowerCase()!==KolTreeTag&&t!==document.body;)t=t.parentElement,e+=1;this.level=e}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e,t;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedElements)||void 0===t?void 0:t.call(e).length)})}async focusLink(){await this.linkElement.kolFocus()}async handleExpandClick(e){e.preventDefault(),await this.linkElement.kolFocus(),await this.expand()}async expand(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}))}async handleCollapseClick(e){e.preventDefault(),this.linkElement.focus(),await this.collapse()}async collapse(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!1}))}async isOpen(){var e;return null!==(e=this.state._open)&&void 0!==e&&e}get host(){return this}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}},[4,"kol-tree-item-wc",{_active:[4],_label:[1],_open:[4],_href:[1],level:[32],state:[32],focusLink:[64],expand:[64],collapse:[64],isOpen:[64]},void 0,{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-item-wc"].forEach((e=>{if("kol-tree-item-wc"===e)customElements.get(e)||customElements.define(e,KolTreeItemWc$1)}))}const KolTreeItemWc=KolTreeItemWc$1,defineCustomElement=defineCustomElement$1;export{KolTreeItemWc,defineCustomElement};

package/dist/components/kol-tree-item-wc.js.map

@@ -1 +1 @@
-{"file":"kol-tree-item-wc.js","mappings":"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","names":["KolTreeItemWc"],"sources":["src/schema/props/active.ts","src/components/tree-item/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type ActivePropType = boolean;\n\n/**\n * Defines whether something is active.\n */\nexport type PropActive = {\n\tactive: ActivePropType;\n};\n\n/* validator */\nexport const validateActive = (component: Generic.Element.Component, value: ActivePropType, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_active', value, options);\n};\n","import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } from '@stencil/core';\n\nimport type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '../../schema';\nimport { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';\nimport { KolLinkWcTag, KolIconTag, KolTreeTag } from '../../core/component-names';\nimport { nonce } from '../../utils/dev.utils';\nimport clsx from 'clsx';\n\n@Component({\n\ttag: `kol-tree-item-wc`,\n\tshadow: false,\n})\nexport class KolTreeItemWc implements TreeItemAPI {\n\tprivate linkElement!: HTMLKolLinkWcElement;\n\tprivate groupId = `tree-group-${nonce()}`;\n\n\t@State() private level?: number;\n\t@Element() host!: HTMLElement;\n\n\tpublic render(): JSX.Element {\n\t\tconst { _href, _active, _hasChildren, _open, _label } = this.state;\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<li\n\t\t\t\t\tclass=\"kol-tree-item\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t'--level': `${this.level}`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-tree-item__link', {\n\t\t\t\t\t\t\t'kol-tree-item__link--first-level': this.level === 0,\n\t\t\t\t\t\t\t'kol-tree-item__link--active': _active,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_href={_href}\n\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t_role=\"treeitem\"\n\t\t\t\t\t\t_tabIndex={_active ? 0 : -1}\n\t\t\t\t\t\t_ariaExpanded={_hasChildren ? _open : undefined}\n\t\t\t\t\t\t_ariaOwns={_hasChildren ? this.groupId : undefined}\n\t\t\t\t\t\tref={(element?: HTMLKolLinkWcElement) => (this.linkElement = element!)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"kol-tree-item__link-inner\" slot=\"expert\">\n\t\t\t\t\t\t\t{_hasChildren ? (\n\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button\"\n\t\t\t\t\t\t\t\t\tonClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button-icon\"\n\t\t\t\t\t\t\t\t\t\t_icons={`codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`}\n\t\t\t\t\t\t\t\t\t\t_label={'' /* Label deliberately left empty */}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"kol-tree-item__toggle-button-placeholder\"></span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class=\"kol-tree-item__text\">{_label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</KolLinkWcTag>\n\t\t\t\t\t<ul class=\"kol-tree-item__children\" hidden={!_hasChildren || !_open} role=\"group\" id={this.groupId}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: TreeItemStates = {\n\t\t_active: false,\n\t\t_hasChildren: false,\n\t\t_href: '',\n\t\t_label: '',\n\t\t_open: false,\n\t};\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@Watch('_active') validateActive(value?: ActivePropType): void {\n\t\tvalidateActive(this, value || false);\n\t}\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open') validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_href') validateHref(value?: HrefPropType): void {\n\t\tvalidateHref(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActive(this._active);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateHref(this._href);\n\n\t\tthis.checkForChildren();\n\t\tthis.determineTreeItemDepth();\n\t}\n\n\tprivate determineTreeItemDepth() {\n\t\tlet level = 0;\n\t\tlet traverseItem: HTMLElement | null = (this.host.parentNode as unknown as ShadowRoot).host.parentNode as HTMLElement;\n\t\twhile (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {\n\t\t\ttraverseItem = traverseItem.parentElement;\n\t\t\tlevel += 1;\n\t\t}\n\t\tthis.level = level;\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate checkForChildren() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_hasChildren: Boolean(this.host.querySelector('slot')?.assignedElements?.().length),\n\t\t};\n\t}\n\n\t@Method() async focusLink() {\n\t\tawait this.linkElement.kolFocus();\n\t}\n\n\tprivate async handleExpandClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tawait this.linkElement.kolFocus();\n\t\tawait this.expand();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async expand() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: true,\n\t\t\t};\n\t\t}\n\t}\n\n\tprivate async handleCollapseClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.linkElement.focus();\n\t\tawait this.collapse();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async collapse() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: false,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async isOpen() {\n\t\treturn this.state._open ?? false;\n\t}\n}\n"],"version":3}
+{"file":"kol-tree-item-wc.js","mappings":"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","names":["KolTreeItemWc","__stencil_proxyCustomElement"],"sources":["src/schema/props/active.ts","src/components/tree-item/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type ActivePropType = boolean;\n\n/**\n * Defines whether something is active.\n */\nexport type PropActive = {\n\tactive: ActivePropType;\n};\n\n/* validator */\nexport const validateActive = (component: Generic.Element.Component, value: ActivePropType, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_active', value, options);\n};\n","import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } from '@stencil/core';\n\nimport type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '../../schema';\nimport { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';\nimport { KolLinkWcTag, KolIconTag, KolTreeTag } from '../../core/component-names';\nimport { nonce } from '../../utils/dev.utils';\nimport clsx from 'clsx';\n\n@Component({\n\ttag: `kol-tree-item-wc`,\n\tshadow: false,\n})\nexport class KolTreeItemWc implements TreeItemAPI {\n\tprivate linkElement!: HTMLKolLinkWcElement;\n\tprivate groupId = `tree-group-${nonce()}`;\n\n\t@State() private level?: number;\n\t@Element() host!: HTMLElement;\n\n\tpublic render(): JSX.Element {\n\t\tconst { _href, _active, _hasChildren, _open, _label } = this.state;\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<li\n\t\t\t\t\tclass=\"kol-tree-item\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t'--level': `${this.level}`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-tree-item__link', {\n\t\t\t\t\t\t\t'kol-tree-item__link--first-level': this.level === 0,\n\t\t\t\t\t\t\t'kol-tree-item__link--active': _active,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_href={_href}\n\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t_role=\"treeitem\"\n\t\t\t\t\t\t_tabIndex={_active ? 0 : -1}\n\t\t\t\t\t\t_ariaExpanded={_hasChildren ? _open : undefined}\n\t\t\t\t\t\t_ariaOwns={_hasChildren ? this.groupId : undefined}\n\t\t\t\t\t\tref={(element?: HTMLKolLinkWcElement) => (this.linkElement = element!)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"kol-tree-item__link-inner\" slot=\"expert\">\n\t\t\t\t\t\t\t{_hasChildren ? (\n\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button\"\n\t\t\t\t\t\t\t\t\tonClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button-icon\"\n\t\t\t\t\t\t\t\t\t\t_icons={`codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`}\n\t\t\t\t\t\t\t\t\t\t_label={'' /* Label deliberately left empty */}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"kol-tree-item__toggle-button-placeholder\"></span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class=\"kol-tree-item__text\">{_label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</KolLinkWcTag>\n\t\t\t\t\t<ul class=\"kol-tree-item__children\" hidden={!_hasChildren || !_open} role=\"group\" id={this.groupId}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: TreeItemStates = {\n\t\t_active: false,\n\t\t_hasChildren: false,\n\t\t_href: '',\n\t\t_label: '',\n\t\t_open: false,\n\t};\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@Watch('_active') validateActive(value?: ActivePropType): void {\n\t\tvalidateActive(this, value || false);\n\t}\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open') validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_href') validateHref(value?: HrefPropType): void {\n\t\tvalidateHref(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActive(this._active);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateHref(this._href);\n\n\t\tthis.checkForChildren();\n\t\tthis.determineTreeItemDepth();\n\t}\n\n\tprivate determineTreeItemDepth() {\n\t\tlet level = 0;\n\t\tlet traverseItem: HTMLElement | null = (this.host.parentNode as unknown as ShadowRoot).host.parentNode as HTMLElement;\n\t\twhile (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {\n\t\t\ttraverseItem = traverseItem.parentElement;\n\t\t\tlevel += 1;\n\t\t}\n\t\tthis.level = level;\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate checkForChildren() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_hasChildren: Boolean(this.host.querySelector('slot')?.assignedElements?.().length),\n\t\t};\n\t}\n\n\t@Method() async focusLink() {\n\t\tawait this.linkElement.kolFocus();\n\t}\n\n\tprivate async handleExpandClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tawait this.linkElement.kolFocus();\n\t\tawait this.expand();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async expand() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: true,\n\t\t\t};\n\t\t}\n\t}\n\n\tprivate async handleCollapseClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.linkElement.focus();\n\t\tawait this.collapse();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async collapse() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: false,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async isOpen() {\n\t\treturn this.state._open ?? false;\n\t}\n}\n"],"version":3}

package/dist/components/kol-tree-item.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{v as KolTreeItemWcTag}from"./component-names.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree-item {\n    --indentation: var(--tree-item-indentation, calc(10rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-tree-item__link .kol-link {\n    align-items: center;\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    padding-left: max(var(--indentation) * var(--level) + (8rem / var(--kolibri-root-font-size, 16)), 8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n    text-decoration: none;\n  }\n  .kol-tree-item__link--first-level .kol-link {\n    padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\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    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n  }\n  .kol-tree-item__text {\n    text-decoration: underline;\n  }\n}",KolTreeItemDefaultStyle0=defaultStyleCss,KolTreeItem$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}async focusLink(){this.element&&await this.element.focusLink()}async expand(){this.element&&await this.element.expand()}async collapse(){this.element&&await this.element.collapse()}async isOpen(){var e,n;return null!==(n=await(null===(e=this.element)||void 0===e?void 0:e.isOpen()))&&void 0!==n&&n}render(){return h(KolTreeItemWcTag,{key:"6e77abb1a162108a6f06ac8bf9024b408a9bf990",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:e=>this.element=e},h("slot",{key:"752481a98faee9bad7d5661bb01bc868198e544e"}))}static get style(){return{default:KolTreeItemDefaultStyle0}}},[33,"kol-tree-item",{_active:[4],_label:[1],_open:[4],_href:[1],focusLink:[64],expand:[64],collapse:[64],isOpen:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-item"].forEach((e=>{if("kol-tree-item"===e)customElements.get(e)||customElements.define(e,KolTreeItem$1)}))}const KolTreeItem=KolTreeItem$1,defineCustomElement=defineCustomElement$1;export{KolTreeItem,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{v as KolTreeItemWcTag}from"./component-names.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree-item {\n    --indentation: var(--tree-item-indentation, calc(10rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-tree-item__link .kol-link {\n    align-items: center;\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    padding-left: max(var(--indentation) * var(--level) + 8rem / var(--kolibri-root-font-size, 16), 8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n    text-decoration: none;\n  }\n  .kol-tree-item__link--first-level .kol-link {\n    padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\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    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n  }\n  .kol-tree-item__text {\n    text-decoration: underline;\n  }\n}",KolTreeItem$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow()}async focusLink(){this.element&&await this.element.focusLink()}async expand(){this.element&&await this.element.expand()}async collapse(){this.element&&await this.element.collapse()}async isOpen(){var e,n;return null!==(n=await(null===(e=this.element)||void 0===e?void 0:e.isOpen()))&&void 0!==n&&n}render(){return h(KolTreeItemWcTag,{key:"6e77abb1a162108a6f06ac8bf9024b408a9bf990",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:e=>this.element=e},h("slot",{key:"752481a98faee9bad7d5661bb01bc868198e544e"}))}static get style(){return{default:defaultStyleCss}}},[33,"kol-tree-item",{_active:[4],_label:[1],_open:[4],_href:[1],focusLink:[64],expand:[64],collapse:[64],isOpen:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-item"].forEach((e=>{if("kol-tree-item"===e)customElements.get(e)||customElements.define(e,KolTreeItem$1)}))}const KolTreeItem=KolTreeItem$1,defineCustomElement=defineCustomElement$1;export{KolTreeItem,defineCustomElement};

package/dist/components/kol-tree-item.js.map

@@ -1 +1 @@
-{"file":"kol-tree-item.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,iwKAAiwK,CAAC;AAC1xK,iCAAe,eAAe;;MCWjBA,aAAW;;;;;;;;;;IAuBb,MAAM,SAAS;QACxB,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,MAAM,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;SAC/B;KACD;IAES,MAAM,MAAM;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;SAC5B;KACD;IAES,MAAM,QAAQ;QACvB,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;SAC9B;KACD;IAES,MAAM,MAAM;;QACrB,OAAO,OAAC,OAAM,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAA,CAAC,mCAAI,KAAK,CAAC;KAC/C;IAEM,MAAM;QACZ,QACC,EAAC,gBAAgB,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,IAErE,8DAAQ,CACU,EAClB;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolTreeItem"],"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 '../../styles/global' as *;\n\n@layer kol-component {\n\t$base-horizontal-padding: rem(8);\n\n\t.kol-tree-item {\n\t\t$root: &;\n\t\t--indentation: var(--tree-item-indentation, #{rem(10)}); // Set `--tree-item-indentation` in themes to control padding\n\n\t\t&__link {\n\t\t\t.kol-link {\n\t\t\t\talign-items: center;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: var(--a11y-min-size);\n\t\t\t\tpadding-left: max(calc((var(--indentation) * var(--level)) + $base-horizontal-padding), $base-horizontal-padding);\n\t\t\t\tpadding-right: rem(6);\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\n\t\t\t&--first-level .kol-link {\n\t\t\t\tpadding-left: rem(6);\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\twidth: var(--a11y-min-size);\n\t\t\theight: var(--a11y-min-size);\n\t\t\tdisplay: inline-flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: 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 type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\nimport { KolTreeItemWcTag } from '../../core/component-names';\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@Method() async focusLink() {\n\t\tif (this.element) {\n\t\t\tawait this.element.focusLink();\n\t\t}\n\t}\n\n\t@Method() async expand() {\n\t\tif (this.element) {\n\t\t\tawait this.element.expand();\n\t\t}\n\t}\n\n\t@Method() async collapse() {\n\t\tif (this.element) {\n\t\t\tawait this.element.collapse();\n\t\t}\n\t}\n\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"],"version":3}
+{"file":"kol-tree-item.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,uyKAAuyK;;MCYlzKA,aAAW,GAAAC,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;;;;;;AAuBb,IAAA,MAAM,SAAS,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,MAAM,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;;;AAItB,IAAA,MAAM,MAAM,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;;;AAInB,IAAA,MAAM,QAAQ,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;;;AAIrB,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,QACC,CAAC,CAAA,gBAAgB,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,EAErE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolTreeItem","__stencil_proxyCustomElement"],"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 '../../styles/global' as *;\n\n@layer kol-component {\n\t$base-horizontal-padding: rem(8);\n\n\t.kol-tree-item {\n\t\t$root: &;\n\t\t--indentation: var(--tree-item-indentation, #{rem(10)}); // Set `--tree-item-indentation` in themes to control padding\n\n\t\t&__link {\n\t\t\t.kol-link {\n\t\t\t\talign-items: center;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: var(--a11y-min-size);\n\t\t\t\tpadding-left: max(calc((var(--indentation) * var(--level)) + $base-horizontal-padding), $base-horizontal-padding);\n\t\t\t\tpadding-right: rem(6);\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\n\t\t\t&--first-level .kol-link {\n\t\t\t\tpadding-left: rem(6);\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\twidth: var(--a11y-min-size);\n\t\t\theight: var(--a11y-min-size);\n\t\t\tdisplay: inline-flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: 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 type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\nimport { KolTreeItemWcTag } from '../../core/component-names';\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@Method() async focusLink() {\n\t\tif (this.element) {\n\t\t\tawait this.element.focusLink();\n\t\t}\n\t}\n\n\t@Method() async expand() {\n\t\tif (this.element) {\n\t\t\tawait this.element.expand();\n\t\t}\n\t}\n\n\t@Method() async collapse() {\n\t\tif (this.element) {\n\t\t\tawait this.element.collapse();\n\t\t}\n\t}\n\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"],"version":3}

package/dist/components/kol-tree-wc.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import"./index2.js";import{x as KolTreeItemTag,w as KolTreeTag}from"./component-names.js";import{v as validateLabel}from"./label.js";const KolTreeWc$1=proxyCustomElement(class e extends HTMLElement{constructor(){super(),this.__registerHost(),this.state={_label:""},this._label=void 0}validateLabel(e){validateLabel(this,e)}render(){return h(Host,{key:"0018aab7e413a716e2662cfd597d2ffdb063ffea",onSlotchange:this.handleSlotchange.bind(this)},h("nav",{key:"383abb8a0f89e041b9d84fc7e872e1d4a4638948",class:"kol-tree","aria-label":this.state._label},h("ul",{key:"f35923f336b1c615940c32e40735fc5f74cade61",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},h("slot",{key:"21d555457a7a9cdab0f798c30230cde851b4038c"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===KolTreeItemTag.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}observeChildListMutations(){this.observer=new MutationObserver(this.handleTreeChange.bind(this)),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.handleTreeChange()}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})}))}getTopLevelTreeItems(){var t,a,l;return null===(l=null===(a=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===l?void 0:l.filter(e.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce(((e,t)=>{const a=t.querySelectorAll(KolTreeItemTag);return[...e,t,...a]}),[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const t=async a=>!e.isTreeItem(a.parentElement)||await a.parentElement.isOpen()&&await t(a.parentElement);return(await Promise.all(this.treeItemElements.map((async e=>({value:e,include:await t(e)}))))).filter((e=>e.include)).map((e=>e.value))}async handleKeyDown(e){var t,a,l,i,n,s,o,r,c;const d=await this.getOpenTreeItemElements(),u=null===(t=document.activeElement)||void 0===t?void 0:t.closest(KolTreeItemTag),v=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!d||!u)return;const m=null==d?void 0:d.findIndex((e=>e===u));switch(e.key){case"ArrowDown":await(null===(a=d[m+1])||void 0===a?void 0:a.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(l=d[m-1])||void 0===l?void 0:l.focusLink()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await u.isOpen()?await(null===(i=d[m+1])||void 0===i?void 0:i.focusLink()):await u.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await u.isOpen())await u.collapse();else{const e=d.findIndex((e=>e===u.parentElement));-1!==e&&await(null===(n=d[e])||void 0===n?void 0:n.focusLink())}break;case"Home":await(null===(s=d[0])||void 0===s?void 0:s.focusLink()),e.preventDefault();break;case"End":await(null===(o=d[d.length-1])||void 0===o?void 0:o.focusLink()),e.preventDefault();break;case null===(r=e.key.match(/^[a-zA-Z0-9]$/))||void 0===r?void 0:r.input:if(!v){const t=e.key.toLowerCase(),a=d.indexOf(u)+1,l=d.concat(d),i=l.slice(a,a+d.length).findIndex((e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)}));-1!==i&&(await l[a+i].focusLink(),e.preventDefault())}break;case"*":{const e=null===(c=u.parentElement)||void 0===c?void 0:c.querySelectorAll(KolTreeItemTag);null==e||e.forEach((e=>{e.expand()}));break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(KolTreeTag)&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const t=a=>{e.isTreeItem(a.parentElement)&&(a.parentElement.expand(),t(a.parentElement))},a=(()=>{var t,a,l,i;const n=null!==(i=null===(l=null===(a=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===l?void 0:l.filter(e.isTreeItem))&&void 0!==i?i:[];for(const e of n){if(e._active)return e;const t=e.querySelector(`${KolTreeItemTag}[_active="true"]`);if(t&&t._active)return t}})();a&&t(a)}get host(){return this}static get watchers(){return{_label:["validateLabel"]}}},[4,"kol-tree-wc",{_label:[1],state:[32]},[[0,"keydown","handleKeyDown"],[0,"focusout","handleFocusOut"]],{_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-wc"].forEach((e=>{if("kol-tree-wc"===e)customElements.get(e)||customElements.define(e,KolTreeWc$1)}))}const KolTreeWc=KolTreeWc$1,defineCustomElement=defineCustomElement$1;export{KolTreeWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import"./progress.js";import{v as validateLabel}from"./label.js";import{x as KolTreeItemTag,w as KolTreeTag}from"./component-names.js";const KolTreeWc$1=proxyCustomElement(class e extends HTMLElement{constructor(){super(),this.__registerHost(),this.state={_label:""}}validateLabel(e){validateLabel(this,e)}render(){return h(Host,{key:"0018aab7e413a716e2662cfd597d2ffdb063ffea",onSlotchange:this.handleSlotchange.bind(this)},h("nav",{key:"383abb8a0f89e041b9d84fc7e872e1d4a4638948",class:"kol-tree","aria-label":this.state._label},h("ul",{key:"f35923f336b1c615940c32e40735fc5f74cade61",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},h("slot",{key:"21d555457a7a9cdab0f798c30230cde851b4038c"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===KolTreeItemTag.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}observeChildListMutations(){this.observer=new MutationObserver(this.handleTreeChange.bind(this)),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.handleTreeChange()}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})}))}getTopLevelTreeItems(){var t,a,l;return null===(l=null===(a=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===l?void 0:l.filter(e.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce(((e,t)=>{const a=t.querySelectorAll(KolTreeItemTag);return[...e,t,...a]}),[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const t=async a=>!e.isTreeItem(a.parentElement)||await a.parentElement.isOpen()&&await t(a.parentElement);return(await Promise.all(this.treeItemElements.map((async e=>({value:e,include:await t(e)}))))).filter((e=>e.include)).map((e=>e.value))}async handleKeyDown(e){var t,a,l,i,n,s,r,o,c;const d=await this.getOpenTreeItemElements(),u=null===(t=document.activeElement)||void 0===t?void 0:t.closest(KolTreeItemTag),v=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!d||!u)return;const m=null==d?void 0:d.findIndex((e=>e===u));switch(e.key){case"ArrowDown":await(null===(a=d[m+1])||void 0===a?void 0:a.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(l=d[m-1])||void 0===l?void 0:l.focusLink()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await u.isOpen()?await(null===(i=d[m+1])||void 0===i?void 0:i.focusLink()):await u.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await u.isOpen())await u.collapse();else{const e=d.findIndex((e=>e===u.parentElement));-1!==e&&await(null===(n=d[e])||void 0===n?void 0:n.focusLink())}break;case"Home":await(null===(s=d[0])||void 0===s?void 0:s.focusLink()),e.preventDefault();break;case"End":await(null===(r=d[d.length-1])||void 0===r?void 0:r.focusLink()),e.preventDefault();break;case null===(o=e.key.match(/^[a-zA-Z0-9]$/))||void 0===o?void 0:o.input:if(!v){const t=e.key.toLowerCase(),a=d.indexOf(u)+1,l=d.concat(d),i=l.slice(a,a+d.length).findIndex((e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)}));-1!==i&&(await l[a+i].focusLink(),e.preventDefault())}break;case"*":{const e=null===(c=u.parentElement)||void 0===c?void 0:c.querySelectorAll(KolTreeItemTag);null==e||e.forEach((e=>{e.expand()}));break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(KolTreeTag)&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const t=a=>{e.isTreeItem(a.parentElement)&&(a.parentElement.expand(),t(a.parentElement))},a=(()=>{var t,a,l,i;const n=null!==(i=null===(l=null===(a=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===l?void 0:l.filter(e.isTreeItem))&&void 0!==i?i:[];for(const e of n){if(e._active)return e;const t=e.querySelector(`${KolTreeItemTag}[_active="true"]`);if(t&&t._active)return t}})();a&&t(a)}get host(){return this}static get watchers(){return{_label:["validateLabel"]}}},[4,"kol-tree-wc",{_label:[1],state:[32]},[[0,"keydown","handleKeyDown"],[0,"focusout","handleFocusOut"]],{_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-wc"].forEach((e=>{if("kol-tree-wc"===e)customElements.get(e)||customElements.define(e,KolTreeWc$1)}))}const KolTreeWc=KolTreeWc$1,defineCustomElement=defineCustomElement$1;export{KolTreeWc,defineCustomElement};

package/dist/components/kol-tree-wc.js.map

@@ -1 +1 @@
-{"file":"kol-tree-wc.js","mappings":"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","names":["KolTreeWc"],"sources":["src/components/tree/component.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, TreeAPI, TreeStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { KolTreeItemTag, KolTreeTag } from '../../core/component-names';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\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@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<nav class=\"kol-tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"kol-tree__treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === KolTreeItemTag.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(this.handleTreeChange.bind(this));\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.handleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems()?.forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems()?.reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(KolTreeItemTag);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst areElementAndAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tif (!KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\t// parent is tree itself, top level is always open\n\t\t\t\treturn true;\n\t\t\t} else {\n\t\t\t\treturn (await element.parentElement.isOpen()) && (await areElementAndAllParentsOpen(element.parentElement));\n\t\t\t}\n\t\t};\n\n\t\tconst elementsWithInclude = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (element) => ({\n\t\t\t\tvalue: element,\n\t\t\t\tinclude: await areElementAndAllParentsOpen(element),\n\t\t\t})),\n\t\t);\n\n\t\treturn elementsWithInclude.filter((element) => element.include).map((element) => element.value);\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(KolTreeItemTag);\n\t\tconst hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Right':\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\t} else {\n\t\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Left':\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\tconst parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);\n\t\t\t\t\tparentIndex !== -1 && (await openItems[parentIndex]?.focusLink());\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tawait openItems[0]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tawait openItems[openItems.length - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase event.key.match(/^[a-zA-Z0-9]$/)?.input: {\n\t\t\t\t/* Ignore events with any modifier key to avoid breaking native browser or OS shortcuts such as ⌘+L */\n\t\t\t\tif (!hasModifierKeyPressed) {\n\t\t\t\t\tconst char = event.key.toLowerCase();\n\t\t\t\t\tconst startIndex = openItems.indexOf(currentTreeItem) + 1;\n\t\t\t\t\tconst wrapAroundItems = openItems.concat(openItems);\n\t\t\t\t\tconst matchIndex = wrapAroundItems\n\t\t\t\t\t\t.slice(startIndex, startIndex + openItems.length)\n\t\t\t\t\t\t.findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\n\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\tawait wrapAroundItems[startIndex + matchIndex].focusLink();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(KolTreeItemTag);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic async handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest(KolTreeTag)) {\n\t\t\t/* Tree lost focus */\n\t\t\tawait this.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tprivate async ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active=\"true\"]`);\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"],"version":3}
+{"file":"kol-tree-wc.js","mappings":"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","names":["KolTreeWc","__stencil_proxyCustomElement"],"sources":["src/components/tree/component.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, TreeAPI, TreeStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { KolTreeItemTag, KolTreeTag } from '../../core/component-names';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\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@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<nav class=\"kol-tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"kol-tree__treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === KolTreeItemTag.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(this.handleTreeChange.bind(this));\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.handleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems()?.forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems()?.reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(KolTreeItemTag);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst areElementAndAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tif (!KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\t// parent is tree itself, top level is always open\n\t\t\t\treturn true;\n\t\t\t} else {\n\t\t\t\treturn (await element.parentElement.isOpen()) && (await areElementAndAllParentsOpen(element.parentElement));\n\t\t\t}\n\t\t};\n\n\t\tconst elementsWithInclude = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (element) => ({\n\t\t\t\tvalue: element,\n\t\t\t\tinclude: await areElementAndAllParentsOpen(element),\n\t\t\t})),\n\t\t);\n\n\t\treturn elementsWithInclude.filter((element) => element.include).map((element) => element.value);\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(KolTreeItemTag);\n\t\tconst hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Right':\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\t} else {\n\t\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Left':\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\tconst parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);\n\t\t\t\t\tparentIndex !== -1 && (await openItems[parentIndex]?.focusLink());\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tawait openItems[0]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tawait openItems[openItems.length - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase event.key.match(/^[a-zA-Z0-9]$/)?.input: {\n\t\t\t\t/* Ignore events with any modifier key to avoid breaking native browser or OS shortcuts such as ⌘+L */\n\t\t\t\tif (!hasModifierKeyPressed) {\n\t\t\t\t\tconst char = event.key.toLowerCase();\n\t\t\t\t\tconst startIndex = openItems.indexOf(currentTreeItem) + 1;\n\t\t\t\t\tconst wrapAroundItems = openItems.concat(openItems);\n\t\t\t\t\tconst matchIndex = wrapAroundItems\n\t\t\t\t\t\t.slice(startIndex, startIndex + openItems.length)\n\t\t\t\t\t\t.findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\n\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\tawait wrapAroundItems[startIndex + matchIndex].focusLink();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(KolTreeItemTag);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic async handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest(KolTreeTag)) {\n\t\t\t/* Tree lost focus */\n\t\t\tawait this.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tprivate async ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active=\"true\"]`);\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"],"version":3}