@public-ui/components 2.2.17-rc.0 → 2.2.17-rc.5

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,r as t,H as e}from"./index-77da4ee6.js";import{t as o}from"./i18n-3dd5729d.js";import{n as i}from"./dev.utils-52f8c2e9.js";import{K as a}from"./Alert-fd35cde7.js";import{t as s}from"./component-names-4cb1c62b.js";import"./i18n-b14e6088.js";import"./index-7a63e9eb.js";import"./tslib.es6-1173d062.js";import"./clsx-09a06a12.js";const l=({key:t,onClose:e,onRef:i,toastState:o})=>n("div",{class:`toast ${o.status}`,key:t},n(a,{class:"alert",alert:!0,label:o.toast.label,level:0,hasCloser:!0,type:o.toast.type,variant:o.toast.alertVariant||o.toast.variant||"card",onCloserClick:e},n("div",{ref:i},"string"==typeof o.toast.description?o.toast.description:null))),r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\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    position: fixed;\n    z-index: 200;\n    flex-direction: column;\n  }\n  .close-all {\n    align-self: flex-end;\n  }\n}",d=r,c=300,h=class{constructor(n){t(this,n),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}async enqueue(t){const n={toast:t,status:"adding",id:`toast-${i()}`};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)})},c),()=>{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)},c)}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)})},c)}}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 n(e,{key:"2379b9af9edd7d446f13d08d5842c1454fa57cc4",class:"kol-toast-container"},this.state._toastStates.length>1&&n(s,{key:"adde3c113c5d050785d9ac0cc9ec913b9fe8bd2c",_label:o("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map(t=>n(l,{key:t.id,onClose:()=>this.handleClose(t),onRef:n=>this.handleToastRef(t,n),toastState:t})))}};h.style={default:d};export{h as kol_toast_container};
+import{h as n,r as t,H as e}from"./index-56c9fca5.js";import{t as i}from"./i18n-3dd5729d.js";import{n as o}from"./dev.utils-202fb0ba.js";import{K as a}from"./Alert-95f2c21b.js";import{t as s}from"./component-names-4cb1c62b.js";import"./i18n-b14e6088.js";import"./index-7a63e9eb.js";import"./tslib.es6-1173d062.js";import"./clsx-09a06a12.js";const l=({key:t,onClose:e,onRef:i,toastState:s})=>n("div",{class:`toast ${s.status}`,key:t},n(a,{class:"alert",alert:!0,label:s.toast.label,level:0,hasCloser:!0,type:s.toast.type,variant:s.toast.alertVariant||s.toast.variant||"card",onCloserClick:e},n("div",{ref:i},"string"==typeof s.toast.description?s.toast.description:null))),r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\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    position: fixed;\n    z-index: 200;\n    flex-direction: column;\n  }\n  .close-all {\n    align-self: flex-end;\n  }\n}",c=r,d=300,h=class{constructor(n){t(this,n),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}async enqueue(t){const n={toast:t,status:"adding",id:`toast-${o()}`};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)})},d),()=>{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)},d)}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)})},d)}}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 n(e,{key:"0675db1de5cfcaab05fce59f77a8690e21b33313",class:"kol-toast-container"},this.state._toastStates.length>1&&n(s,{key:"c9d662e674ee361eefa1229517bad7f7111807f4",_label:i("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map(t=>n(l,{key:t.id,onClose:()=>this.handleClose(t),onRef:n=>this.handleToastRef(t,n),toastState:t})))}};h.style={default:c};export{h as kol_toast_container};

package/dist/kolibri/kol-toast-container.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["InternalToast","key","onClose","onRef","toastState","h","class","status","KolAlertFc","alert","label","toast","level","hasCloser","type","variant","alertVariant","onCloserClick","ref","description","defaultStyleCss","KolToastContainerDefaultStyle0","TRANSITION_TIMEOUT","KolToastContainer","this","knownRenderFunctions","Set","_toastStates","enqueue","newToastState","id","nonce","state","Object","assign","setTimeout","map","localToastState","handleClose","filter","_b","_a","call","closeAll","immediate","toastsToClose","every","toastToClose","forEach","handleToastRef","element","render","has","add","close","Host","length","KolButtonTag","_label","translate","_on","onClick"],"sources":["src/components/toaster/InternalToast.tsx","src/components/toaster/style.scss?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/shadow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ToastState } from '../../schema';\n\ntype Props = {\n\tkey: string;\n\tonClose: () => void;\n\tonRef: (element?: HTMLDivElement) => void;\n\ttoastState: ToastState;\n};\n\nexport const InternalToast = ({ key, onClose, onRef, toastState }: Props) => {\n\treturn (\n\t\t<div class={`toast ${toastState.status}`} key={key}>\n\t\t\t<KolAlertFc\n\t\t\t\tclass=\"alert\"\n\t\t\t\talert={true}\n\t\t\t\tlabel={toastState.toast.label}\n\t\t\t\tlevel={0}\n\t\t\t\thasCloser={true}\n\t\t\t\ttype={toastState.toast.type}\n\t\t\t\tvariant={toastState.toast.alertVariant || toastState.toast.variant || 'card'}\n\t\t\t\tonCloserClick={onClose}\n\t\t\t>\n\t\t\t\t<div ref={onRef}>{typeof toastState.toast.description === 'string' ? toastState.toast.description : null}</div>\n\t\t\t</KolAlertFc>\n\t\t</div>\n\t);\n};\n","@use '../style' as *;\n@use '../@shared/kol-alert-mixin' as *;\n\n@include kol-alert-styles;\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: flex;\n\t\tposition: fixed;\n\t\tz-index: 200;\n\t\tflex-direction: column;\n\t}\n\n\t.close-all {\n\t\talign-self: flex-end;\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';\nimport { InternalToast } from './InternalToast';\n\nimport type { Toast, ToasterAPI, ToasterStates, ToastRenderFunction, ToastState } from '../../schema';\nimport { KolButtonTag } from '../../core/component-names';\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/**\n\t * Adds a toast to the queue and returns a close function.\n\t */\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/**\n\t * Closes all open toasts.\n\t */\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=\"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<InternalToast\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\tonRef={(element) => this.handleToastRef(toastState, element)}\n\t\t\t\t\t\ttoastState={toastState}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["InternalToast","key","onClose","onRef","toastState","h","class","status","KolAlertFc","alert","label","toast","level","hasCloser","type","variant","alertVariant","onCloserClick","ref","description","defaultStyleCss","KolToastContainerDefaultStyle0","TRANSITION_TIMEOUT","KolToastContainer","this","knownRenderFunctions","Set","_toastStates","enqueue","newToastState","id","nonce","state","Object","assign","setTimeout","map","localToastState","handleClose","filter","_b","_a","call","closeAll","immediate","toastsToClose","every","toastToClose","forEach","handleToastRef","element","render","has","add","close","Host","length","KolButtonTag","_label","translate","_on","onClick"],"sources":["src/components/toaster/InternalToast.tsx","src/components/toaster/style.scss?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/shadow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ToastState } from '../../schema';\n\ntype Props = {\n\tkey: string;\n\tonClose: () => void;\n\tonRef: (element?: HTMLDivElement) => void;\n\ttoastState: ToastState;\n};\n\nexport const InternalToast = ({ key, onClose, onRef, toastState }: Props) => {\n\treturn (\n\t\t<div class={`toast ${toastState.status}`} key={key}>\n\t\t\t<KolAlertFc\n\t\t\t\tclass=\"alert\"\n\t\t\t\talert={true}\n\t\t\t\tlabel={toastState.toast.label}\n\t\t\t\tlevel={0}\n\t\t\t\thasCloser={true}\n\t\t\t\ttype={toastState.toast.type}\n\t\t\t\tvariant={toastState.toast.alertVariant || toastState.toast.variant || 'card'}\n\t\t\t\tonCloserClick={onClose}\n\t\t\t>\n\t\t\t\t<div ref={onRef}>{typeof toastState.toast.description === 'string' ? toastState.toast.description : null}</div>\n\t\t\t</KolAlertFc>\n\t\t</div>\n\t);\n};\n","@use '../style' as *;\n@use '../@shared/kol-alert-mixin' as *;\n\n@include kol-alert-styles;\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: flex;\n\t\tposition: fixed;\n\t\tz-index: 200;\n\t\tflex-direction: column;\n\t}\n\n\t.close-all {\n\t\talign-self: flex-end;\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';\nimport { InternalToast } from './InternalToast';\n\nimport type { Toast, ToasterAPI, ToasterStates, ToastRenderFunction, ToastState } from '../../schema';\nimport { KolButtonTag } from '../../core/component-names';\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/**\n\t * Adds a toast to the queue and returns a close function.\n\t */\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/**\n\t * Closes all open toasts.\n\t */\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=\"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<InternalToast\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\tonRef={(element) => this.handleToastRef(toastState, element)}\n\t\t\t\t\t\ttoastState={toastState}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as e,g as i}from"./index-77da4ee6.js";import{_ as o}from"./tslib.es6-1173d062.js";import{M as a,o as s,l as r,i as l,m as d}from"./index-7a63e9eb.js";import{j as c,c as h}from"./component-names-4cb1c62b.js";import{v as p}from"./label-7d1ce375.js";const b=(n,e)=>{a(e,()=>{s(e,()=>{void 0===e&&(e=[]);try{e=r(e)}catch(n){}Array.isArray(e)&&e.every(n=>l(n))&&d(n,"_items",e)})})},f="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    width: 100%;\n    margin: auto;\n  }\n}\n@layer kol-component {\n  .toolbar {\n    display: flex;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",u=f,m="kol-toolbar-item",w=class{constructor(e){n(this,e),this.indexToElement=new Map,this.renderItem=(n,e)=>{const i=this.normalizeItem(n),o=e!==this.currentIndex||(null==i?void 0:i._disabled)?-1:0,a={key:e,_tabIndex:o,class:`button normal ${m} `},s=n=>{n&&this.indexToElement.set(e,n)};return t("_href"in i?c:h,Object.assign({},i,a,{ref:s}))},this.state={_label:"",_items:[]},this.currentIndex=0,this._label=void 0,this._items=void 0}normalizeItem(n){const{_icons:e,_disabled:t}=n,i=o(n,["_icons","_disabled"]);return Object.assign(Object.assign({},i),{_icons:e,_disabled:t})}render(){return t(e,{key:"6e9122a7972b7e620875d9bb19147145e274c020",class:"kol-toolbar"},t("div",{key:"621a2f2015a6e4d3f67fc9d9ab8fa0e324bb39c7",class:"toolbar",role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem)))}validateLabel(n){p(this,n)}validateItems(n){b(this,n),this.indexToElement.clear(),this.setFirstEnabledItemIndex()}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,i,o,a;if(!("ArrowRight"===n.code||"ArrowLeft"===n.code||"ArrowUp"===n.code||"ArrowDown"===n.code))return;n.preventDefault();const s=(null!==(t=null===(e=this._items)||void 0===e?void 0:e.length)&&void 0!==t?t:0)-1;if(s<0)return;const l=this.currentIndex;let r=l;switch(n.code){case"ArrowUp":case"ArrowLeft":r=l>0?l-1:s;break;case"ArrowDown":case"ArrowRight":r=l<s?l+1:0}l!==r&&((null===(o=null===(i=this.state._items)||void 0===i?void 0:i[r])||void 0===o?void 0:o._disabled)||(this.currentIndex=r,null===(a=this.getCurrentToolbarItem(r))||void 0===a||a.kolFocus()))}handleBlur(n){n.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.setFirstEnabledItemIndex()}get host(){return i(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"]}}};w.style={default:u};export{w as kol_toolbar};
+import{r as n,h as t,H as e,g as i}from"./index-56c9fca5.js";import{_ as o}from"./tslib.es6-1173d062.js";import{M as a,o as s,l as r,i as l,m as d}from"./index-7a63e9eb.js";import{j as c,c as h}from"./component-names-4cb1c62b.js";import{v as p}from"./label-7d1ce375.js";const b=(n,e)=>{a(e,()=>{s(e,()=>{void 0===e&&(e=[]);try{e=r(e)}catch(n){}Array.isArray(e)&&e.every(n=>l(n))&&d(n,"_items",e)})})},f="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\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  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    width: 100%;\n    margin: auto;\n  }\n}\n@layer kol-component {\n  .toolbar {\n    display: flex;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",m=f,u="kol-toolbar-item",w=class{constructor(e){n(this,e),this.indexToElement=new Map,this.renderItem=(n,e)=>{const i=this.normalizeItem(n),o=e!==this.currentIndex||(null==i?void 0:i._disabled)?-1:0,a={key:e,_tabIndex:o,class:`button normal ${u} `},s=n=>{n&&this.indexToElement.set(e,n)};return t("_href"in i?c:h,Object.assign({},i,a,{ref:s}))},this.state={_label:"",_items:[]},this.currentIndex=0,this._label=void 0,this._items=void 0}normalizeItem(n){const{_icons:e,_disabled:t}=n,i=o(n,["_icons","_disabled"]);return Object.assign(Object.assign({},i),{_icons:e,_disabled:t})}render(){return t(e,{key:"54fb48e2638c9649b2bd5d28c5dd99f1068d85d2",class:"kol-toolbar"},t("div",{key:"319331b36f3b26cdbbf80645175b868313fc11ec",class:"toolbar",role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem)))}validateLabel(n){p(this,n)}validateItems(n){b(this,n),this.indexToElement.clear(),this.setFirstEnabledItemIndex()}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,i,o,a;if(!("ArrowRight"===n.code||"ArrowLeft"===n.code||"ArrowUp"===n.code||"ArrowDown"===n.code))return;n.preventDefault();const s=(null!==(t=null===(e=this._items)||void 0===e?void 0:e.length)&&void 0!==t?t:0)-1;if(s<0)return;const l=this.currentIndex;let r=l;switch(n.code){case"ArrowUp":case"ArrowLeft":r=l>0?l-1:s;break;case"ArrowDown":case"ArrowRight":r=l<s?l+1:0}l!==r&&((null===(o=null===(i=this.state._items)||void 0===i?void 0:i[r])||void 0===o?void 0:o._disabled)||(this.currentIndex=r,null===(a=this.getCurrentToolbarItem(r))||void 0===a||a.kolFocus()))}handleBlur(n){n.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.setFirstEnabledItemIndex()}get host(){return i(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"]}}};w.style={default:m};export{w as kol_toolbar};

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

@@ -1 +1 @@
-{"version":3,"names":["validateToolbarItems","component","value","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","every","items","isObject","setState","defaultStyleCss","KolToolbarDefaultStyle0","TOOLBAR_ITEM_TAG_NAME","KolToolbar","this","indexToElement","Map","renderItem","raw","index","element","normalizeItem","tabIndex","currentIndex","_disabled","props","key","_tabIndex","class","catchRef","el","set","h","KolLinkWcTag","Object","assign","ref","KolButtonWcTag","_label","_items","item","_icons","rest","__rest","render","Host","role","state","map","validateLabel","validateItems","clear","setFirstEnabledItemIndex","getCurrentToolbarItem","get","undefined","_a","findIndex","handleKeyDown","event","isArrowKey","code","preventDefault","lastItemIndex","_b","length","nextIndex","_d","_c","_e","kolFocus","handleBlur","target","host","componentWillLoad"],"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 { isObject } from '../validators';\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) => isObject(items))) {\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 '../style' as *;\n@use '../tooltip/style.scss' as *;\n@use '../button' as *;\n\n@layer kol-component {\n\t.toolbar {\n\t\tdisplay: flex;\n\t\tgap: to-rem(16);\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\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, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, ToolbarAPI, ToolbarStates, ToolbarItemsPropType, ToolbarItemPropType } from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\n\nconst TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';\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\tprivate normalizeItem(item: ToolbarItemPropType): ToolbarItemPropType {\n\t\tconst { _icons, _disabled, ...rest } = item;\n\t\treturn { ...rest, _icons, _disabled };\n\t}\n\n\tprivate renderItem = (raw: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst element = this.normalizeItem(raw);\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\n\t\tconst props = {\n\t\t\tkey: index,\n\t\t\t_tabIndex: tabIndex,\n\t\t\tclass: `button normal ${TOOLBAR_ITEM_TAG_NAME} `,\n\t\t};\n\t\tconst catchRef = (el?: HTMLKolLinkWcElement | HTMLKolButtonWcElement) => {\n\t\t\tif (el) this.indexToElement.set(index, el);\n\t\t};\n\n\t\treturn '_href' in element ? (\n\t\t\t<KolLinkWcTag {...element} {...props} ref={catchRef}></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<Host class=\"kol-toolbar\">\n\t\t\t\t<div class=\"toolbar\" role=\"toolbar\" aria-label={this.state._label}>\n\t\t\t\t\t{this.state._items.map(this.renderItem)}\n\t\t\t\t</div>\n\t\t\t</Host>\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@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_items')\n\tpublic validateItems(value?: ToolbarItemsPropType): void {\n\t\tvalidateToolbarItems(this, value);\n\t\tthis.indexToElement.clear();\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n\n\t/**\n\t * Retrieves the toolbar item by index if defined.\n\t * If not it use the current index of state.\n\t *\n\t * @returns An array of HTMLElements representing the toolbar items.\n\t */\n\tprivate getCurrentToolbarItem(index?: number): HTMLKolLinkWcElement | HTMLKolButtonWcElement | undefined {\n\t\treturn typeof index === 'number' ? this.indexToElement.get(index) : undefined;\n\t}\n\n\t/**\n\t * Sets the index of the first enabled toolbar item.\n\t */\n\tprivate setFirstEnabledItemIndex() {\n\t\tthis.currentIndex = this.state._items?.findIndex((item) => !item._disabled);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst isArrowKey = event.code === 'ArrowRight' || event.code === 'ArrowLeft' || event.code === 'ArrowUp' || event.code === 'ArrowDown';\n\t\tif (!isArrowKey) return;\n\t\tevent.preventDefault();\n\n\t\tconst lastItemIndex = (this._items?.length ?? 0) - 1;\n\t\tif (lastItemIndex < 0) return;\n\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = currentIndex;\n\n\t\tswitch (event.code) {\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tnextIndex = currentIndex > 0 ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowRight':\n\t\t\t\tnextIndex = currentIndex < lastItemIndex ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif (currentIndex === nextIndex) return;\n\n\t\tif (this.state._items?.[nextIndex]?._disabled) return;\n\n\t\tthis.currentIndex = nextIndex;\n\t\tvoid this.getCurrentToolbarItem(nextIndex)?.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.setFirstEnabledItemIndex();\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["validateToolbarItems","component","value","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","every","items","isObject","setState","defaultStyleCss","KolToolbarDefaultStyle0","TOOLBAR_ITEM_TAG_NAME","KolToolbar","this","indexToElement","Map","renderItem","raw","index","element","normalizeItem","tabIndex","currentIndex","_disabled","props","key","_tabIndex","class","catchRef","el","set","h","KolLinkWcTag","Object","assign","ref","KolButtonWcTag","_label","_items","item","_icons","rest","__rest","render","Host","role","state","map","validateLabel","validateItems","clear","setFirstEnabledItemIndex","getCurrentToolbarItem","get","undefined","_a","findIndex","handleKeyDown","event","isArrowKey","code","preventDefault","lastItemIndex","_b","length","nextIndex","_d","_c","_e","kolFocus","handleBlur","target","host","componentWillLoad"],"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 { isObject } from '../validators';\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) => isObject(items))) {\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 '../style' as *;\n@use '../tooltip/style.scss' as *;\n@use '../button' as *;\n\n@layer kol-component {\n\t.toolbar {\n\t\tdisplay: flex;\n\t\tgap: to-rem(16);\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\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, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, ToolbarAPI, ToolbarStates, ToolbarItemsPropType, ToolbarItemPropType } from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\n\nconst TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';\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\tprivate normalizeItem(item: ToolbarItemPropType): ToolbarItemPropType {\n\t\tconst { _icons, _disabled, ...rest } = item;\n\t\treturn { ...rest, _icons, _disabled };\n\t}\n\n\tprivate renderItem = (raw: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst element = this.normalizeItem(raw);\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\n\t\tconst props = {\n\t\t\tkey: index,\n\t\t\t_tabIndex: tabIndex,\n\t\t\tclass: `button normal ${TOOLBAR_ITEM_TAG_NAME} `,\n\t\t};\n\t\tconst catchRef = (el?: HTMLKolLinkWcElement | HTMLKolButtonWcElement) => {\n\t\t\tif (el) this.indexToElement.set(index, el);\n\t\t};\n\n\t\treturn '_href' in element ? (\n\t\t\t<KolLinkWcTag {...element} {...props} ref={catchRef}></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<Host class=\"kol-toolbar\">\n\t\t\t\t<div class=\"toolbar\" role=\"toolbar\" aria-label={this.state._label}>\n\t\t\t\t\t{this.state._items.map(this.renderItem)}\n\t\t\t\t</div>\n\t\t\t</Host>\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@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_items')\n\tpublic validateItems(value?: ToolbarItemsPropType): void {\n\t\tvalidateToolbarItems(this, value);\n\t\tthis.indexToElement.clear();\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n\n\t/**\n\t * Retrieves the toolbar item by index if defined.\n\t * If not it use the current index of state.\n\t *\n\t * @returns An array of HTMLElements representing the toolbar items.\n\t */\n\tprivate getCurrentToolbarItem(index?: number): HTMLKolLinkWcElement | HTMLKolButtonWcElement | undefined {\n\t\treturn typeof index === 'number' ? this.indexToElement.get(index) : undefined;\n\t}\n\n\t/**\n\t * Sets the index of the first enabled toolbar item.\n\t */\n\tprivate setFirstEnabledItemIndex() {\n\t\tthis.currentIndex = this.state._items?.findIndex((item) => !item._disabled);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst isArrowKey = event.code === 'ArrowRight' || event.code === 'ArrowLeft' || event.code === 'ArrowUp' || event.code === 'ArrowDown';\n\t\tif (!isArrowKey) return;\n\t\tevent.preventDefault();\n\n\t\tconst lastItemIndex = (this._items?.length ?? 0) - 1;\n\t\tif (lastItemIndex < 0) return;\n\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = currentIndex;\n\n\t\tswitch (event.code) {\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tnextIndex = currentIndex > 0 ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowRight':\n\t\t\t\tnextIndex = currentIndex < lastItemIndex ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif (currentIndex === nextIndex) return;\n\n\t\tif (this.state._items?.[nextIndex]?._disabled) return;\n\n\t\tthis.currentIndex = nextIndex;\n\t\tvoid this.getCurrentToolbarItem(nextIndex)?.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.setFirstEnabledItemIndex();\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s,g as e}from"./index-77da4ee6.js";import{b as h,a}from"./align-floating-elements-a7a489c8.js";import{y as o,g as n}from"./index-7a63e9eb.js";import{f as l}from"./component-names-4cb1c62b.js";import{v as d}from"./badge-text-553534d4.js";import{a as f}from"./align-f3101425.js";import{v as c}from"./label-7d1ce375.js";const r=(t,e)=>{o(t,"_id",e)},u=new Set;function b(t){u.forEach(t=>{t.style.setProperty("z-index","999")}),u.add(t),t.style.setProperty("z-index","1000")}function m(t){if(u.delete(t),u.size>0){const t=Array.from(u).pop();t&&t.style.setProperty("z-index","1000")}}const p=class{constructor(e){t(this,e),this.hasFocusIn=!1,this.hasMouseIn=!1,this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){b(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),n().addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=h(t,e,()=>{this.alignTooltip()})}},this.hideTooltip=()=>{this.tooltipElement&&(m(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),n().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 a({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 i(s,{key:"499817b8ce171b101e0aa4a5846bf50cceb853f9",class:"kol-tooltip-wc"},""!==this.state._label&&i("div",{key:"28f89bc33dfd88fbdaa2ea11ff8be12d1c45df42",class:"tooltip-floating",ref:this.catchTooltipElement},i("div",{key:"4b84ee6af63868e84015c1ad2e45b96f04845b41",class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),i(l,{key:"159cbc321c5cc5287aaa83aa75310afe0ad9121e",class:"tooltip-area tooltip-content",id:this.state._id,_badgeText:this._badgeText,_label:this.state._label})))}validateBadgeText(t){d(this,t)}validateAlign(t){f(this,t)}validateId(t){r(this,t)}validateLabel(t){c(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 e(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};export{p as kol_tooltip_wc};
+import{r as t,h as i,H as s,g as e}from"./index-56c9fca5.js";import{b as h,a}from"./align-floating-elements-a7a489c8.js";import{y as o,g as n}from"./index-7a63e9eb.js";import{f as l}from"./component-names-4cb1c62b.js";import{t as d,a as c}from"./tooltip-open-tracking-23a84b19.js";import{v as f}from"./badge-text-553534d4.js";import{a as r}from"./align-f3101425.js";import{v as u}from"./label-7d1ce375.js";const m=(t,e)=>{o(t,"_id",e)},p=new Set;function b(t){p.forEach(t=>{t.style.setProperty("z-index","999")}),p.add(t),t.style.setProperty("z-index","1000")}function v(t){if(p.delete(t),p.size>0){const t=Array.from(p).pop();t&&t.style.setProperty("z-index","1000")}}const g=class{constructor(e){t(this,e),this.hasFocusIn=!1,this.hasMouseIn=!1,this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){b(this.tooltipElement),d(),this.tooltipElement.style.setProperty("display","block"),n().addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=h(t,e,()=>{this.alignTooltip()})}},this.hideTooltip=()=>{this.tooltipElement&&(v(this.tooltipElement),c(),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),n().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 a({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 i(s,{key:"c04cbc13912a59c5b863a27e4559392716829e00",class:"kol-tooltip-wc"},""!==this.state._label&&i("div",{key:"96ff93de26836c9e545c4590cd0770ad1f648be4",class:"tooltip-floating",ref:this.catchTooltipElement},i("div",{key:"ef6603e9458cad66fbc77d15b9b7c0e1102eae50",class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),i(l,{key:"bef3edfd2c735a3997aef309fc19c4b789c7a254",class:"tooltip-area tooltip-content",id:this.state._id,_badgeText:this._badgeText,_label:this.state._label})))}validateBadgeText(t){f(this,t)}validateAlign(t){r(this,t)}validateId(t){m(this,t)}validateLabel(t){u(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 e(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};export{g as kol_tooltip_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["validateId","component","value","watchString","VISIBLE_OVERLAYS","Set","showOverlay","overlay","forEach","visibleOverlay","style","setProperty","add","hideOverlay","delete","size","last","Array","from","pop","KolTooltipWc","this","hasFocusIn","hasMouseIn","showTooltip","previousSibling","tooltipElement","getDocument","addEventListener","hideTooltipByEscape","target","tooltipEl","cleanupAutoPositioning","autoUpdate","alignTooltip","hideTooltip","undefined","removeEventListener","event","key","addListeners","el","handleMouseEnter","bind","handleMouseleave","handleFocusIn","handleFocusout","removeListeners","resyncListeners","next","replacePreviousSibling","catchTooltipElement","catchArrowElement","element","arrowElement","showOrHideTooltip","clearTimeout","overFocusTimeout","setTimeout","_align","_label","alignFloatingElements","align","referenceElement","floatingElement","render","h","Host","class","state","ref","KolSpanWcTag","id","_id","_badgeText","validateBadgeText","validateAlign","validateLabel","required","componentWillLoad","handleEventListeners","_a","host","previousElementSibling","connectedCallback","componentDidRender","disconnectedCallback"],"sources":["src/schema/props/id.ts","src/utils/overlay.ts","src/components/tooltip/component.tsx"],"sourcesContent":["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 { KolSpanWcTag } from '../../core/component-names';\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-wc\">\n\t\t\t\t{this.state._label !== '' && (\n\t\t\t\t\t<div class=\"tooltip-floating\" ref={this.catchTooltipElement}>\n\t\t\t\t\t\t<div class=\"tooltip-area tooltip-arrow\" ref={this.catchArrowElement} />\n\t\t\t\t\t\t<KolSpanWcTag class=\"tooltip-area tooltip-content\" id={this.state._id} _badgeText={this._badgeText} _label={this.state._label}></KolSpanWcTag>\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["validateId","component","value","watchString","VISIBLE_OVERLAYS","Set","showOverlay","overlay","forEach","visibleOverlay","style","setProperty","add","hideOverlay","delete","size","last","Array","from","pop","KolTooltipWc","this","hasFocusIn","hasMouseIn","showTooltip","previousSibling","tooltipElement","tooltipOpened","getDocument","addEventListener","hideTooltipByEscape","target","tooltipEl","cleanupAutoPositioning","autoUpdate","alignTooltip","hideTooltip","tooltipClosed","undefined","removeEventListener","event","key","addListeners","el","handleMouseEnter","bind","handleMouseleave","handleFocusIn","handleFocusout","removeListeners","resyncListeners","next","replacePreviousSibling","catchTooltipElement","catchArrowElement","element","arrowElement","showOrHideTooltip","clearTimeout","overFocusTimeout","setTimeout","_align","_label","alignFloatingElements","align","referenceElement","floatingElement","render","h","Host","class","state","ref","KolSpanWcTag","id","_id","_badgeText","validateBadgeText","validateAlign","validateLabel","required","componentWillLoad","handleEventListeners","_a","host","previousElementSibling","connectedCallback","componentDidRender","disconnectedCallback"],"sources":["src/schema/props/id.ts","src/utils/overlay.ts","src/components/tooltip/component.tsx"],"sourcesContent":["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 { KolSpanWcTag } from '../../core/component-names';\nimport { tooltipClosed, tooltipOpened } from '../../utils/tooltip-open-tracking';\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\ttooltipOpened();\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\ttooltipClosed();\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-wc\">\n\t\t\t\t{this.state._label !== '' && (\n\t\t\t\t\t<div class=\"tooltip-floating\" ref={this.catchTooltipElement}>\n\t\t\t\t\t\t<div class=\"tooltip-area tooltip-arrow\" ref={this.catchArrowElement} />\n\t\t\t\t\t\t<KolSpanWcTag class=\"tooltip-area tooltip-content\" id={this.state._id} _badgeText={this._badgeText} _label={this.state._label}></KolSpanWcTag>\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"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as t,H as i,g as s}from"./index-77da4ee6.js";import{j as a}from"./index-7a63e9eb.js";import{j as l,g as n,x as d}from"./component-names-4cb1c62b.js";import{n as c}from"./dev.utils-52f8c2e9.js";import{v as h}from"./label-7d1ce375.js";import{v as o}from"./open-74ada92d.js";import{v as r}from"./href-3ee53c2c.js";const f=(e,t,s)=>{a(e,"_active",t,s)},b=class{constructor(t){e(this,t),this.groupId=`tree-group-${c()}`,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:a,_hasChildren:s,_open:o,_label:d}=this.state;return t(i,{key:"10844c4679cde6b05366172544dbf02bc948d70c",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-item-wc"},t("li",{key:"a7da471fabd4f32662471cea460eac72c5d9e72b",class:"tree-item",style:{"--level":`${this.level}`}},t(l,{key:"9fe32ddea2ab88e29f7f30494291e8d48e03b51c",class:{"tree-link":!0,"first-level":0===this.level,active:Boolean(a)},_href:e,_label:"",_role:"treeitem",_tabIndex:a?0:-1,_ariaExpanded:s?o:void 0,_ariaOwns:s?this.groupId:void 0,ref:e=>this.linkElement=e},t("span",{key:"dbe0d75274599878cf69b313b664353fc39aea60",class:"tree-link-inner",slot:"expert"},s?t("span",{class:"toggle-button",onClick:e=>o?void this.handleCollapseClick(e):void this.handleExpandClick(e)},t(n,{class:"toggle-button-icon",_icons:"codicon codicon-"+(o?"chevron-down":"chevron-right"),_label:""})):t("span",{class:"toggle-button-placeholder"}),t("span",{key:"3d3ce0044fff50ed43a144b7c1b19458da654ef0",class:"text"},d))),t("ul",{key:"ff36340e2630cb36a8f1ddd7e1e9deedba400a64",hidden:!s||!o,role:"group",id:this.groupId},t("slot",{key:"a281d64f9c45e5dd6f4dc091d8ec454f872d39a7"}))))}validateActive(e){f(this,e||!1)}validateLabel(e){h(this,e)}validateOpen(e){o(this,e)}validateHref(e){r(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()!==d&&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 s(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}};export{b as kol_tree_item_wc};
+import{r as e,h as t,H as i,g as s}from"./index-56c9fca5.js";import{j as a}from"./index-7a63e9eb.js";import{j as l,g as n,x as c}from"./component-names-4cb1c62b.js";import{n as h}from"./dev.utils-202fb0ba.js";import{v as o}from"./label-7d1ce375.js";import{v as d}from"./open-74ada92d.js";import{v as r}from"./href-3ee53c2c.js";const f=(e,t,s)=>{a(e,"_active",t,s)},b=class{constructor(t){e(this,t),this.groupId=`tree-group-${h()}`,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:a,_hasChildren:s,_open:o,_label:h}=this.state;return t(i,{key:"7138fb8c723f2bf3e3a06fbb6aea211534068f36",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-item-wc"},t("li",{key:"f790d81d295f070457e39b6591de5c58cbe95b09",class:"tree-item",style:{"--level":`${this.level}`}},t(l,{key:"77d589d030b3eae35b1e7810fdc225f169e6bb4c",class:{"tree-link":!0,"first-level":0===this.level,active:Boolean(a)},_href:e,_label:"",_role:"treeitem",_tabIndex:a?0:-1,_ariaExpanded:s?o:void 0,_ariaOwns:s?this.groupId:void 0,ref:e=>this.linkElement=e},t("span",{key:"cdc688eb4d867dd1c7f4629139e38c471e02c23f",class:"tree-link-inner",slot:"expert"},s?t("span",{class:"toggle-button",onClick:e=>o?void this.handleCollapseClick(e):void this.handleExpandClick(e)},t(n,{class:"toggle-button-icon",_icons:"codicon codicon-"+(o?"chevron-down":"chevron-right"),_label:""})):t("span",{class:"toggle-button-placeholder"}),t("span",{key:"f2147ae17873f9a96221aef13dda7953ac7f592c",class:"text"},h))),t("ul",{key:"1020c40614da618527a53c460f9d974ed575da6f",hidden:!s||!o,role:"group",id:this.groupId},t("slot",{key:"d73bfce093bfbb5ff28758e82888a6d449b28c88"}))))}validateActive(e){f(this,e||!1)}validateLabel(e){o(this,e)}validateOpen(e){d(this,e)}validateHref(e){r(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()!==c&&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 s(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}};export{b as kol_tree_item_wc};

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

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

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as i,H as t,g as a}from"./index-77da4ee6.js";import"./index-7a63e9eb.js";import{y as s,x as o}from"./component-names-4cb1c62b.js";import{v as n}from"./label-7d1ce375.js";const l=class{constructor(t){e(this,t),this.state={_label:""},this._label=void 0}validateLabel(e){n(this,e)}render(){return i(t,{key:"62eb62cd49fd84704aeb55de7709742ff0455bb5",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-wc"},i("nav",{key:"9c71ccabed0d9b3c6df5bdcb294faccb4886a209",class:"tree","aria-label":this.state._label},i("ul",{key:"29d69c2d37e7b5267832918ce6bdec4c0ba9fbc5",class:"treeview-navigation",role:"tree","aria-label":this.state._label},i("slot",{key:"808f40d3c1c0690faf7ed22e1235c085d6191045"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===s.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 e,t,a;return null===(a=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===a?void 0:a.filter(l.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(s);return[...e,t,...a]},[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const e=async t=>!l.isTreeItem(t.parentElement)||await t.parentElement.isOpen()&&await e(t.parentElement);return(await Promise.all(this.treeItemElements.map(async t=>({value:t,include:await e(t)})))).filter(e=>e.include).map(e=>e.value)}async handleKeyDown(e){var t,a,i,l,n,r,o,c,d;const v=await this.getOpenTreeItemElements(),u=null===(t=document.activeElement)||void 0===t?void 0:t.closest(s),h=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!v||!u)return;const m=null==v?void 0:v.findIndex(e=>e===u);switch(e.key){case"ArrowDown":await(null===(a=v[m+1])||void 0===a?void 0:a.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(i=v[m-1])||void 0===i?void 0:i.focusLink()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await u.isOpen()?await(null===(l=v[m+1])||void 0===l?void 0:l.focusLink()):await u.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await u.isOpen())await u.collapse();else{const e=v.findIndex(e=>e===u.parentElement);-1!==e&&await(null===(n=v[e])||void 0===n?void 0:n.focusLink())}break;case"Home":await(null===(r=v[0])||void 0===r?void 0:r.focusLink()),e.preventDefault();break;case"End":await(null===(o=v[v.length-1])||void 0===o?void 0:o.focusLink()),e.preventDefault();break;case null===(c=e.key.match(/^[a-zA-Z0-9]$/))||void 0===c?void 0:c.input:if(!h){const t=e.key.toLowerCase(),a=v.indexOf(u)+1,i=v.concat(v),l=i.slice(a,a+v.length).findIndex(e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)});-1!==l&&(await i[a+l].focusLink(),e.preventDefault())}break;case"*":{const e=null===(d=u.parentElement)||void 0===d?void 0:d.querySelectorAll(s);null==e||e.forEach(e=>{e.expand()});break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(o)&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const e=t=>{l.isTreeItem(t.parentElement)&&(t.parentElement.expand(),e(t.parentElement))},t=(()=>{var e,t,a,i;const n=null!==(i=null===(a=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===a?void 0:a.filter(l.isTreeItem))&&void 0!==i?i:[];for(const e of n){if(e._active)return e;const t=e.querySelector(`${s}[_active="true"]`);if(t&&t._active)return t}})();t&&e(t)}get host(){return a(this)}static get watchers(){return{_label:["validateLabel"]}}};export{l as kol_tree_wc};
+import{r as e,h as i,H as t,g as a}from"./index-56c9fca5.js";import"./index-7a63e9eb.js";import{y as s,x as o}from"./component-names-4cb1c62b.js";import{v as n}from"./label-7d1ce375.js";const l=class{constructor(t){e(this,t),this.state={_label:""},this._label=void 0}validateLabel(e){n(this,e)}render(){return i(t,{key:"4cf8271ad3e912570e8524903698ac34ee8083a6",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-wc"},i("nav",{key:"cf4d2f5e3d2847696c0f36b23645ca110504beec",class:"tree","aria-label":this.state._label},i("ul",{key:"e61d793c177dc6f974e4a385d247bd4b1ccf9a9d",class:"treeview-navigation",role:"tree","aria-label":this.state._label},i("slot",{key:"009e01247599b2d5ac3419e44cf20b428fd17bf4"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===s.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 e,t,a;return null===(a=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===a?void 0:a.filter(l.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(s);return[...e,t,...a]},[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const e=async t=>!l.isTreeItem(t.parentElement)||await t.parentElement.isOpen()&&await e(t.parentElement);return(await Promise.all(this.treeItemElements.map(async t=>({value:t,include:await e(t)})))).filter(e=>e.include).map(e=>e.value)}async handleKeyDown(e){var t,a,i,l,n,r,o,c,d;const v=await this.getOpenTreeItemElements(),u=null===(t=document.activeElement)||void 0===t?void 0:t.closest(s),h=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!v||!u)return;const m=null==v?void 0:v.findIndex(e=>e===u);switch(e.key){case"ArrowDown":await(null===(a=v[m+1])||void 0===a?void 0:a.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(i=v[m-1])||void 0===i?void 0:i.focusLink()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await u.isOpen()?await(null===(l=v[m+1])||void 0===l?void 0:l.focusLink()):await u.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await u.isOpen())await u.collapse();else{const e=v.findIndex(e=>e===u.parentElement);-1!==e&&await(null===(n=v[e])||void 0===n?void 0:n.focusLink())}break;case"Home":await(null===(r=v[0])||void 0===r?void 0:r.focusLink()),e.preventDefault();break;case"End":await(null===(o=v[v.length-1])||void 0===o?void 0:o.focusLink()),e.preventDefault();break;case null===(c=e.key.match(/^[a-zA-Z0-9]$/))||void 0===c?void 0:c.input:if(!h){const t=e.key.toLowerCase(),a=v.indexOf(u)+1,i=v.concat(v),l=i.slice(a,a+v.length).findIndex(e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)});-1!==l&&(await i[a+l].focusLink(),e.preventDefault())}break;case"*":{const e=null===(d=u.parentElement)||void 0===d?void 0:d.querySelectorAll(s);null==e||e.forEach(e=>{e.expand()});break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(o)&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const e=t=>{l.isTreeItem(t.parentElement)&&(t.parentElement.expand(),e(t.parentElement))},t=(()=>{var e,t,a,i;const n=null!==(i=null===(a=null===(t=null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes)||void 0===t?void 0:t.call(e))||void 0===a?void 0:a.filter(l.isTreeItem))&&void 0!==i?i:[];for(const e of n){if(e._active)return e;const t=e.querySelector(`${s}[_active="true"]`);if(t&&t._active)return t}})();t&&e(t)}get host(){return a(this)}static get watchers(){return{_label:["validateLabel"]}}};export{l as kol_tree_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-77da4ee6.js";import{u as i}from"./component-names-4cb1c62b.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .tree ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",a=o,s=class{constructor(e){n(this,e),this._label=void 0}render(){return e(t,{key:"6b25ad63b950d98d5bf377514cf12cd101ad9592",class:"kol-tree"},e(i,{key:"b70d349db5337b6807f8b33d54e63cdce5d28bdf",_label:this._label},e("slot",{key:"667e1549bd9198462e3cea90312109c6efae742f"})))}};s.style={default:a};export{s as kol_tree};
+import{r as n,h as e,H as t}from"./index-56c9fca5.js";import{u as i}from"./component-names-4cb1c62b.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .tree ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",a=o,s=class{constructor(e){n(this,e),this._label=void 0}render(){return e(t,{key:"533e6e854979804420db3f83cc77dd3fe2cadd7e",class:"kol-tree"},e(i,{key:"2e9a576587ec283766128895b4a5fd862e2cab4d",_label:this._label},e("slot",{key:"e94f981358823827a97f1e500aea341c3a3d2733"})))}};s.style={default:a};export{s as kol_tree};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-77da4ee6.js";import"./index-7a63e9eb.js";import{t as i}from"./i18n-3dd5729d.js";import{w as o}from"./component-names-4cb1c62b.js";import{v as a}from"./label-7d1ce375.js";import"./i18n-b14e6088.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}",l=s,r=class{constructor(e){n(this,e),this._label=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return e(t,{key:"afacb2733ad9c0966124bff62ebfe92a6fe65bba",class:"kol-version"},e(o,{key:"ad2e3590dcd428e0928aacedce9226237b616318",_color:"#bec5c9",_icons:{left:{icon:"codicon codicon-versions",label:i("kol-version")}},_label:this.state._label}))}validateLabel(n){a(this,n,{required:!0})}componentWillLoad(){this.validateLabel(this._label)}static get watchers(){return{_label:["validateLabel"]}}};r.style={default:l};export{r as kol_version};
+import{r as n,h as e,H as t}from"./index-56c9fca5.js";import"./index-7a63e9eb.js";import{t as i}from"./i18n-3dd5729d.js";import{w as o}from"./component-names-4cb1c62b.js";import{v as a}from"./label-7d1ce375.js";import"./i18n-b14e6088.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}",l=s,r=class{constructor(e){n(this,e),this._label=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return e(t,{key:"3148ea6ea867fa5f5779548dc02deab964ba5f12",class:"kol-version"},e(o,{key:"3ddd8c9162ada00894d3591c18f95c2df33b320f",_color:"#bec5c9",_icons:{left:{icon:"codicon codicon-versions",label:i("kol-version")}},_label:this.state._label}))}validateLabel(n){a(this,n,{required:!0})}componentWillLoad(){this.validateLabel(this._label)}static get watchers(){return{_label:["validateLabel"]}}};r.style={default:l};export{r as kol_version};