@public-ui/components 2.0.14 → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"names":["InternalToast","key","onClose","onRef","toastState","h","class","status","KolAlertTag","_alert","_label","toast","label","_level","_hasCloser","_type","type","_variant","alertVariant","_on","ref","description","defaultStyleCss","KolToastContainerDefaultStyle0","TRANSITION_TIMEOUT","KolToastContainer","this","knownRenderFunctions","Set","_toastStates","enqueue","newToastState","id","nonce","state","Object","assign","setTimeout","map","localToastState","handleClose","filter","closeAll","handleToastRef","element","render","has","add","close","Host","length","KolButtonTag","translate","onClick"],"sources":["src/components/toaster/InternalToast.tsx","src/components/toaster/style.scss?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/component.tsx"],"sourcesContent":["import type { ToastState } from '@public-ui/schema';\nimport { h } from '@stencil/core';\nimport { KolAlertTag } from '../../core/component-names';\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<KolAlertTag\n\t\t\t\tclass=\"alert\"\n\t\t\t\t_alert={true}\n\t\t\t\t_label={toastState.toast.label}\n\t\t\t\t_level={0}\n\t\t\t\t_hasCloser={true}\n\t\t\t\t_type={toastState.toast.type}\n\t\t\t\t_variant={toastState.toast.alertVariant || 'card'}\n\t\t\t\t_on={{ 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</KolAlertTag>\n\t\t</div>\n\t);\n};\n","@layer kol-component {\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: fixed;\n\t\tz-index: 200;\n\t}\n\n\t.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 '@public-ui/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@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\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...localToastState,\n\t\t\t\t\t\t\t\tstatus: 'settled',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: localToastState,\n\t\t\t\t),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\n\t\treturn () => {\n\t\t\tthis.handleClose(newToastState);\n\t\t};\n\t}\n\n\tprivate handleClose(toastState: ToastState) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => {\n\t\t\t\tif (localToastState.id === toastState.id) {\n\t\t\t\t\tlocalToastState.status = 'removing';\n\t\t\t\t}\n\t\t\t\treturn localToastState;\n\t\t\t}),\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeAll() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => ({\n\t\t\t\t...localToastState,\n\t\t\t\tstatus: 'removing',\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: [],\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\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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"}
+{"version":3,"names":["InternalToast","key","onClose","onRef","toastState","h","class","status","KolAlertTag","_alert","_label","toast","label","_level","_hasCloser","_type","type","_variant","alertVariant","_on","ref","description","defaultStyleCss","KolToastContainerDefaultStyle0","TRANSITION_TIMEOUT","KolToastContainer","this","knownRenderFunctions","Set","_toastStates","enqueue","newToastState","id","nonce","state","Object","assign","setTimeout","map","localToastState","handleClose","filter","closeAll","handleToastRef","element","render","has","add","close","Host","length","KolButtonTag","translate","onClick"],"sources":["src/components/toaster/InternalToast.tsx","src/components/toaster/style.scss?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/component.tsx"],"sourcesContent":["import type { ToastState } from '../../schema';\nimport { h } from '@stencil/core';\nimport { KolAlertTag } from '../../core/component-names';\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<KolAlertTag\n\t\t\t\tclass=\"alert\"\n\t\t\t\t_alert={true}\n\t\t\t\t_label={toastState.toast.label}\n\t\t\t\t_level={0}\n\t\t\t\t_hasCloser={true}\n\t\t\t\t_type={toastState.toast.type}\n\t\t\t\t_variant={toastState.toast.alertVariant || 'card'}\n\t\t\t\t_on={{ 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</KolAlertTag>\n\t\t</div>\n\t);\n};\n","@import '../@shared/mixins';\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tfont-size: rem(16);\n\t\tposition: fixed;\n\t\tz-index: 200;\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@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\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...localToastState,\n\t\t\t\t\t\t\t\tstatus: 'settled',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: localToastState,\n\t\t\t\t),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\n\t\treturn () => {\n\t\t\tthis.handleClose(newToastState);\n\t\t};\n\t}\n\n\tprivate handleClose(toastState: ToastState) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => {\n\t\t\t\tif (localToastState.id === toastState.id) {\n\t\t\t\t\tlocalToastState.status = 'removing';\n\t\t\t\t}\n\t\t\t\treturn localToastState;\n\t\t\t}),\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeAll() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => ({\n\t\t\t\t...localToastState,\n\t\t\t\tstatus: 'removing',\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: [],\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\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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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as i,g as e}from"./index-59e9528b.js";import{b as s,a as o}from"./align-floating-elements-a21bf44f.js";import{g as a,ay as l,ar as h,aO as d,v as r}from"./index-fbc0a5be.js";import{f as c}from"./component-names-61247f2f.js";const f=new Set;function p(e){f.forEach((e=>{e.style.setProperty("z-index","999")})),f.add(e),e.style.setProperty("z-index","1000")}function u(e){if(f.delete(e),f.size>0){const e=Array.from(f).pop();e&&e.style.setProperty("z-index","1000")}}const b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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  .hidden {\n    display: none;\n    visibility: hidden;\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: 10px;\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    z-index: 999;\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}",m=b,w=class{constructor(e){n(this,e),this.hasFocusIn=!1,this.hasMouseIn=!1,this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){p(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),a().addEventListener("keyup",this.hideTooltipByEscape);const e=this.previousSibling,t=this.tooltipElement;this.cleanupAutoPositioning=s(e,t,(()=>{this.alignTooltip()}))}},this.hideTooltip=()=>{this.tooltipElement&&(u(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),a().removeEventListener("keyup",this.hideTooltipByEscape)},this.hideTooltipByEscape=e=>{"Escape"===e.key&&this.hideTooltip()},this.addListeners=e=>{e.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),e.addEventListener("mouseleave",this.handleMouseleave.bind(this)),e.addEventListener("focusin",this.handleFocusIn.bind(this)),e.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=e=>{e.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),e.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),e.removeEventListener("focusin",this.handleFocusIn.bind(this)),e.removeEventListener("focusout",this.handleFocusout.bind(this))},this.resyncListeners=(e,t,n=!1)=>{e&&this.removeListeners(e),t&&(n&&(this.previousSibling=t),this.addListeners(t))},this.catchTooltipElement=e=>{this.tooltipElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()}),250)},this._accessKey=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 o({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 t(i,{key:"d5128ed9dbed92817b78bff336256904df1d3342",class:"kol-tooltip-wc"},""!==this.state._label&&t("div",{key:"fa7775f6c11b7e58c18803e89662cb88c5f829fd",class:"tooltip-floating",ref:this.catchTooltipElement},t("div",{key:"8ddc4c2b9d8adffc0a76dadf3f90fcd69ae2d41d",class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),t(c,{key:"e9bf72ab53241eb5b75b772379a2781811d68519",class:"tooltip-area tooltip-content",id:this.state._id,_accessKey:this._accessKey,_label:this.state._label})))}validateAccessKey(e){l(this,e)}validateAlign(e){h(this,e)}validateId(e){d(this,e)}validateLabel(e){r(this,e,{required:!0})}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var e;this.resyncListeners(this.previousSibling,null===(e=this.host)||void 0===e?void 0:e.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var e;this.previousSibling=null===(e=this.host)||void 0===e?void 0:e.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{_accessKey:["validateAccessKey"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};w.style=m;export{w as kol_tooltip_wc};
+import{r as n,h as t,H as i,g as e}from"./index-3fbcceca.js";import{b as s,a as o}from"./align-floating-elements-0cd5dc51.js";import{f as a}from"./component-names-ed22f86e.js";import{i as l}from"./prop.validators-29d576d2.js";import{g as h}from"./dev.utils-1ca991a2.js";import{v as r}from"./access-key-04ca8172.js";import{a as d}from"./align-fc528dec.js";import{v as c}from"./label-e56ffdc6.js";import"./reuse-b66836de.js";import"./index-4a3076fc.js";const f=(e,t)=>{l(e,"_id",t)},p=new Set;function u(e){p.forEach((e=>{e.style.setProperty("z-index","999")})),p.add(e),e.style.setProperty("z-index","1000")}function m(e){if(p.delete(e),p.size>0){const e=Array.from(p).pop();e&&e.style.setProperty("z-index","1000")}}const b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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  .hidden {\n    display: none;\n    visibility: hidden;\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: 10px;\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    z-index: 999;\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}",w=b,y=class{constructor(e){n(this,e),this.hasFocusIn=!1,this.hasMouseIn=!1,this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){u(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),h().addEventListener("keyup",this.hideTooltipByEscape);const e=this.previousSibling,t=this.tooltipElement;this.cleanupAutoPositioning=s(e,t,(()=>{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)),h().removeEventListener("keyup",this.hideTooltipByEscape)},this.hideTooltipByEscape=e=>{"Escape"===e.key&&this.hideTooltip()},this.addListeners=e=>{e.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),e.addEventListener("mouseleave",this.handleMouseleave.bind(this)),e.addEventListener("focusin",this.handleFocusIn.bind(this)),e.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=e=>{e.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),e.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),e.removeEventListener("focusin",this.handleFocusIn.bind(this)),e.removeEventListener("focusout",this.handleFocusout.bind(this))},this.resyncListeners=(e,t,n=!1)=>{e&&this.removeListeners(e),t&&(n&&(this.previousSibling=t),this.addListeners(t))},this.catchTooltipElement=e=>{this.tooltipElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()}),250)},this._accessKey=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 o({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 t(i,{key:"2838ea3d5f84699772717fd00308bb63e190c5b5",class:"kol-tooltip-wc"},""!==this.state._label&&t("div",{key:"d0140b5288f11f179ebe4956018a9592f890dcb1",class:"tooltip-floating",ref:this.catchTooltipElement},t("div",{key:"7702db6cbcb4bc11d2ad5707f6ed74361825d0ab",class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),t(a,{key:"c056746633c094caf92e3f48dfd728fb33d8c922",class:"tooltip-area tooltip-content",id:this.state._id,_accessKey:this._accessKey,_label:this.state._label})))}validateAccessKey(e){r(this,e)}validateAlign(e){d(this,e)}validateId(e){f(this,e)}validateLabel(e){c(this,e,{required:!0})}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var e;this.resyncListeners(this.previousSibling,null===(e=this.host)||void 0===e?void 0:e.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var e;this.previousSibling=null===(e=this.host)||void 0===e?void 0:e.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{_accessKey:["validateAccessKey"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};y.style=w;export{y as kol_tooltip_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["VISIBLE_OVERLAYS","Set","showOverlay","overlay","forEach","visibleOverlay","style","setProperty","add","hideOverlay","delete","size","last","Array","from","pop","styleCss","KolTooltipWcStyle0","KolTooltip","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","_accessKey","validateAccessKey","value","validateAlign","validateId","validateLabel","required","componentWillLoad","handleEventListeners","_a","host","previousElementSibling","connectedCallback","componentDidRender","disconnectedCallback"],"sources":["src/utils/overlay.ts","src/components/tooltip/style.scss?tag=kol-tooltip-wc","src/components/tooltip/component.tsx"],"sourcesContent":["/**\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 '../style';\n\n@layer kol-component {\n\t.kol-tooltip-wc {\n\t\tdisplay: contents;\n\t}\n\n\t.kol-tooltip-wc .tooltip-floating {\n\t\tanimation-duration: 0.5s;\n\t\tanimation-iteration-count: 1;\n\t\tanimation-name: fadeInOpacity;\n\t\tanimation-timing-function: ease-in;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: fixed;\n\t\tvisibility: hidden;\n\t\t/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tmax-width: 90vw;\n\t\tmax-height: 90vh;\n\t\t/* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n\t\twidth: var(--kol-tooltip-width);\n\t}\n\n\t/* Shared between content and arrow */\n\t.kol-tooltip-wc .tooltip-area {\n\t\tbackground-color: #fff;\n\t\tcolor: #000;\n\t}\n\n\t.kol-tooltip-wc .tooltip-arrow {\n\t\theight: 10px;\n\t\tposition: absolute;\n\t\ttransform: rotate(45deg);\n\t\twidth: 10px;\n\t\tz-index: 999;\n\t}\n\n\t.kol-tooltip-wc .tooltip-content {\n\t\tposition: relative;\n\t\tz-index: 1000;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n","import { autoUpdate } from '@floating-ui/dom';\nimport type { AccessKeyPropType, AlignPropType, IdPropType, LabelPropType, TooltipAPI, TooltipStates } from '@public-ui/schema';\nimport { getDocument, validateAccessKey, validateAlign, validateId, validateLabel } from '@public-ui/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@Component({\n\ttag: 'kol-tooltip-wc',\n\tstyleUrl: './style.scss',\n\tshadow: false,\n})\nexport class KolTooltip 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} _accessKey={this._accessKey} _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 access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\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('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tvalidateAccessKey(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}, 250);\n\t};\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\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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"}
+{"version":3,"names":["validateId","component","value","watchString","VISIBLE_OVERLAYS","Set","showOverlay","overlay","forEach","visibleOverlay","style","setProperty","add","hideOverlay","delete","size","last","Array","from","pop","styleCss","KolTooltipWcStyle0","KolTooltip","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","_accessKey","validateAccessKey","validateAlign","validateLabel","required","componentWillLoad","handleEventListeners","_a","host","previousElementSibling","connectedCallback","componentDidRender","disconnectedCallback"],"sources":["src/schema/props/id.ts","src/utils/overlay.ts","src/components/tooltip/style.scss?tag=kol-tooltip-wc","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 '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-tooltip-wc {\n\t\tdisplay: contents;\n\t}\n\n\t.kol-tooltip-wc .tooltip-floating {\n\t\tanimation-duration: 0.5s;\n\t\tanimation-iteration-count: 1;\n\t\tanimation-name: fadeInOpacity;\n\t\tanimation-timing-function: ease-in;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: fixed;\n\t\tvisibility: hidden;\n\t\t/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tmax-width: 90vw;\n\t\tmax-height: 90vh;\n\t\t/* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n\t\twidth: var(--kol-tooltip-width);\n\t}\n\n\t/* Shared between content and arrow */\n\t.kol-tooltip-wc .tooltip-area {\n\t\tbackground-color: #fff;\n\t\tcolor: #000;\n\t}\n\n\t.kol-tooltip-wc .tooltip-arrow {\n\t\theight: 10px;\n\t\tposition: absolute;\n\t\ttransform: rotate(45deg);\n\t\twidth: 10px;\n\t\tz-index: 999;\n\t}\n\n\t.kol-tooltip-wc .tooltip-content {\n\t\tposition: relative;\n\t\tz-index: 1000;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n","import { autoUpdate } from '@floating-ui/dom';\nimport type { AccessKeyPropType, AlignPropType, IdPropType, LabelPropType, TooltipAPI, TooltipStates } from '../../schema';\nimport { getDocument, validateAccessKey, 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@Component({\n\ttag: 'kol-tooltip-wc',\n\tstyleUrl: './style.scss',\n\tshadow: false,\n})\nexport class KolTooltip 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} _accessKey={this._accessKey} _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 access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\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('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tvalidateAccessKey(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}, 250);\n\t};\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\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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"}

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 s,g as i}from"./index-59e9528b.js";import{aP as a,v as h,l,aL as c}from"./index-fbc0a5be.js";import{h as n}from"./component-names-61247f2f.js";const d=class{constructor(t){e(this,t),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(){return t(s,{key:"3bb247bb576dcbc6543a184a89e44712376b069a",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-item-wc"},t("li",{key:"51300a67b11fec3489ae764a47f6ddf324bda98c",class:"tree-item"},t(n,{key:"725222cc833dc7f1807187b541c8296a3c55e234",class:{"tree-link":!0,active:Boolean(this.state._active)},_label:"",_href:this.state._href,ref:e=>this.linkElement=e,_tabIndex:this.state._active?0:-1},t("span",{key:"acedfcdfbd4d76bf1e5901f83268b6ac388448ae",slot:"expert"},this.state._hasChildren&&(this.state._open?t("span",{class:"toggle-button",onClick:e=>{this.handleCollapseClick(e)}},"-"):t("span",{class:"toggle-button",onClick:e=>{this.handleExpandClick(e)}},"+"))," ",this.state._label)),t("ul",{key:"2b36600fd83481f73f6256b5aeb44e087c44d514",hidden:!this.state._hasChildren||!this.state._open,role:"group"},t("slot",{key:"4a37f1c4481d4b5c3b5bec729f43cc67659af1d9"}))))}validateActive(e){a(this,e||!1)}validateLabel(e){h(this,e)}validateOpen(e){l(this,e)}validateHref(e){c(this,e)}componentWillLoad(){this.validateActive(this._active),this.validateLabel(this._label),this.validateOpen(this._open),this.validateHref(this._href),this.checkForChildren()}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedElements().length)})}async focusLink(){this.linkElement.focus()}async handleExpandClick(e){e.preventDefault(),this.linkElement.focus(),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 i(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}};export{d as kol_tree_item_wc};
+import{r as e,h as t,H as s,g as i}from"./index-3fbcceca.js";import{h as a}from"./component-names-ed22f86e.js";import{b as c}from"./prop.validators-29d576d2.js";import{v as h}from"./label-e56ffdc6.js";import{v as l}from"./open-deacfbd7.js";import{v as d}from"./href-7d17954a.js";import"./index-4a3076fc.js";import"./dev.utils-1ca991a2.js";const n=(e,t,a)=>{c(e,"_active",t,a)},o=class{constructor(t){e(this,t),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(){return t(s,{key:"1011a3769ceefaf5be42707c8fbf8d390ba0d5e0",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-item-wc"},t("li",{key:"47aac7e77d5cf17468692fe0049f47b92ec0794e",class:"tree-item"},t(a,{key:"8893830dd17d545cd41d97f616cbdf08ca36326a",class:{"tree-link":!0,active:Boolean(this.state._active)},_label:"",_href:this.state._href,ref:e=>this.linkElement=e,_tabIndex:this.state._active?0:-1},t("span",{key:"3d9dd2cc87cc41cad7cca4d3ccc981db0066e893",slot:"expert"},this.state._hasChildren&&(this.state._open?t("span",{class:"toggle-button",onClick:e=>{this.handleCollapseClick(e)}},"-"):t("span",{class:"toggle-button",onClick:e=>{this.handleExpandClick(e)}},"+"))," ",this.state._label)),t("ul",{key:"aa684b3054ecefd83f212fcdb4890eeff1ce7545",hidden:!this.state._hasChildren||!this.state._open,role:"group"},t("slot",{key:"96503129fae60d97d8cc7e421c303a6f94840e02"}))))}validateActive(e){n(this,e||!1)}validateLabel(e){h(this,e)}validateOpen(e){l(this,e)}validateHref(e){d(this,e)}componentWillLoad(){this.validateActive(this._active),this.validateLabel(this._label),this.validateOpen(this._open),this.validateHref(this._href),this.checkForChildren()}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedElements().length)})}async focusLink(){this.linkElement.focus()}async handleExpandClick(e){e.preventDefault(),this.linkElement.focus(),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 i(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}};export{o as kol_tree_item_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["KolTreeItemWc","_active","_hasChildren","_href","_label","_open","render","h","Host","key","onSlotchange","this","handleSlotchange","bind","class","KolLinkTag","active","Boolean","state","ref","element","linkElement","_tabIndex","slot","onClick","event","handleCollapseClick","handleExpandClick","hidden","role","validateActive","value","validateLabel","validateOpen","validateHref","componentWillLoad","checkForChildren","Object","assign","_a","host","querySelector","assignedElements","length","focusLink","focus","preventDefault","expand","collapse","isOpen"],"sources":["src/components/tree-item/component.tsx"],"sourcesContent":["import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } from '@stencil/core';\n\nimport type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '@public-ui/schema';\nimport { validateActive, validateHref, validateLabel, validateOpen } from '@public-ui/schema';\nimport { KolLinkTag } from '../../core/component-names';\n\n@Component({\n\ttag: `kol-tree-item-wc`,\n\tshadow: false,\n})\nexport class KolTreeItemWc implements TreeItemAPI {\n\tprivate linkElement!: HTMLKolLinkWcElement;\n\n\t@Element() host!: HTMLElement;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)} class=\"kol-tree-item-wc\">\n\t\t\t\t<li class=\"tree-item\">\n\t\t\t\t\t<KolLinkTag\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'tree-link': true,\n\t\t\t\t\t\t\tactive: Boolean(this.state._active),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t_href={this.state._href}\n\t\t\t\t\t\tref={(element?: HTMLKolLinkWcElement) => (this.linkElement = element!)}\n\t\t\t\t\t\t_tabIndex={this.state._active ? 0 : -1}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t\t{this.state._hasChildren &&\n\t\t\t\t\t\t\t\t(this.state._open ? (\n\t\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t\t<span class=\"toggle-button\" onClick={(event) => void this.handleCollapseClick(event)}>\n\t\t\t\t\t\t\t\t\t\t-\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t\t<span class=\"toggle-button\" onClick={(event) => void this.handleExpandClick(event)}>\n\t\t\t\t\t\t\t\t\t\t+\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t))}{' '}\n\t\t\t\t\t\t\t{this.state._label}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</KolLinkTag>\n\t\t\t\t\t<ul hidden={!this.state._hasChildren || !this.state._open} role=\"group\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: TreeItemStates = {\n\t\t_active: false,\n\t\t_hasChildren: false,\n\t\t_href: '',\n\t\t_label: '',\n\t\t_open: false,\n\t};\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the label of the link.\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * This property is used for a link from a reference to the target URL.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Watch('_active') validateActive(value?: ActivePropType): void {\n\t\tvalidateActive(this, value || false);\n\t}\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open') validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_href') validateHref(value?: HrefPropType): void {\n\t\tvalidateHref(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActive(this._active);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateHref(this._href);\n\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate checkForChildren() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_hasChildren: Boolean(this.host.querySelector('slot')?.assignedElements().length),\n\t\t};\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\t@Method() async focusLink() {\n\t\tthis.linkElement.focus();\n\t}\n\n\tprivate async handleExpandClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.linkElement.focus();\n\t\tawait this.expand();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async expand() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: true,\n\t\t\t};\n\t\t}\n\t}\n\n\tprivate async handleCollapseClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.linkElement.focus();\n\t\tawait this.collapse();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async collapse() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: false,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async isOpen() {\n\t\treturn this.state._open ?? false;\n\t}\n}\n"],"mappings":";;;+KAUaA,EAAa,M,oCA2Ce,CACvCC,QAAS,MACTC,aAAc,MACdC,MAAO,GACPC,OAAQ,GACRC,MAAO,O,uFA3CD,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,aAAcC,KAAKC,iBAAiBC,KAAKF,MAAOG,MAAM,oBAC3DP,EAAA,MAAAE,IAAA,2CAAIK,MAAM,aACTP,EAACQ,EAAU,CAAAN,IAAA,2CACVK,MAAO,CACN,YAAa,KACbE,OAAQC,QAAQN,KAAKO,MAAMjB,UAE5BG,OAAO,GACPD,MAAOQ,KAAKO,MAAMf,MAClBgB,IAAMC,GAAoCT,KAAKU,YAAcD,EAC7DE,UAAWX,KAAKO,MAAMjB,QAAU,GAAK,GAErCM,EAAA,QAAAE,IAAA,2CAAMc,KAAK,UACTZ,KAAKO,MAAMhB,eACVS,KAAKO,MAAMb,MAEXE,EAAA,QAAMO,MAAM,gBAAgBU,QAAUC,QAAed,KAAKe,oBAAoBD,IAAM,KAKpFlB,EAAA,QAAMO,MAAM,gBAAgBU,QAAUC,QAAed,KAAKgB,kBAAkBF,IAAM,MAG/E,IACJd,KAAKO,MAAMd,SAGdG,EAAA,MAAAE,IAAA,2CAAImB,QAASjB,KAAKO,MAAMhB,eAAiBS,KAAKO,MAAMb,MAAOwB,KAAK,SAC/DtB,EAAA,QAAAE,IAAA,+C,CAmCa,cAAAqB,CAAeC,GAChCD,EAAenB,KAAMoB,GAAS,M,CAGd,aAAAC,CAAcD,GAC9BC,EAAcrB,KAAMoB,E,CAGL,YAAAE,CAAaF,GAC5BE,EAAatB,KAAMoB,E,CAGJ,YAAAG,CAAaH,GAC5BG,EAAavB,KAAMoB,E,CAGb,iBAAAI,GACNxB,KAAKmB,eAAenB,KAAKV,SACzBU,KAAKqB,cAAcrB,KAAKP,QACxBO,KAAKsB,aAAatB,KAAKN,OACvBM,KAAKuB,aAAavB,KAAKR,OAEvBQ,KAAKyB,kB,CAGE,gBAAAxB,GACPD,KAAKyB,kB,CAGE,gBAAAA,G,MACPzB,KAAKO,MAAKmB,OAAAC,OAAAD,OAAAC,OAAA,GACN3B,KAAKO,OAAK,CACbhB,aAAce,SAAQsB,EAAA5B,KAAK6B,KAAKC,cAAc,WAAO,MAAAF,SAAA,SAAAA,EAAEG,mBAAmBC,S,CAKlE,eAAMC,GACfjC,KAAKU,YAAYwB,O,CAGV,uBAAMlB,CAAkBF,GAC/BA,EAAMqB,iBACNnC,KAAKU,YAAYwB,cACXlC,KAAKoC,Q,CAKL,YAAMA,GACZ,GAAIpC,KAAKO,MAAMhB,aAAc,CAC5BS,KAAKO,MAAKmB,OAAAC,OAAAD,OAAAC,OAAA,GACN3B,KAAKO,OAAK,CACbb,MAAO,M,EAKF,yBAAMqB,CAAoBD,GACjCA,EAAMqB,iBACNnC,KAAKU,YAAYwB,cACXlC,KAAKqC,U,CAKL,cAAMA,GACZ,GAAIrC,KAAKO,MAAMhB,aAAc,CAC5BS,KAAKO,MAAKmB,OAAAC,OAAAD,OAAAC,OAAA,GACN3B,KAAKO,OAAK,CACbb,MAAO,O,EAOH,YAAM4C,G,MACZ,OAAOV,EAAA5B,KAAKO,MAAMb,SAAK,MAAAkC,SAAA,EAAAA,EAAI,K"}
+{"version":3,"names":["validateActive","component","value","options","watchBoolean","KolTreeItemWc","_active","_hasChildren","_href","_label","_open","render","h","Host","key","onSlotchange","this","handleSlotchange","bind","class","KolLinkTag","active","Boolean","state","ref","element","linkElement","_tabIndex","slot","onClick","event","handleCollapseClick","handleExpandClick","hidden","role","validateLabel","validateOpen","validateHref","componentWillLoad","checkForChildren","Object","assign","_a","host","querySelector","assignedElements","length","focusLink","focus","preventDefault","expand","collapse","isOpen"],"sources":["src/schema/props/active.ts","src/components/tree-item/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type ActivePropType = boolean;\n\n/**\n * Defines whether something is active.\n */\nexport type PropActive = {\n\tactive: ActivePropType;\n};\n\n/* validator */\nexport const validateActive = (component: Generic.Element.Component, value: ActivePropType, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_active', value, options);\n};\n","import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } from '@stencil/core';\n\nimport type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '../../schema';\nimport { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';\nimport { KolLinkTag } from '../../core/component-names';\n\n@Component({\n\ttag: `kol-tree-item-wc`,\n\tshadow: false,\n})\nexport class KolTreeItemWc implements TreeItemAPI {\n\tprivate linkElement!: HTMLKolLinkWcElement;\n\n\t@Element() host!: HTMLElement;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)} class=\"kol-tree-item-wc\">\n\t\t\t\t<li class=\"tree-item\">\n\t\t\t\t\t<KolLinkTag\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'tree-link': true,\n\t\t\t\t\t\t\tactive: Boolean(this.state._active),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t_href={this.state._href}\n\t\t\t\t\t\tref={(element?: HTMLKolLinkWcElement) => (this.linkElement = element!)}\n\t\t\t\t\t\t_tabIndex={this.state._active ? 0 : -1}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t\t{this.state._hasChildren &&\n\t\t\t\t\t\t\t\t(this.state._open ? (\n\t\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t\t<span class=\"toggle-button\" onClick={(event) => void this.handleCollapseClick(event)}>\n\t\t\t\t\t\t\t\t\t\t-\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t\t<span class=\"toggle-button\" onClick={(event) => void this.handleExpandClick(event)}>\n\t\t\t\t\t\t\t\t\t\t+\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t))}{' '}\n\t\t\t\t\t\t\t{this.state._label}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</KolLinkTag>\n\t\t\t\t\t<ul hidden={!this.state._hasChildren || !this.state._open} role=\"group\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: TreeItemStates = {\n\t\t_active: false,\n\t\t_hasChildren: false,\n\t\t_href: '',\n\t\t_label: '',\n\t\t_open: false,\n\t};\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the label of the link.\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * This property is used for a link from a reference to the target URL.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Watch('_active') validateActive(value?: ActivePropType): void {\n\t\tvalidateActive(this, value || false);\n\t}\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open') validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_href') validateHref(value?: HrefPropType): void {\n\t\tvalidateHref(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActive(this._active);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateHref(this._href);\n\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate checkForChildren() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_hasChildren: Boolean(this.host.querySelector('slot')?.assignedElements().length),\n\t\t};\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\t@Method() async focusLink() {\n\t\tthis.linkElement.focus();\n\t}\n\n\tprivate async handleExpandClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.linkElement.focus();\n\t\tawait this.expand();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async expand() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: true,\n\t\t\t};\n\t\t}\n\t}\n\n\tprivate async handleCollapseClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.linkElement.focus();\n\t\tawait this.collapse();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async collapse() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: false,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async isOpen() {\n\t\treturn this.state._open ?? false;\n\t}\n}\n"],"mappings":";;;mVAgBO,MAAMA,EAAiB,CAACC,EAAsCC,EAAuBC,KAC3FC,EAAaH,EAAW,UAAWC,EAAOC,EAAQ,E,MCPtCE,EAAa,M,oCA2Ce,CACvCC,QAAS,MACTC,aAAc,MACdC,MAAO,GACPC,OAAQ,GACRC,MAAO,O,uFA3CD,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,aAAcC,KAAKC,iBAAiBC,KAAKF,MAAOG,MAAM,oBAC3DP,EAAA,MAAAE,IAAA,2CAAIK,MAAM,aACTP,EAACQ,EAAU,CAAAN,IAAA,2CACVK,MAAO,CACN,YAAa,KACbE,OAAQC,QAAQN,KAAKO,MAAMjB,UAE5BG,OAAO,GACPD,MAAOQ,KAAKO,MAAMf,MAClBgB,IAAMC,GAAoCT,KAAKU,YAAcD,EAC7DE,UAAWX,KAAKO,MAAMjB,QAAU,GAAK,GAErCM,EAAA,QAAAE,IAAA,2CAAMc,KAAK,UACTZ,KAAKO,MAAMhB,eACVS,KAAKO,MAAMb,MAEXE,EAAA,QAAMO,MAAM,gBAAgBU,QAAUC,QAAed,KAAKe,oBAAoBD,IAAM,KAKpFlB,EAAA,QAAMO,MAAM,gBAAgBU,QAAUC,QAAed,KAAKgB,kBAAkBF,IAAM,MAG/E,IACJd,KAAKO,MAAMd,SAGdG,EAAA,MAAAE,IAAA,2CAAImB,QAASjB,KAAKO,MAAMhB,eAAiBS,KAAKO,MAAMb,MAAOwB,KAAK,SAC/DtB,EAAA,QAAAE,IAAA,+C,CAmCa,cAAAd,CAAeE,GAChCF,EAAegB,KAAMd,GAAS,M,CAGd,aAAAiC,CAAcjC,GAC9BiC,EAAcnB,KAAMd,E,CAGL,YAAAkC,CAAalC,GAC5BkC,EAAapB,KAAMd,E,CAGJ,YAAAmC,CAAanC,GAC5BmC,EAAarB,KAAMd,E,CAGb,iBAAAoC,GACNtB,KAAKhB,eAAegB,KAAKV,SACzBU,KAAKmB,cAAcnB,KAAKP,QACxBO,KAAKoB,aAAapB,KAAKN,OACvBM,KAAKqB,aAAarB,KAAKR,OAEvBQ,KAAKuB,kB,CAGE,gBAAAtB,GACPD,KAAKuB,kB,CAGE,gBAAAA,G,MACPvB,KAAKO,MAAKiB,OAAAC,OAAAD,OAAAC,OAAA,GACNzB,KAAKO,OAAK,CACbhB,aAAce,SAAQoB,EAAA1B,KAAK2B,KAAKC,cAAc,WAAO,MAAAF,SAAA,SAAAA,EAAEG,mBAAmBC,S,CAKlE,eAAMC,GACf/B,KAAKU,YAAYsB,O,CAGV,uBAAMhB,CAAkBF,GAC/BA,EAAMmB,iBACNjC,KAAKU,YAAYsB,cACXhC,KAAKkC,Q,CAKL,YAAMA,GACZ,GAAIlC,KAAKO,MAAMhB,aAAc,CAC5BS,KAAKO,MAAKiB,OAAAC,OAAAD,OAAAC,OAAA,GACNzB,KAAKO,OAAK,CACbb,MAAO,M,EAKF,yBAAMqB,CAAoBD,GACjCA,EAAMmB,iBACNjC,KAAKU,YAAYsB,cACXhC,KAAKmC,U,CAKL,cAAMA,GACZ,GAAInC,KAAKO,MAAMhB,aAAc,CAC5BS,KAAKO,MAAKiB,OAAAC,OAAAD,OAAAC,OAAA,GACNzB,KAAKO,OAAK,CACbb,MAAO,O,EAOH,YAAM0C,G,MACZ,OAAOV,EAAA1B,KAAKO,MAAMb,SAAK,MAAAgC,SAAA,EAAAA,EAAI,K"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as s}from"./index-59e9528b.js";import{r as i}from"./component-names-61247f2f.js";const t="",a=t,n=class{constructor(t){e(this,t),this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}async focusLink(){this.element&&await this.element.focusLink()}async expand(){this.element&&await this.element.expand()}async collapse(){this.element&&await this.element.collapse()}async isOpen(){var e,t;return null!==(t=await(null===(e=this.element)||void 0===e?void 0:e.isOpen()))&&void 0!==t&&t}render(){return s(i,{key:"773180b29d71ebaeb715893f637862f7d3e279c8",class:"kol-tree-item",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:e=>this.element=e},s("slot",{key:"ebc5354177af60ec5e7c3ba5eecf53ea374eaaae"}))}};n.style={default:a};export{n as kol_tree_item};
+import{r as e,h as t}from"./index-3fbcceca.js";import{v as i}from"./component-names-ed22f86e.js";const s="@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",n=s,a=class{constructor(t){e(this,t),this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}async focusLink(){this.element&&await this.element.focusLink()}async expand(){this.element&&await this.element.expand()}async collapse(){this.element&&await this.element.collapse()}async isOpen(){var e,t;return null!==(t=await(null===(e=this.element)||void 0===e?void 0:e.isOpen()))&&void 0!==t&&t}render(){return t(i,{key:"a69b8e45457c1e0e153610d0820dd6e2a93d6ea3",class:"kol-tree-item",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:e=>this.element=e},t("slot",{key:"f9878c6fae30f9be9cfdb6074a41a2608244f2f7"}))}};a.style={default:n};export{a as kol_tree_item};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTreeItemDefaultStyle0","KolTreeItem","focusLink","this","element","expand","collapse","isOpen","_b","_a","render","h","KolTreeItemWcTag","key","class","_active","_label","_open","_href","ref"],"sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@layer kol-component {\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '@public-ui/schema';\nimport { KolTreeItemWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the label of the link.\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * This property is used for a link from a reference to the target URL.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Method() async focusLink() {\n\t\tif (this.element) {\n\t\t\tawait this.element.focusLink();\n\t\t}\n\t}\n\n\t@Method() async expand() {\n\t\tif (this.element) {\n\t\t\tawait this.element.expand();\n\t\t}\n\t}\n\n\t@Method() async collapse() {\n\t\tif (this.element) {\n\t\t\tawait this.element.collapse();\n\t\t}\n\t}\n\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\tclass=\"kol-tree-item\"\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,GACxB,MAAAC,EAAeD,E,MCWFE,EAAW,M,gHAuBb,eAAMC,GACf,GAAIC,KAAKC,QAAS,OACXD,KAAKC,QAAQF,W,EAIX,YAAMG,GACf,GAAIF,KAAKC,QAAS,OACXD,KAAKC,QAAQC,Q,EAIX,cAAMC,GACf,GAAIH,KAAKC,QAAS,OACXD,KAAKC,QAAQE,U,EAIX,YAAMC,G,QACf,OAAOC,SAAOC,EAAAN,KAAKC,WAAO,MAAAK,SAAA,SAAAA,EAAEF,aAAS,MAAAC,SAAA,EAAAA,EAAI,K,CAGnC,MAAAE,GACN,OACCC,EAACC,EAAgB,CAAAC,IAAA,2CAChBC,MAAM,gBACNC,QAASZ,KAAKY,QACdC,OAAQb,KAAKa,OACbC,MAAOd,KAAKc,MACZC,MAAOf,KAAKe,MACZC,IAAMf,GAAwCD,KAAKC,QAAUA,GAE7DO,EAAA,QAAAE,IAAA,6C"}
+{"version":3,"names":["defaultStyleCss","KolTreeItemDefaultStyle0","KolTreeItem","focusLink","this","element","expand","collapse","isOpen","_b","_a","render","h","KolTreeItemWcTag","key","class","_active","_label","_open","_href","ref"],"sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\nimport { KolTreeItemWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the label of the link.\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * This property is used for a link from a reference to the target URL.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Method() async focusLink() {\n\t\tif (this.element) {\n\t\t\tawait this.element.focusLink();\n\t\t}\n\t}\n\n\t@Method() async expand() {\n\t\tif (this.element) {\n\t\t\tawait this.element.expand();\n\t\t}\n\t}\n\n\t@Method() async collapse() {\n\t\tif (this.element) {\n\t\t\tawait this.element.collapse();\n\t\t}\n\t}\n\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\tclass=\"kol-tree-item\"\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,6GACxB,MAAAC,EAAeD,E,MCWFE,EAAW,M,gHAuBb,eAAMC,GACf,GAAIC,KAAKC,QAAS,OACXD,KAAKC,QAAQF,W,EAIX,YAAMG,GACf,GAAIF,KAAKC,QAAS,OACXD,KAAKC,QAAQC,Q,EAIX,cAAMC,GACf,GAAIH,KAAKC,QAAS,OACXD,KAAKC,QAAQE,U,EAIX,YAAMC,G,QACf,OAAOC,SAAOC,EAAAN,KAAKC,WAAO,MAAAK,SAAA,SAAAA,EAAEF,aAAS,MAAAC,SAAA,EAAAA,EAAI,K,CAGnC,MAAAE,GACN,OACCC,EAACC,EAAgB,CAAAC,IAAA,2CAChBC,MAAM,gBACNC,QAASZ,KAAKY,QACdC,OAAQb,KAAKa,OACbC,MAAOd,KAAKc,MACZC,MAAOf,KAAKe,MACZC,IAAMf,GAAwCD,KAAKC,QAAUA,GAE7DO,EAAA,QAAAE,IAAA,6C"}

package/dist/kolibri/kol-tree-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-59e9528b.js";import{v as a}from"./index-fbc0a5be.js";const r="kol-tree-item",o=class{constructor(t){e(this,t),this.state={_label:""},this._label=void 0}validateLabel(e){a(this,e)}render(){return t(i,{key:"e391d74cc93848c2f609b8a051c9f6b604c148ae",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-wc"},t("nav",{key:"7cf0b4397895d3d40309b2ca9163f20358773fb5",class:"tree","aria-label":this.state._label},t("ul",{key:"38bfd77edaa1ee592eca542fad16fd0b5f3a80e6",class:"treeview-navigation",role:"tree","aria-label":this.state._label},t("slot",{key:"9ab7629d4bea7e7877470cf9852e2494af585350"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===r.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(){this.getTopLevelTreeItems().forEach((e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})}))}getTopLevelTreeItems(){var e;return(null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes()).filter(o.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){return this.getTopLevelTreeItems().reduce(((e,t)=>{const a=t.querySelectorAll(r);return[...e,t,...a]}),[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const e=async t=>!o.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,s,i;const l=await this.getOpenTreeItemElements(),n=null===(t=document.activeElement)||void 0===t?void 0:t.closest(r);if(!l||!n)return;const o=null==l?void 0:l.findIndex((e=>e===n));switch(e.key){case"ArrowDown":await(null===(a=l[o+1])||void 0===a?void 0:a.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(s=l[o-1])||void 0===s?void 0:s.focusLink()),e.preventDefault();break;case"ArrowRight":await n.expand(),e.preventDefault();break;case"ArrowLeft":await n.collapse(),e.preventDefault();break;case"*":{const e=null===(i=n.parentElement)||void 0===i?void 0:i.querySelectorAll(r);null==e||e.forEach((e=>{e.expand()}));break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest("kol-tree")&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const e=t=>{o.isTreeItem(t.parentElement)&&(t.parentElement.expand(),e(t.parentElement))},t=(()=>{var e;const t=(null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes()).filter(o.isTreeItem);for(const e of t){if(e._active)return e;const t=e.querySelector('kol-tree-item[_active="true"]');if(t&&t._active)return t}})();t&&e(t)}get host(){return s(this)}static get watchers(){return{_label:["validateLabel"]}}};export{o as kol_tree_wc};
+import{r as e,h as t,H as i,g as a}from"./index-3fbcceca.js";import{v as s}from"./label-e56ffdc6.js";import"./prop.validators-29d576d2.js";import"./index-4a3076fc.js";import"./dev.utils-1ca991a2.js";const r="kol-tree-item",o=class{constructor(t){e(this,t),this.state={_label:""},this._label=void 0}validateLabel(e){s(this,e)}render(){return t(i,{key:"2a7d6c44d79e4865fbf43834a7c5e5eb09ad9302",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-wc"},t("nav",{key:"c06f3add4871974aa4e06c8ca0547a9c990efd8a",class:"tree","aria-label":this.state._label},t("ul",{key:"8c0d782c7b0cf4bd88dbab8629738b60429a988c",class:"treeview-navigation",role:"tree","aria-label":this.state._label},t("slot",{key:"11086a8f0d7cb80a187a459ff9e3dcff121310df"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===r.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(){this.getTopLevelTreeItems().forEach((e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})}))}getTopLevelTreeItems(){var e;return(null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes()).filter(o.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){return this.getTopLevelTreeItems().reduce(((e,t)=>{const a=t.querySelectorAll(r);return[...e,t,...a]}),[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const e=async t=>!o.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,s,i;const l=await this.getOpenTreeItemElements(),n=null===(t=document.activeElement)||void 0===t?void 0:t.closest(r);if(!l||!n)return;const o=null==l?void 0:l.findIndex((e=>e===n));switch(e.key){case"ArrowDown":await(null===(a=l[o+1])||void 0===a?void 0:a.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(s=l[o-1])||void 0===s?void 0:s.focusLink()),e.preventDefault();break;case"ArrowRight":await n.expand(),e.preventDefault();break;case"ArrowLeft":await n.collapse(),e.preventDefault();break;case"*":{const e=null===(i=n.parentElement)||void 0===i?void 0:i.querySelectorAll(r);null==e||e.forEach((e=>{e.expand()}));break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest("kol-tree")&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const e=t=>{o.isTreeItem(t.parentElement)&&(t.parentElement.expand(),e(t.parentElement))},t=(()=>{var e;const t=(null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedNodes()).filter(o.isTreeItem);for(const e of t){if(e._active)return e;const t=e.querySelector('kol-tree-item[_active="true"]');if(t&&t._active)return t}})();t&&e(t)}get host(){return a(this)}static get watchers(){return{_label:["validateLabel"]}}};export{o as kol_tree_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["TREE_ITEM_TAG_NAME","KolTreeWc","_label","validateLabel","value","this","render","h","Host","key","onSlotchange","handleSlotchange","bind","class","state","role","isTreeItem","element","tagName","toUpperCase","componentWillLoad","handleTreeChange","observeChildListMutations","disconnectedCallback","_a","observer","disconnect","MutationObserver","observeTopLevelItems","getTopLevelTreeItems","forEach","treeItem","observe","childList","subtree","host","querySelector","assignedNodes","filter","treeItemElements","getTreeItemElements","ensureActiveItemVisibility","reduce","accumulator","currentValue","children","querySelectorAll","getOpenTreeItemElements","areElementAndAllParentsOpen","async","parentElement","isOpen","elementsWithInclude","Promise","all","map","include","handleKeyDown","event","openItems","currentTreeItem","document","activeElement","closest","currentIndex","findIndex","elem","_b","focusLink","preventDefault","_c","expand","collapse","siblings","_d","handleFocusOut","relatedTarget","findActiveItem","rootNodes","rootNode","_active","childMatch","expandParentElements","target"],"sources":["src/components/tree/constants.ts","src/components/tree/component.tsx"],"sourcesContent":["export const TREE_ITEM_TAG_NAME = 'kol-tree-item';\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, TreeAPI, TreeStates } from '@public-ui/schema';\nimport { validateLabel } from '@public-ui/schema';\nimport { TREE_ITEM_TAG_NAME } from './constants';\n\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\n\n\t/**\n\t * Defines the label of the tree.\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)} class=\"kol-tree-wc\">\n\t\t\t\t<nav class=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === TREE_ITEM_TAG_NAME.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(this.handleTreeChange.bind(this));\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.handleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems().forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host.querySelector('slot')?.assignedNodes() as HTMLElement[]).filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems().reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(TREE_ITEM_TAG_NAME);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst areElementAndAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tif (!KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\t// parent is tree itself, top level is always open\n\t\t\t\treturn true;\n\t\t\t} else {\n\t\t\t\treturn (await element.parentElement.isOpen()) && (await areElementAndAllParentsOpen(element.parentElement));\n\t\t\t}\n\t\t};\n\n\t\tconst elementsWithInclude = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (element) => ({\n\t\t\t\tvalue: element,\n\t\t\t\tinclude: await areElementAndAllParentsOpen(element),\n\t\t\t})),\n\t\t);\n\n\t\treturn elementsWithInclude.filter((element) => element.include).map((element) => element.value);\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(TREE_ITEM_TAG_NAME);\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(TREE_ITEM_TAG_NAME);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic async handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest('kol-tree')) {\n\t\t\t/* Tree lost focus */\n\t\t\tawait this.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tprivate async ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host.querySelector('slot')?.assignedNodes() as HTMLElement[]).filter(KolTreeWc.isTreeItem);\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector('kol-tree-item[_active=\"true\"]');\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["TREE_ITEM_TAG_NAME","KolTreeWc","_label","validateLabel","value","this","render","h","Host","key","onSlotchange","handleSlotchange","bind","class","state","role","isTreeItem","element","tagName","toUpperCase","componentWillLoad","handleTreeChange","observeChildListMutations","disconnectedCallback","_a","observer","disconnect","MutationObserver","observeTopLevelItems","getTopLevelTreeItems","forEach","treeItem","observe","childList","subtree","host","querySelector","assignedNodes","filter","treeItemElements","getTreeItemElements","ensureActiveItemVisibility","reduce","accumulator","currentValue","children","querySelectorAll","getOpenTreeItemElements","areElementAndAllParentsOpen","async","parentElement","isOpen","elementsWithInclude","Promise","all","map","include","handleKeyDown","event","openItems","currentTreeItem","document","activeElement","closest","currentIndex","findIndex","elem","_b","focusLink","preventDefault","_c","expand","collapse","siblings","_d","handleFocusOut","relatedTarget","findActiveItem","rootNodes","rootNode","_active","childMatch","expandParentElements","target"],"sources":["src/components/tree/constants.ts","src/components/tree/component.tsx"],"sourcesContent":["export const TREE_ITEM_TAG_NAME = 'kol-tree-item';\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, TreeAPI, TreeStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { TREE_ITEM_TAG_NAME } from './constants';\n\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\n\n\t/**\n\t * Defines the label of the tree.\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)} class=\"kol-tree-wc\">\n\t\t\t\t<nav class=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === TREE_ITEM_TAG_NAME.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(this.handleTreeChange.bind(this));\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.handleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems().forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host.querySelector('slot')?.assignedNodes() as HTMLElement[]).filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems().reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(TREE_ITEM_TAG_NAME);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst areElementAndAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tif (!KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\t// parent is tree itself, top level is always open\n\t\t\t\treturn true;\n\t\t\t} else {\n\t\t\t\treturn (await element.parentElement.isOpen()) && (await areElementAndAllParentsOpen(element.parentElement));\n\t\t\t}\n\t\t};\n\n\t\tconst elementsWithInclude = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (element) => ({\n\t\t\t\tvalue: element,\n\t\t\t\tinclude: await areElementAndAllParentsOpen(element),\n\t\t\t})),\n\t\t);\n\n\t\treturn elementsWithInclude.filter((element) => element.include).map((element) => element.value);\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(TREE_ITEM_TAG_NAME);\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(TREE_ITEM_TAG_NAME);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic async handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest('kol-tree')) {\n\t\t\t/* Tree lost focus */\n\t\t\tawait this.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tprivate async ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host.querySelector('slot')?.assignedNodes() as HTMLElement[]).filter(KolTreeWc.isTreeItem);\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector('kol-tree-item[_active=\"true\"]');\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"],"mappings":"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"}

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-59e9528b.js";import{q as i}from"./component-names-61247f2f.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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  .hidden {\n    display: none;\n    visibility: hidden;\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\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:"fcc125bd09d5fd6b60dedcebe868de580871bf58",class:"kol-tree"},e(i,{key:"b5dcccf11a5378aecac7794554025c0028d428cd",_label:this._label},e("slot",{key:"2b38f989390dabf1dad95e46c6d4cadde19930b4"})))}};s.style={default:a};export{s as kol_tree};
+import{r as n,h as e,H as t}from"./index-3fbcceca.js";import{u as i}from"./component-names-ed22f86e.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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  .hidden {\n    display: none;\n    visibility: hidden;\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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:"b8f702c2c3a146c116716fefc665a3868be8c43c",class:"kol-tree"},e(i,{key:"d4c1893cc63355e9061792e297e6550e620f2887",_label:this._label},e("slot",{key:"d60ceef03740e10316c0d282800b73965f6c48e0"})))}};s.style={default:a};export{s as kol_tree};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTreeDefaultStyle0","KolTree","render","h","Host","key","class","KolTreeWcTag","_label","this"],"sources":["src/components/tree/style.scss?tag=kol-tree&mode=default&encapsulation=shadow","src/components/tree/shadow.tsx"],"sourcesContent":["@import '../style';\n\n@layer kol-component {\n\t.tree {\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, h, Host, Prop } from '@stencil/core';\n\nimport type { LabelPropType, TreeProps } from '@public-ui/schema';\nimport { KolTreeWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTree implements TreeProps {\n\t/**\n\t * Defines the label of the tree.\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-tree\">\n\t\t\t\t<KolTreeWcTag _label={this._label}>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolTreeWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAkB,0oIACxB,MAAAC,EAAeD,E,MCYFE,EAAO,M,+CAMZ,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,YACXH,EAACI,EAAY,CAAAF,IAAA,2CAACG,OAAQC,KAAKD,QAC1BL,EAAA,QAAAE,IAAA,8C"}
+{"version":3,"names":["defaultStyleCss","KolTreeDefaultStyle0","KolTree","render","h","Host","key","class","KolTreeWcTag","_label","this"],"sources":["src/components/tree/style.scss?tag=kol-tree&mode=default&encapsulation=shadow","src/components/tree/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.tree {\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, h, Host, Prop } from '@stencil/core';\n\nimport type { LabelPropType, TreeProps } from '../../schema';\nimport { KolTreeWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTree implements TreeProps {\n\t/**\n\t * Defines the label of the tree.\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-tree\">\n\t\t\t\t<KolTreeWcTag _label={this._label}>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolTreeWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAkB,2tIACxB,MAAAC,EAAeD,E,MCYFE,EAAO,M,+CAMZ,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,YACXH,EAACI,EAAY,CAAAF,IAAA,2CAACG,OAAQC,KAAKD,QAC1BL,EAAA,QAAAE,IAAA,8C"}

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-59e9528b.js";import{v as i}from"./index-fbc0a5be.js";import{t as o}from"./i18n-7a7ff96e.js";import{t as a}from"./component-names-61247f2f.js";import"./i18n-0c047df5.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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  .hidden {\n    display: none;\n    visibility: hidden;\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\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:"a52f067fad2d5a95082262496e7b50325612fafc",class:"kol-version"},e(a,{key:"379f3d26164e155d1bd5c4eb52af99b502debd23",_color:"#bec5c9",_icons:{left:{icon:"codicon codicon-versions",label:o("kol-version")}},_label:this.state._label}))}validateLabel(n){i(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-3fbcceca.js";import{t as i}from"./i18n-37baa421.js";import{w as o}from"./component-names-ed22f86e.js";import{v as a}from"./label-e56ffdc6.js";import"./i18n-0c047df5.js";import"./reuse-b66836de.js";import"./prop.validators-29d576d2.js";import"./index-4a3076fc.js";import"./dev.utils-1ca991a2.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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  .hidden {\n    display: none;\n    visibility: hidden;\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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:"252159679fb88587d2ae6df7479df43f255ff3e2",class:"kol-version"},e(o,{key:"2d2f8e44d6f08eedfe2e2e33ef3c8abec3ea8e1c",_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};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolVersionDefaultStyle0","KolVersion","_label","render","h","Host","key","class","KolBadgeTag","_color","_icons","left","icon","label","translate","this","state","validateLabel","value","required","componentWillLoad"],"sources":["src/components/version/style.scss?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/component.tsx"],"sourcesContent":["@import '../style';\n","import type { LabelPropType, VersionAPI, VersionStates } from '@public-ui/schema';\nimport { validateLabel } from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport { KolBadgeTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements VersionAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-version\">\n\t\t\t\t<KolBadgeTag\n\t\t\t\t\t_color=\"#bec5c9\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: { icon: 'codicon codicon-versions', label: translate('kol-version') },\n\t\t\t\t\t}}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t/>\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!: LabelPropType;\n\n\t@State() public state: VersionStates = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;kNAAA,MAAMA,EAAkB,+hIACxB,MAAAC,EAAeD,E,MCeFE,EAAU,M,0DAoBiB,CACtCC,OAAQ,gB,CApBF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,eACXH,EAACI,EAAW,CAAAF,IAAA,2CACXG,OAAO,UACPC,OAAQ,CACPC,KAAM,CAAEC,KAAM,2BAA4BC,MAAOC,EAAU,iBAE5DZ,OAAQa,KAAKC,MAAMd,S,CAgBhB,aAAAe,CAAcC,GACpBD,EAAcF,KAAMG,EAAO,CAC1BC,SAAU,M,CAIL,iBAAAC,GACNL,KAAKE,cAAcF,KAAKb,O"}
+{"version":3,"names":["defaultStyleCss","KolVersionDefaultStyle0","KolVersion","_label","render","h","Host","key","class","KolBadgeTag","_color","_icons","left","icon","label","translate","this","state","validateLabel","value","required","componentWillLoad"],"sources":["src/components/version/style.scss?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n","import type { LabelPropType, VersionAPI, VersionStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport { KolBadgeTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements VersionAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-version\">\n\t\t\t\t<KolBadgeTag\n\t\t\t\t\t_color=\"#bec5c9\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: { icon: 'codicon codicon-versions', label: translate('kol-version') },\n\t\t\t\t\t}}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t/>\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!: LabelPropType;\n\n\t@State() public state: VersionStates = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;gVAAA,MAAMA,EAAkB,2oIACxB,MAAAC,EAAeD,E,MCeFE,EAAU,M,0DAoBiB,CACtCC,OAAQ,gB,CApBF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,eACXH,EAACI,EAAW,CAAAF,IAAA,2CACXG,OAAO,UACPC,OAAQ,CACPC,KAAM,CAAEC,KAAM,2BAA4BC,MAAOC,EAAU,iBAE5DZ,OAAQa,KAAKC,MAAMd,S,CAgBhB,aAAAe,CAAcC,GACpBD,EAAcF,KAAMG,EAAO,CAC1BC,SAAU,M,CAIL,iBAAAC,GACNL,KAAKE,cAAcF,KAAKb,O"}