@public-ui/components 3.0.6-rc.2 → 3.0.7-d0e38f2b24188b03316351f07d939c4524a2fd81.0

package/dist/components/kol-modal.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{g as KolCardWcTag}from"./component-names.js";import{e as watchString,w as watchValidator,s as setState}from"./common.js";import{v as validateLabel}from"./label.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";const validateWidth=(n,t,e)=>{watchString(n,"_width",t,Object.assign({defaultValue:"100%"},e))},ModalVariantPropTypeOptions=["blank","card"],validateModalVariant=(n,t)=>{watchValidator(n,"_variant",n=>"string"==typeof n&&ModalVariantPropTypeOptions.includes(n),new Set(ModalVariantPropTypeOptions),t)},defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  position: relative;\n  height: 100%;\n}\n.kol-card__close-button {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n@layer kol-component {\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}",KolModal$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.on={onClose:async()=>{await this.closeModal()}},this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,t;null===(t=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===t||t.call(n),this.host&&dispatchDomEvent(this.host,KolEvent.close)}async openModal(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}async closeModal(){var n,t;null===(t=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===t||t.call(n)}render(){return h("dialog",{key:"7ff10751f7a342a9ca719c2d79fe2a0dc6d2bc06","aria-label":this.state._label,class:clsx("kol-modal",{"kol-modal__blank":"blank"===this.state._variant,"kol-modal__card":"card"===this.state._variant}),onClose:this.handleNativeCloseEvent.bind(this),ref:n=>{this.refDialog=n},style:{width:this.state._width}},"blank"===this.state._variant&&h("slot",{key:"4178f173aa6b0088bb2d1e5504b4c874b4fc9d36"}),"card"===this.state._variant&&h(KolCardWcTag,{key:"2fed2d9a3359409426c6a0ae7ae55bf8490017e8",_label:this.state._label,_hasCloser:!0,_on:this.on},h("slot",{key:"2254882248140cc186df25ca75a06f897219211e"})))}validateLabel(n){validateLabel(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const t={};"function"!=typeof n.onClose&&!0!==n.onClose||(t.onClose=n.onClose),setState(this,"_on",t)}}validateWidth(n){validateWidth(this,n)}validateVariant(n){validateModalVariant(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return this}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-modal",{_label:[1],_on:[16],_width:[1],_variant:[1],state:[32],openModal:[64],closeModal:[64]},void 0,{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-modal"].forEach(n=>{if("kol-modal"===n)customElements.get(n)||customElements.define(n,KolModal$1)})}const KolModal=KolModal$1,defineCustomElement=defineCustomElement$1;export{KolModal,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{g as KolCardWcTag}from"./component-names.js";import{h as watchString,w as watchValidator,s as setState}from"./common.js";import{v as validateLabel}from"./label.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";const validateWidth=(n,t,e)=>{watchString(n,"_width",t,Object.assign({defaultValue:"100%"},e))},ModalVariantPropTypeOptions=["blank","card"],validateModalVariant=(n,t)=>{watchValidator(n,"_variant",n=>"string"==typeof n&&ModalVariantPropTypeOptions.includes(n),new Set(ModalVariantPropTypeOptions),t)},defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  position: relative;\n  height: 100%;\n}\n.kol-card__close-button {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n@layer kol-component {\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}",KolModal$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.on={onClose:async()=>{await this.closeModal()}},this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,t;null===(t=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===t||t.call(n),this.host&&dispatchDomEvent(this.host,KolEvent.close)}async openModal(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}async closeModal(){var n,t;null===(t=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===t||t.call(n)}render(){return h("dialog",{key:"7ff10751f7a342a9ca719c2d79fe2a0dc6d2bc06","aria-label":this.state._label,class:clsx("kol-modal",{"kol-modal__blank":"blank"===this.state._variant,"kol-modal__card":"card"===this.state._variant}),onClose:this.handleNativeCloseEvent.bind(this),ref:n=>{this.refDialog=n},style:{width:this.state._width}},"blank"===this.state._variant&&h("slot",{key:"4178f173aa6b0088bb2d1e5504b4c874b4fc9d36"}),"card"===this.state._variant&&h(KolCardWcTag,{key:"2fed2d9a3359409426c6a0ae7ae55bf8490017e8",_label:this.state._label,_hasCloser:!0,_on:this.on},h("slot",{key:"2254882248140cc186df25ca75a06f897219211e"})))}validateLabel(n){validateLabel(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const t={};"function"!=typeof n.onClose&&!0!==n.onClose||(t.onClose=n.onClose),setState(this,"_on",t)}}validateWidth(n){validateWidth(this,n)}validateVariant(n){validateModalVariant(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return this}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-modal",{_label:[1],_on:[16],_width:[1],_variant:[1],state:[32],openModal:[64],closeModal:[64]},void 0,{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-modal"].forEach(n=>{if("kol-modal"===n)customElements.get(n)||customElements.define(n,KolModal$1)})}const KolModal=KolModal$1,defineCustomElement=defineCustomElement$1;export{KolModal,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-modal.js","mappings":"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","names":["KolModal","__stencil_proxyCustomElement"],"sources":["src/schema/props/width.ts","src/schema/props/variant/modal.ts","src/components/modal/style.scss?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type WidthPropType = string;\n\n/**\n * Defines the width of the component. (max-width: 100%)\n */\nexport interface PropWidth {\n\twidth: WidthPropType;\n}\n\n/* validator */\nexport const validateWidth = (component: Generic.Element.Component, value?: WidthPropType, options?: WatchStringOptions): void => {\n\twatchString(component, '_width', value, { defaultValue: '100%', ...options });\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\nconst ModalVariantPropTypeOptions = ['blank', 'card'] as const;\nexport type ModalVariantPropType = (typeof ModalVariantPropTypeOptions)[number];\n\n/**\n * Defines the different variants for displaying the Modal.\n */\nexport type PropModalVariant = {\n\tvariant: ModalVariantPropType;\n};\n\n/* validator */\nexport const validateModalVariant = (component: Generic.Element.Component, value?: ModalVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value),\n\t\tnew Set(ModalVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../../styles/global' as *;\n@use '../../styles/kol-card-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@include kol-card;\n\n@layer kol-component {\n\t.kol-modal {\n\t\tmin-height: var(--a11y-min-size);\n\t\tpadding: 0;\n\t\tborder: 0;\n\n\t\t&::backdrop {\n\t\t\tbackground-color: rgb(0, 0, 0, 0.1);\n\t\t}\n\n\t\t&__close-button {\n\t\t\tposition: absolute;\n\t\t\ttop: to-rem(1);\n\t\t\tright: to-rem(1);\n\t\t\tz-index: 1;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type { KoliBriModalEventCallbacks, LabelPropType, ModalAPI, ModalStates } from '../../schema';\nimport { setState, validateLabel, validateWidth } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\nimport { validateModalVariant } from '../../schema/props/variant/modal';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @slot - The modal's contents.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements ModalAPI {\n\t@Element() private readonly host?: HTMLKolModalElement;\n\tprivate refDialog?: HTMLDialogElement;\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.closeModal();\n\t}\n\n\tprivate handleNativeCloseEvent() {\n\t\tthis.state._on?.onClose?.();\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync openModal() {\n\t\tthis.refDialog?.showModal();\n\t}\n\n\t/**\n\t * Closes the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeModal() {\n\t\t/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */\n\t\tthis.refDialog?.close?.();\n\t}\n\n\tprivate readonly on = {\n\t\tonClose: async () => {\n\t\t\tawait this.closeModal();\n\t\t},\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tclass={clsx('kol-modal', {\n\t\t\t\t\t'kol-modal__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-modal__card': this.state._variant === 'card',\n\t\t\t\t})}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.refDialog = el;\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: this.state._width,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._variant === 'blank' && <slot />}\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<KolCardWcTag _label={this.state._label} _hasCloser _on={this.on}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</KolCardWcTag>\n\t\t\t\t)}\n\t\t\t</dialog>\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/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n\n\t@State() public state: ModalStates = {\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\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\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\tvalidateWidth(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ModalVariantPropType): void {\n\t\tvalidateModalVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"version":3}
+{"file":"kol-modal.js","mappings":"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","names":["KolModal","__stencil_proxyCustomElement"],"sources":["src/schema/props/width.ts","src/schema/props/variant/modal.ts","src/components/modal/style.scss?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type WidthPropType = string;\n\n/**\n * Defines the width of the component. (max-width: 100%)\n */\nexport interface PropWidth {\n\twidth: WidthPropType;\n}\n\n/* validator */\nexport const validateWidth = (component: Generic.Element.Component, value?: WidthPropType, options?: WatchStringOptions): void => {\n\twatchString(component, '_width', value, { defaultValue: '100%', ...options });\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\nconst ModalVariantPropTypeOptions = ['blank', 'card'] as const;\nexport type ModalVariantPropType = (typeof ModalVariantPropTypeOptions)[number];\n\n/**\n * Defines the different variants for displaying the Modal.\n */\nexport type PropModalVariant = {\n\tvariant: ModalVariantPropType;\n};\n\n/* validator */\nexport const validateModalVariant = (component: Generic.Element.Component, value?: ModalVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value),\n\t\tnew Set(ModalVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../../styles/global' as *;\n@use '../../styles/kol-card-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@include kol-card;\n\n@layer kol-component {\n\t.kol-modal {\n\t\tmin-height: var(--a11y-min-size);\n\t\tpadding: 0;\n\t\tborder: 0;\n\n\t\t&::backdrop {\n\t\t\tbackground-color: rgb(0, 0, 0, 0.1);\n\t\t}\n\n\t\t&__close-button {\n\t\t\tposition: absolute;\n\t\t\ttop: to-rem(1);\n\t\t\tright: to-rem(1);\n\t\t\tz-index: 1;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type { KoliBriModalEventCallbacks, LabelPropType, ModalAPI, ModalStates } from '../../schema';\nimport { setState, validateLabel, validateWidth } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\nimport { validateModalVariant } from '../../schema/props/variant/modal';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @slot - The modal's contents.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements ModalAPI {\n\t@Element() private readonly host?: HTMLKolModalElement;\n\tprivate refDialog?: HTMLDialogElement;\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.closeModal();\n\t}\n\n\tprivate handleNativeCloseEvent() {\n\t\tthis.state._on?.onClose?.();\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync openModal() {\n\t\tthis.refDialog?.showModal();\n\t}\n\n\t/**\n\t * Closes the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeModal() {\n\t\t/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */\n\t\tthis.refDialog?.close?.();\n\t}\n\n\tprivate readonly on = {\n\t\tonClose: async () => {\n\t\t\tawait this.closeModal();\n\t\t},\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tclass={clsx('kol-modal', {\n\t\t\t\t\t'kol-modal__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-modal__card': this.state._variant === 'card',\n\t\t\t\t})}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.refDialog = el;\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: this.state._width,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._variant === 'blank' && <slot />}\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<KolCardWcTag _label={this.state._label} _hasCloser _on={this.on}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</KolCardWcTag>\n\t\t\t\t)}\n\t\t\t</dialog>\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/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n\n\t@State() public state: ModalStates = {\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\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\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\tvalidateWidth(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ModalVariantPropType): void {\n\t\tvalidateModalVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"version":3}

package/dist/components/kol-nav.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as watchBoolean,P as devWarning,d as a11yHintLabelingLandmarks,l as devHint,w as watchValidator}from"./common.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateLabel}from"./label.js";import{t as translate}from"./i18n.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{f as KolLinkWcTag,d as KolButtonWcTag}from"./component-names.js";import{c as clsx}from"./clsx.js";const validateCollapsible=(n,e)=>{watchBoolean(n,"_collapsible",e)},validateHasCompactButton=(n,e)=>{watchBoolean(n,"_hasCompactButton",e)},validateHasIconsWhenExpanded=(n,e)=>{watchBoolean(n,"_hasIconsWhenExpanded",e)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav--horizontal {\n    width: 100%;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list--horizontal {\n    flex-wrap: wrap;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n}",entryIsLink=n=>"string"==typeof n._href,entryIsButton=n=>{var e;return void 0===n._href&&"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onClick)},KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>h("ul",{class:clsx("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--horizontal":0===n.deep&&"horizontal"===n.orientation,"kol-nav__list--vertical":0!==n.deep||"vertical"===n.orientation}),"data-deep":n.deep},n.links.map((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter(e=>e!==n)})}entry(n,e,t,a,i){const o=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return h("div",{class:"kol-nav__entry-wrapper"},entryIsLink(a)?h(KolLinkWcTag,Object.assign({class:"kol-nav__entry kol-nav__entry--link"},a,{_hideLabel:e,_icons:o})):h(KolButtonWcTag,{class:"kol-nav__entry kol-nav__entry--button",_label:a._label,_hideLabel:e,_icons:o,_on:{onClick:(n,e)=>{entryIsButton(a)&&"function"==typeof a._on.onClick?a._on.onClick(n,e):this.handleToggleExpansionClick(a._children)}}}),t?this.expandButton(n,a,i):"")}expandButton(n,e,t){return h(KolButtonWcTag,{class:clsx("kol-nav__expand-button",{"kol-nav__expand-button--expanded":t}),_ariaExpanded:t,_disabled:!n,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${translate(t?"kol-nav-label-close":"kol-nav-label-open",{placeholders:{label:e._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(e._children)}})}li(n,e,t,a,i,o){const l=!!i._active,s=Array.isArray(i._children)&&i._children.length>0,d=Boolean(i._children&&this.state._expandedChildren.includes(i._children));return h("li",{class:clsx("kol-nav__list-item",{"kol-nav__list-item--active":l,"kol-nav__list-item--expanded":d,"kol-nav__list-item--has-children":s}),key:a},this.entry(n,e,s,i,d),d&&h(this.linkList,{collapsible:n,hideLabel:e,deep:t+1,links:i._children||[],orientation:o}))}initializeExpandedChildren(){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[]});const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,t=!0===this.state._hideLabel,a=this.state._orientation;return h("div",{key:"1768f2d1d6794f07607ad8a9f3953a4f17d3cd06",class:clsx("kol-nav",`kol-nav--${a}`,{"kol-nav--is-compact":this.state._hideLabel})},h("nav",{key:"6fceaf6abe991a38a3c4bb98741c9e1c5ad2f11a",class:"kol-nav__navigation","aria-label":this.state._label,id:"nav"},h(this.linkList,{key:"5ee2d35517877fad58f3c37446a88a4753a80bf5",collapsible:e,hideLabel:t,deep:0,links:this.state._links,orientation:a})),n&&h("div",{key:"d8b7bcb8d56bad5fadc02fc6362d84c597c5f0c8",class:"kol-nav__compact"},h(KolButtonWcTag,{key:"a6e055cb523095f7dfeed9edc1fd4a847973cc55",class:"kol-nav__toggle-button",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_buttonVariant:"ghost"})))}validateCollapsible(n){validateCollapsible(this,n)}validateHasCompactButton(n){validateHasCompactButton(this,n)}validateHasIconsWhenExpanded(n){validateHasIconsWhenExpanded(this,n)}validateHideLabel(n){validateHideLabel(this,n)}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolNav",this,n),devHint("[KolNav] The navigation structure is not yet validated recursively."),this.initializeExpandedChildren()}validateOrientation(n){watchValidator(this,"_orientation",n=>"horizontal"===n||"vertical"===n,new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hasIconsWhenExpanded:[4,"_has-icons-when-expanded"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],_orientation:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav"].forEach(n=>{if("kol-nav"===n)customElements.get(n)||customElements.define(n,KolNav$1)})}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as watchBoolean,P as devWarning,d as a11yHintLabelingLandmarks,l as devHint,w as watchValidator}from"./common.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateLabel}from"./label.js";import{t as translate}from"./i18n.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{f as KolLinkWcTag,d as KolButtonWcTag}from"./component-names.js";import{c as clsx}from"./clsx.js";import{n as nonce}from"./dev.utils.js";const validateCollapsible=(n,e)=>{watchBoolean(n,"_collapsible",e)},validateHasCompactButton=(n,e)=>{watchBoolean(n,"_hasCompactButton",e)},validateHasIconsWhenExpanded=(n,e)=>{watchBoolean(n,"_hasIconsWhenExpanded",e)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav--horizontal {\n    width: 100%;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list--horizontal {\n    flex-wrap: wrap;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n  .kol-span {\n    width: 100%;\n  }\n  .kol-span__container {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .kol-span__container .kol-span__label {\n    flex: 1;\n  }\n}",entryIsLink=n=>"string"==typeof n._href,entryIsButton=n=>{var e;return void 0===n._href&&"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onClick)},KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>h("ul",{class:clsx("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--horizontal":0===n.deep&&"horizontal"===n.orientation,"kol-nav__list--vertical":0!==n.deep||"vertical"===n.orientation}),"data-deep":n.deep,id:n.id},n.links.map((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation,n.id))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter(e=>e!==n)})}entry(n,e,t,i,a,o){var l;const s={left:this.state._hasIconsWhenExpanded||this.state._hideLabel?(null===(l=i._icons)||void 0===l?void 0:l.toString())||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0,right:n&&t?"codicon codicon-"+(a?"remove":"add"):void 0};return h("div",{class:"kol-nav__entry-wrapper"},entryIsLink(i)?h(KolLinkWcTag,Object.assign({class:clsx("kol-nav__entry kol-nav__entry--link",{"kol-nav__entry--collapsible":n})},i,{_hideLabel:e,_icons:s,_ariaControls:n&&t&&a?o:void 0,_ariaExpanded:n&&t?a:void 0})):h(KolButtonWcTag,{class:clsx("kol-nav__entry kol-nav__entry--button",{"kol-nav__entry--collapsible":n}),_label:i._label,_hideLabel:e,_icons:s,_ariaControls:n&&t&&a?o:void 0,_ariaExpanded:n&&t?a:void 0,_on:{onClick:(n,e)=>{entryIsButton(i)&&"function"==typeof i._on.onClick&&i._on.onClick(n,e),this.handleToggleExpansionClick(i._children)}}}))}li(n,e,t,i,a,o,l){const s=!!a._active,d=Array.isArray(a._children)&&a._children.length>0,r=Boolean(a._children&&this.state._expandedChildren.includes(a._children)),c=l+"_"+t+"_"+i;return h("li",{class:clsx("kol-nav__list-item",{"kol-nav__list-item--active":s,"kol-nav__list-item--expanded":r,"kol-nav__list-item--has-children":d}),key:i},this.entry(n,e,d,a,r,c),r&&h(this.linkList,{collapsible:n,hideLabel:e,deep:t+1,links:a._children||[],orientation:o,id:c}))}initializeExpandedChildren(){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[]});const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,t=!0===this.state._hideLabel,i=this.state._orientation,a="kol-nav-"+nonce();return h("div",{key:"953b90192368f67370123c89c5502209e0928be5",class:clsx("kol-nav",`kol-nav--${i}`,{"kol-nav--is-compact":this.state._hideLabel})},h("nav",{key:"42f841544dde2ddd8340e0bb705c94f6212c6d6d",class:"kol-nav__navigation","aria-label":this.state._label,id:"nav"},h(this.linkList,{key:"70c345730d6e3d66bd8d05c62b87eeea26fa9d79",collapsible:e,hideLabel:t,deep:0,links:this.state._links,orientation:i,id:a})),n&&h("div",{key:"d8a072335ea4b41980d0b7b556aa4e29b1cc1eda",class:"kol-nav__compact"},h(KolButtonWcTag,{key:"b9e6b197b9fe311696f03b640b8c23f291cb18fc",class:"kol-nav__toggle-button",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_buttonVariant:"ghost"})))}validateCollapsible(n){validateCollapsible(this,n)}validateHasCompactButton(n){validateHasCompactButton(this,n)}validateHasIconsWhenExpanded(n){validateHasIconsWhenExpanded(this,n)}validateHideLabel(n){validateHideLabel(this,n)}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolNav",this,n),devHint("[KolNav] The navigation structure is not yet validated recursively."),this.initializeExpandedChildren()}validateOrientation(n){watchValidator(this,"_orientation",n=>"horizontal"===n||"vertical"===n,new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hasIconsWhenExpanded:[4,"_has-icons-when-expanded"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],_orientation:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav"].forEach(n=>{if("kol-nav"===n)customElements.get(n)||customElements.define(n,KolNav$1)})}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-nav.js","mappings":"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","names":["KolNav","__stencil_proxyCustomElement"],"sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type CollapsiblePropType = boolean;\n\n/**\n * Defines if navigation nodes can be collapsed or not.\n */\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/* validator */\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\ntype HasCompactButtonPropType = boolean;\n\n/**\n * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n */\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/* validator */\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/**\n * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n */\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/* validator */\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-nav {\n\t\t$root: &;\n\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\n\t\t&--horizontal {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t&__navigation {\n\t\t\t#{$root}:not(#{$root}--is-compact) & {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\n\t\t&__list {\n\t\t\tdisplay: flex;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\n\t\t\t&--vertical {\n\t\t\t\tflex-direction: column;\n\t\t\t}\n\n\t\t\t&--horizontal {\n\t\t\t\tflex-wrap: wrap;\n\t\t\t}\n\t\t}\n\n\t\t&__entry-wrapper {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t&__entry {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.kol-button {\n\t\ttext-align: left;\n\t}\n}\n","import type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tdevWarning,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { StencilUnknown } from '../../schema';\nimport clsx from 'clsx';\nimport type { OrientationPropType } from '../../schema/props/orientation';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tentry: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean,\n\t): JSX.Element {\n\t\tconst icons =\n\t\t\tthis.state._hasIconsWhenExpanded || this.state._hideLabel\n\t\t\t\t? entry._icons || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)\n\t\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div class=\"kol-nav__entry-wrapper\">\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag class=\"kol-nav__entry kol-nav__entry--link\" {...entry} _hideLabel={hideLabel} _icons={icons} />\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-nav__entry kol-nav__entry--button\"\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, entry as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass={clsx('kol-nav__expand-button', {\n\t\t\t\t\t'kol-nav__expand-button--expanded': expanded,\n\t\t\t\t})}\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icons={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`${expanded ? translate('kol-nav-label-close', { placeholders: { label: link._label } }) : translate('kol-nav-label-open', { placeholders: { label: link._label } })}`}\n\t\t\t\t_on={{ onClick: () => this.handleToggleExpansionClick(link._children) }}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: OrientationPropType,\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={clsx('kol-nav__list-item', {\n\t\t\t\t\t'kol-nav__list-item--active': active,\n\t\t\t\t\t'kol-nav__list-item--expanded': expanded,\n\t\t\t\t\t'kol-nav__list-item--has-children': hasChildren,\n\t\t\t\t})}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, expanded)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children || []} orientation={orientation} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: HideLabelPropType;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: OrientationPropType;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul\n\t\t\t\tclass={clsx('kol-nav__list', {\n\t\t\t\t\t'kol-nav__list--nested': props.deep > 0,\n\t\t\t\t\t'kol-nav__list--horizontal': props.deep === 0 && props.orientation === 'horizontal',\n\t\t\t\t\t'kol-nav__list--vertical': props.deep !== 0 || props.orientation === 'vertical',\n\t\t\t\t})}\n\t\t\t\tdata-deep={props.deep}\n\t\t\t>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\n\t\t//Reset expandedChildren before recalculation\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [],\n\t\t};\n\t\t/**\n\t\t * Recursively process branches and expand branches which are active or have active children somewhere in the tree.\n\t\t * @param {ButtonOrLinkOrTextWithChildrenProps} branch\n\t\t * @return boolean - true indicates that the current branch or a child branch is active\n\t\t */\n\t\tconst handleBranch = (branch: ButtonOrLinkOrTextWithChildrenProps) => {\n\t\t\tif (branch._active) {\n\t\t\t\tif (branch._children) {\n\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t} else if (branch._children) {\n\t\t\t\tfor (const childBranch of branch._children) {\n\t\t\t\t\tif (handleBranch(childBranch)) {\n\t\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\tthis.state._links.forEach(handleBranch);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={clsx('kol-nav', `kol-nav--${orientation}`, {\n\t\t\t\t\t'kol-nav--is-compact': this.state._hideLabel,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<nav class=\"kol-nav__navigation\" aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t</nav>\n\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t<div class=\"kol-nav__compact\">\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-nav__toggle-button\"\n\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\t\t\t\t\t\t\t_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t_buttonVariant=\"ghost\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t */\n\t@Prop() public _hasIconsWhenExpanded?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\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/**\n\t * Defines the list of links, buttons or texts to render.\n\t */\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType = 'vertical';\n\n\t@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t\t_expandedChildren: [],\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] The navigation structure is not yet validated recursively.`);\n\t\t//Re-initialize expansion on links change\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//     { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//     {\n//       _active: true,\n//       _label: '3 Navigationspunkt',\n//       _href: '#abc',\n//       _icons: 'codicon codicon-folder-closed',\n//       _children: [\n//         { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//         { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//         {\n//           _active: true,\n//           _label: '3.3 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n//             { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         {\n//           _label: '3.4 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n//             { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         { _label: '3.5 Navigationspunkt', _href: '#abc' },\n//       ],\n//     },\n//     { _label: '4 Navigationspunkt', _href: '#abc' },\n//   ])\n// );\n"],"version":3}
+{"file":"kol-nav.js","mappings":"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","names":["KolNav","__stencil_proxyCustomElement"],"sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type CollapsiblePropType = boolean;\n\n/**\n * Defines if navigation nodes can be collapsed or not.\n */\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/* validator */\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\ntype HasCompactButtonPropType = boolean;\n\n/**\n * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n */\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/* validator */\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/**\n * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n */\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/* validator */\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-nav {\n\t\t$root: &;\n\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\n\t\t&--horizontal {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t&__navigation {\n\t\t\t#{$root}:not(#{$root}--is-compact) & {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\n\t\t&__list {\n\t\t\tdisplay: flex;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\n\t\t\t&--vertical {\n\t\t\t\tflex-direction: column;\n\t\t\t}\n\n\t\t\t&--horizontal {\n\t\t\t\tflex-wrap: wrap;\n\t\t\t}\n\t\t}\n\n\t\t&__entry-wrapper {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t&__entry {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.kol-button {\n\t\ttext-align: left;\n\t}\n\n\t.kol-span {\n\t\twidth: 100%;\n\n\t\t&__container {\n\t\t\twidth: 100%;\n\t\t\tjustify-content: flex-start;\n\n\t\t\t.kol-span__label {\n\t\t\t\tflex: 1;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tdevWarning,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { StencilUnknown } from '../../schema';\nimport clsx from 'clsx';\nimport type { OrientationPropType } from '../../schema/props/orientation';\nimport { nonce } from '../../utils/dev.utils';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tentry: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean,\n\t\tariaID: string,\n\t): JSX.Element {\n\t\tconst icons = {\n\t\t\tleft:\n\t\t\t\tthis.state._hasIconsWhenExpanded || this.state._hideLabel\n\t\t\t\t\t? entry._icons?.toString() || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)\n\t\t\t\t\t: undefined,\n\t\t\tright: collapsible && hasChildren ? 'codicon codicon-' + (expanded ? 'remove' : 'add') : undefined,\n\t\t};\n\n\t\treturn (\n\t\t\t<div class=\"kol-nav__entry-wrapper\">\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-nav__entry kol-nav__entry--link', {\n\t\t\t\t\t\t\t'kol-nav__entry--collapsible': collapsible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{...entry}\n\t\t\t\t\t\t_hideLabel={hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_ariaControls={collapsible && hasChildren && expanded ? ariaID : undefined}\n\t\t\t\t\t\t_ariaExpanded={collapsible && hasChildren ? expanded : undefined}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-nav__entry kol-nav__entry--button', {\n\t\t\t\t\t\t\t'kol-nav__entry--collapsible': collapsible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_ariaControls={collapsible && hasChildren && expanded ? ariaID : undefined}\n\t\t\t\t\t\t_ariaExpanded={collapsible && hasChildren ? expanded : undefined}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: OrientationPropType,\n\t\tariaIDparent: string,\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\tconst ariaID = ariaIDparent + '_' + deep + '_' + index;\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={clsx('kol-nav__list-item', {\n\t\t\t\t\t'kol-nav__list-item--active': active,\n\t\t\t\t\t'kol-nav__list-item--expanded': expanded,\n\t\t\t\t\t'kol-nav__list-item--has-children': hasChildren,\n\t\t\t\t})}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, expanded, ariaID)}\n\t\t\t\t{expanded && (\n\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children || []} orientation={orientation} id={ariaID} />\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: HideLabelPropType;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: OrientationPropType;\n\t\tid: string;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul\n\t\t\t\tclass={clsx('kol-nav__list', {\n\t\t\t\t\t'kol-nav__list--nested': props.deep > 0,\n\t\t\t\t\t'kol-nav__list--horizontal': props.deep === 0 && props.orientation === 'horizontal',\n\t\t\t\t\t'kol-nav__list--vertical': props.deep !== 0 || props.orientation === 'vertical',\n\t\t\t\t})}\n\t\t\t\tdata-deep={props.deep}\n\t\t\t\tid={props.id}\n\t\t\t>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation, props.id);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\n\t\t//Reset expandedChildren before recalculation\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [],\n\t\t};\n\t\t/**\n\t\t * Recursively process branches and expand branches which are active or have active children somewhere in the tree.\n\t\t * @param {ButtonOrLinkOrTextWithChildrenProps} branch\n\t\t * @return boolean - true indicates that the current branch or a child branch is active\n\t\t */\n\t\tconst handleBranch = (branch: ButtonOrLinkOrTextWithChildrenProps) => {\n\t\t\tif (branch._active) {\n\t\t\t\tif (branch._children) {\n\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t} else if (branch._children) {\n\t\t\t\tfor (const childBranch of branch._children) {\n\t\t\t\t\tif (handleBranch(childBranch)) {\n\t\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\tthis.state._links.forEach(handleBranch);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\tconst id = 'kol-nav-' + nonce();\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={clsx('kol-nav', `kol-nav--${orientation}`, {\n\t\t\t\t\t'kol-nav--is-compact': this.state._hideLabel,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<nav class=\"kol-nav__navigation\" aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation} id={id}></this.linkList>\n\t\t\t\t</nav>\n\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t<div class=\"kol-nav__compact\">\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-nav__toggle-button\"\n\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\t\t\t\t\t\t\t_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t_buttonVariant=\"ghost\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t */\n\t@Prop() public _hasIconsWhenExpanded?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\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/**\n\t * Defines the list of links, buttons or texts to render.\n\t */\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType = 'vertical';\n\n\t@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t\t_expandedChildren: [],\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] The navigation structure is not yet validated recursively.`);\n\t\t//Re-initialize expansion on links change\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//     { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//     {\n//       _active: true,\n//       _label: '3 Navigationspunkt',\n//       _href: '#abc',\n//       _icons: 'codicon codicon-folder-closed',\n//       _children: [\n//         { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//         { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//         {\n//           _active: true,\n//           _label: '3.3 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n//             { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         {\n//           _label: '3.4 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n//             { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         { _label: '3.5 Navigationspunkt', _href: '#abc' },\n//       ],\n//     },\n//     { _label: '4 Navigationspunkt', _href: '#abc' },\n//   ])\n// );\n"],"version":3}

package/dist/components/kol-pagination.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{i as KolPaginationWcTag}from"./component-names.js";const defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-pagination {\n    display: grid;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n}",KolPagination$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top"}render(){return h(KolPaginationWcTag,{key:"14b17e953d67caaa9892271b9c19d40044558418",_boundaryCount:this._boundaryCount,_label:this._label,_customClass:this._customClass,_on:this._on,_hasButtons:this._hasButtons,_page:this._page,_pageSize:this._pageSize,_pageSizeOptions:this._pageSizeOptions,_siblingCount:this._siblingCount,_tooltipAlign:this._tooltipAlign,_max:this._max})}static get style(){return{default:defaultStyleCss}}},[289,"kol-pagination",{_boundaryCount:[2,"_boundary-count"],_customClass:[1,"_custom-class"],_label:[1],_hasButtons:[8,"_has-buttons"],_page:[2],_pageSize:[1026,"_page-size"],_pageSizeOptions:[1,"_page-size-options"],_on:[16],_siblingCount:[2,"_sibling-count"],_tooltipAlign:[1,"_tooltip-align"],_max:[2]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-pagination"].forEach(n=>{if("kol-pagination"===n)customElements.get(n)||customElements.define(n,KolPagination$1)})}const KolPagination=KolPagination$1,defineCustomElement=defineCustomElement$1;export{KolPagination,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{i as KolPaginationWcTag}from"./component-names.js";const defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-pagination {\n    display: grid;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n}",KolPagination$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top"}render(){return h(KolPaginationWcTag,{key:"14b17e953d67caaa9892271b9c19d40044558418",_boundaryCount:this._boundaryCount,_label:this._label,_customClass:this._customClass,_on:this._on,_hasButtons:this._hasButtons,_page:this._page,_pageSize:this._pageSize,_pageSizeOptions:this._pageSizeOptions,_siblingCount:this._siblingCount,_tooltipAlign:this._tooltipAlign,_max:this._max})}static get style(){return{default:defaultStyleCss}}},[289,"kol-pagination",{_boundaryCount:[2,"_boundary-count"],_customClass:[1,"_custom-class"],_label:[1],_hasButtons:[8,"_has-buttons"],_page:[2],_pageSize:[1026,"_page-size"],_pageSizeOptions:[1,"_page-size-options"],_on:[16],_siblingCount:[2,"_sibling-count"],_tooltipAlign:[1,"_tooltip-align"],_max:[2]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-pagination"].forEach(n=>{if("kol-pagination"===n)customElements.get(n)||customElements.define(n,KolPagination$1)})}const KolPagination=KolPagination$1,defineCustomElement=defineCustomElement$1;export{KolPagination,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-pagination.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,k7MAAk7M;;MCuB77MA,eAAa,GAAAC,kBAAA,CAAA,MAAA,aAAA,SAAA,WAAA,CAAA;AAP1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AA6BgB,QAAA,IAAc,CAAA,cAAA,GAAY,CAAC;AAe3B,QAAA,IAAW,CAAA,WAAA,GAAgD,IAAI;AAU9B,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;AAK9C,QAAA,IAAgB,CAAA,gBAAA,GAA0B,EAAE;AAU5C,QAAA,IAAa,CAAA,aAAA,GAAY,CAAC;AAK1B,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAM3D;IAxEO,MAAM,GAAA;AACZ,QAAA,QACC,CAAA,CAAC,kBAAkB,EAAA,EAAA,GAAA,EAAA,0CAAA,EAClB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CACM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolPagination","__stencil_proxyCustomElement"],"sources":["src/components/pagination/style.scss?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/kol-pagination-mixin' as *;\n\n@layer kol-component {\n\t@include kol-pagination-styles;\n}\n","import type {\n\tCustomClassPropType,\n\tKoliBriPaginationButtonCallbacks,\n\tLabelPropType,\n\tMaxPropType,\n\tPaginationHasButton,\n\tPaginationProps,\n\tStringified,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport { KolPaginationWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements PaginationProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPaginationWcTag\n\t\t\t\t_boundaryCount={this._boundaryCount}\n\t\t\t\t_label={this._label}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_on={this._on}\n\t\t\t\t_hasButtons={this._hasButtons}\n\t\t\t\t_page={this._page}\n\t\t\t\t_pageSize={this._pageSize}\n\t\t\t\t_pageSizeOptions={this._pageSizeOptions}\n\t\t\t\t_siblingCount={this._siblingCount}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_max={this._max}\n\t\t\t></KolPaginationWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the amount of pages to show next to the outer arrow buttons.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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/**\n\t * Defines which navigation buttons to render (first, last, next, previous buttons).\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Defines the current page.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Defines the amount of entries to show per page.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Defines the options for the page-size-select.\n\t */\n\t@Prop() public _pageSizeOptions: Stringified<number[]> = [];\n\n\t/**\n\t * Gibt an, auf welche Callback-Events reagiert werden.\n\t */\n\t@Prop() public _on!: KoliBriPaginationButtonCallbacks;\n\n\t/**\n\t * Defines the amount of pages to show next to the current page.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines the maximum number of pages.\n\t */\n\t@Prop() public _max!: MaxPropType;\n}\n"],"version":3}
+{"file":"kol-pagination.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,s8MAAs8M;;MCuBj9MA,eAAa,GAAAC,kBAAA,CAAA,MAAA,aAAA,SAAA,WAAA,CAAA;AAP1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AA6BgB,QAAA,IAAc,CAAA,cAAA,GAAY,CAAC;AAe3B,QAAA,IAAW,CAAA,WAAA,GAAgD,IAAI;AAU9B,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;AAK9C,QAAA,IAAgB,CAAA,gBAAA,GAA0B,EAAE;AAU5C,QAAA,IAAa,CAAA,aAAA,GAAY,CAAC;AAK1B,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAM3D;IAxEO,MAAM,GAAA;AACZ,QAAA,QACC,CAAA,CAAC,kBAAkB,EAAA,EAAA,GAAA,EAAA,0CAAA,EAClB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CACM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolPagination","__stencil_proxyCustomElement"],"sources":["src/components/pagination/style.scss?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/kol-pagination-mixin' as *;\n\n@layer kol-component {\n\t@include kol-pagination-styles;\n}\n","import type {\n\tCustomClassPropType,\n\tKoliBriPaginationButtonCallbacks,\n\tLabelPropType,\n\tMaxPropType,\n\tPaginationHasButton,\n\tPaginationProps,\n\tStringified,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport { KolPaginationWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements PaginationProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPaginationWcTag\n\t\t\t\t_boundaryCount={this._boundaryCount}\n\t\t\t\t_label={this._label}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_on={this._on}\n\t\t\t\t_hasButtons={this._hasButtons}\n\t\t\t\t_page={this._page}\n\t\t\t\t_pageSize={this._pageSize}\n\t\t\t\t_pageSizeOptions={this._pageSizeOptions}\n\t\t\t\t_siblingCount={this._siblingCount}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_max={this._max}\n\t\t\t></KolPaginationWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the amount of pages to show next to the outer arrow buttons.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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/**\n\t * Defines which navigation buttons to render (first, last, next, previous buttons).\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Defines the current page.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Defines the amount of entries to show per page.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Defines the options for the page-size-select.\n\t */\n\t@Prop() public _pageSizeOptions: Stringified<number[]> = [];\n\n\t/**\n\t * Gibt an, auf welche Callback-Events reagiert werden.\n\t */\n\t@Prop() public _on!: KoliBriPaginationButtonCallbacks;\n\n\t/**\n\t * Defines the amount of pages to show next to the current page.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines the maximum number of pages.\n\t */\n\t@Prop() public _max!: MaxPropType;\n}\n"],"version":3}

package/dist/components/kol-popover-button.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{k as KolPopoverButtonWcTag}from"./component-names.js";const defaultStyleCss="@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    width: 100%;\n    margin: auto;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n}",KolPopoverButton$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.catchRef=n=>{this.ref=n},this._disabled=!1,this._hideLabel=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}render(){return h(KolPopoverButtonWcTag,{key:"874bfd4d3738aee7db007df7f1f072a312bda82b",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_popoverAlign:this._popoverAlign,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},h("slot",{key:"3e3353a2aa09a4ab53145811a9baaf69c6eb5fe7",name:"expert",slot:"expert"}),h("slot",{key:"ae349ddc431b20ba527dac3c30edf1ba9e61cb2d"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-popover-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_popoverAlign:[1,"_popover-align"],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],hidePopover:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-popover-button"].forEach(n=>{if("kol-popover-button"===n)customElements.get(n)||customElements.define(n,KolPopoverButton$1)})}const KolPopoverButton=KolPopoverButton$1,defineCustomElement=defineCustomElement$1;export{KolPopoverButton,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{k as KolPopoverButtonWcTag}from"./component-names.js";const defaultStyleCss="@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    width: 100%;\n    margin: auto;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n}",KolPopoverButton$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.catchRef=n=>{this.ref=n},this._disabled=!1,this._hideLabel=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}render(){return h(KolPopoverButtonWcTag,{key:"874bfd4d3738aee7db007df7f1f072a312bda82b",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_popoverAlign:this._popoverAlign,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},h("slot",{key:"3e3353a2aa09a4ab53145811a9baaf69c6eb5fe7",name:"expert",slot:"expert"}),h("slot",{key:"ae349ddc431b20ba527dac3c30edf1ba9e61cb2d"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-popover-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_popoverAlign:[1,"_popover-align"],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],hidePopover:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-popover-button"].forEach(n=>{if("kol-popover-button"===n)customElements.get(n)||customElements.define(n,KolPopoverButton$1)})}const KolPopoverButton=KolPopoverButton$1,defineCustomElement=defineCustomElement$1;export{KolPopoverButton,defineCustomElement};

package/dist/components/kol-popover-button.js.map

@@ -1 +1 @@
-{"file":"kol-popover-button.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,+lNAA+lN;;MC+B1mNA,kBAAgB,GAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAP7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAmBS,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAAmC,KAAI;AAC1D,YAAA,IAAI,CAAC,GAAG,GAAG,GAAG;AACf,SAAC;AA6Dc,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AA+B5B,QAAA,IAAa,CAAA,aAAA,GAA0B,QAAQ;AA4B/C,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAUrC,QAAA,IAAQ,CAAA,QAAA,GAA2B,QAAQ;AAC1D;AArJO,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,MAAA,IAAI,CAAC,GAAG,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;IAOtB,MAAM,GAAA;AACZ,QAAA,QACC,CAAA,CAAC,qBAAqB,EAAA,EAAA,GAAA,EAAA,0CAAA,EACrB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolPopoverButton","__stencil_proxyCustomElement"],"sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\n/**\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements PopoverButtonProps {\n\tprivate ref?: HTMLKolPopoverButtonWcElement;\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ref?.hidePopover();\n\t}\n\n\tprivate catchRef = (ref?: HTMLKolPopoverButtonWcElement) => {\n\t\tthis.ref = ref;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.catchRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component’s interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @deprecated Will be removed in the next major version.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Defines the role of the components primary element.\n\t *\n\t * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"version":3}
+{"file":"kol-popover-button.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,mnNAAmnN;;MC+B9nNA,kBAAgB,GAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAP7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAmBS,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAAmC,KAAI;AAC1D,YAAA,IAAI,CAAC,GAAG,GAAG,GAAG;AACf,SAAC;AA6Dc,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AA+B5B,QAAA,IAAa,CAAA,aAAA,GAA0B,QAAQ;AA4B/C,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAUrC,QAAA,IAAQ,CAAA,QAAA,GAA2B,QAAQ;AAC1D;AArJO,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,MAAA,IAAI,CAAC,GAAG,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;IAOtB,MAAM,GAAA;AACZ,QAAA,QACC,CAAA,CAAC,qBAAqB,EAAA,EAAA,GAAA,EAAA,0CAAA,EACrB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolPopoverButton","__stencil_proxyCustomElement"],"sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\n/**\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements PopoverButtonProps {\n\tprivate ref?: HTMLKolPopoverButtonWcElement;\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ref?.hidePopover();\n\t}\n\n\tprivate catchRef = (ref?: HTMLKolPopoverButtonWcElement) => {\n\t\tthis.ref = ref;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.catchRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component’s interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @deprecated Will be removed in the next major version.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Defines the role of the components primary element.\n\t *\n\t * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"version":3}

package/dist/components/kol-progress.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{e as watchString,w as watchValidator,N as watchNumber}from"./common.js";import{v as validateLabel}from"./label.js";const validateUnit=(e,t)=>{watchString(e,"_unit",t)},progressVariantOptions=["bar","cycle"],isProgressVariantPropType=e=>"string"==typeof e&&progressVariantOptions.includes(e),validateVariantProgress=(e,t)=>{watchValidator(e,"_variant",isProgressVariantPropType,new Set(progressVariantOptions),t)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-progress__bar {\n    display: grid;\n    column-gap: 0.05rem;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: #0075ff;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",CycleSvg=({state:e})=>h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({state:e})=>{const t=e._value/e._max*100;return h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),h("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${t}% - 4px)`}}))},createProgressSVG=e=>{switch(e._variant){case"cycle":return h(CycleSvg,{state:e});case"bar":return h(BarSvg,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},KolProgress$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this._unit="%",this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){const e="%"===this.state._unit,t=e?`${Math.round(this.state._liveValue/this.state._max*100)}`:this.state._liveValue,n=e?Math.round(this.state._value/this.state._max*100):this.state._value;return h("div",{key:"30c2914505a2921a767ffb7b9e8e120bf2c0f371",class:"kol-progress"},h("div",{key:"b78153292354cb734b5ce72cb024b7b05ff65ecb","aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===this.state._variant,"kol-progress__bar":"bar"===this.state._variant}},"bar"===this.state._variant&&this.state._label&&h("div",{key:"d19dd3020c5e756eee36d11ed3f108d74ae2ad3b",class:"kol-progress__bar-label"},this.state._label),createProgressSVG(this.state),"cycle"===this.state._variant&&h("div",{key:"412a00560e3d04e9eaba630bc18b1b0911a1739e",class:"kol-progress__cycle-text"},this.state._label&&h("div",{key:"6c95c1357dfbfb5e9659081753c19c977ec1d307",class:"kol-progress__cycle-label"},this.state._label),h("div",{key:"654bb1038ac1202cec59740dcfb781a83e7f3b0e",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"===this.state._variant&&h("div",{key:"79f03f81f500e7806c470f7e862e84d923ca019a",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"===this.state._variant&&h("div",{key:"91e7c2d27ad4734119d125b7839d8c64ac67b089",class:"kol-progress__bar-unit"},this.state._unit)),h("progress",{key:"036f25010c9d5581020aa33c8dd2c2e562a421be",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),h("span",{key:"9704c069d644b44000003e1147395f930e634dd7","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),watchNumber(this,"_max",e,{required:!0})}validateUnit(e){validateUnit(this,e)}validateValue(e){"number"!=typeof e&&(e=0),watchNumber(this,"_value",e,{required:!0})}validateVariant(e){validateVariantProgress(this,e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}),this.interval=setInterval(()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))},5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-progress",{_label:[1],_max:[2],_unit:[1],_value:[2],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-progress"].forEach(e=>{if("kol-progress"===e)customElements.get(e)||customElements.define(e,KolProgress$1)})}const KolProgress=KolProgress$1,defineCustomElement=defineCustomElement$1;export{KolProgress,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{h as watchString,w as watchValidator,N as watchNumber}from"./common.js";import{v as validateLabel}from"./label.js";const validateUnit=(e,t)=>{watchString(e,"_unit",t)},progressVariantOptions=["bar","cycle"],isProgressVariantPropType=e=>"string"==typeof e&&progressVariantOptions.includes(e),validateVariantProgress=(e,t)=>{watchValidator(e,"_variant",isProgressVariantPropType,new Set(progressVariantOptions),t)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-progress__bar {\n    display: grid;\n    column-gap: 0.05rem;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: #0075ff;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",CycleSvg=({state:e})=>h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({state:e})=>{const t=e._value/e._max*100;return h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),h("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${t}% - 4px)`}}))},createProgressSVG=e=>{switch(e._variant){case"cycle":return h(CycleSvg,{state:e});case"bar":return h(BarSvg,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},KolProgress$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this._unit="%",this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){const e="%"===this.state._unit,t=e?`${Math.round(this.state._liveValue/this.state._max*100)}`:this.state._liveValue,n=e?Math.round(this.state._value/this.state._max*100):this.state._value;return h("div",{key:"30c2914505a2921a767ffb7b9e8e120bf2c0f371",class:"kol-progress"},h("div",{key:"b78153292354cb734b5ce72cb024b7b05ff65ecb","aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===this.state._variant,"kol-progress__bar":"bar"===this.state._variant}},"bar"===this.state._variant&&this.state._label&&h("div",{key:"d19dd3020c5e756eee36d11ed3f108d74ae2ad3b",class:"kol-progress__bar-label"},this.state._label),createProgressSVG(this.state),"cycle"===this.state._variant&&h("div",{key:"412a00560e3d04e9eaba630bc18b1b0911a1739e",class:"kol-progress__cycle-text"},this.state._label&&h("div",{key:"6c95c1357dfbfb5e9659081753c19c977ec1d307",class:"kol-progress__cycle-label"},this.state._label),h("div",{key:"654bb1038ac1202cec59740dcfb781a83e7f3b0e",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"===this.state._variant&&h("div",{key:"79f03f81f500e7806c470f7e862e84d923ca019a",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"===this.state._variant&&h("div",{key:"91e7c2d27ad4734119d125b7839d8c64ac67b089",class:"kol-progress__bar-unit"},this.state._unit)),h("progress",{key:"036f25010c9d5581020aa33c8dd2c2e562a421be",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),h("span",{key:"9704c069d644b44000003e1147395f930e634dd7","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),watchNumber(this,"_max",e,{required:!0})}validateUnit(e){validateUnit(this,e)}validateValue(e){"number"!=typeof e&&(e=0),watchNumber(this,"_value",e,{required:!0})}validateVariant(e){validateVariantProgress(this,e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}),this.interval=setInterval(()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))},5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-progress",{_label:[1],_max:[2],_unit:[1],_value:[2],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-progress"].forEach(e=>{if("kol-progress"===e)customElements.get(e)||customElements.define(e,KolProgress$1)})}const KolProgress=KolProgress$1,defineCustomElement=defineCustomElement$1;export{KolProgress,defineCustomElement};