@public-ui/components 4.0.0-alpha.0 → 4.0.0-alpha.2

package/dist/components/kol-avatar.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{d as KolAvatarWcTag}from"./component-names.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n    /*theme?*/\n    width: calc(100rem / var(--kolibri-root-font-size, 16));\n    height: calc(100rem / var(--kolibri-root-font-size, 16));\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*theme?*/\n    background-color: #d3d3d3;\n    font-size: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolAvatarDefaultStyle0=defaultStyleCss,KolAvatar$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._src=void 0,this._label=void 0}render(){return h(Host,{key:"177cf2f61660902db5c1680e3e10fc7f3c567695",class:"kol-avatar"},h(KolAvatarWcTag,{key:"9103d11ec31279584865dd3acf92a9ef0d04ca61",_src:this._src,_label:this._label}))}static get style(){return{default:KolAvatarDefaultStyle0}}},[33,"kol-avatar",{_src:[1],_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar"].forEach((n=>{if("kol-avatar"===n)customElements.get(n)||customElements.define(n,KolAvatar$1)}))}const KolAvatar=KolAvatar$1,defineCustomElement=defineCustomElement$1;export{KolAvatar,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as KolAvatarWcTag}from"./component-names.js";const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\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  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-avatar,\n  .kol-avatar__image,\n  .kol-avatar__initials {\n    border-radius: 50%;\n  }\n  .kol-avatar {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-avatar__image, .kol-avatar__initials {\n    width: 100%;\n    height: 100%;\n  }\n  .kol-avatar__initials {\n    background-color: #d3d3d3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolAvatar$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow()}render(){return h(KolAvatarWcTag,{key:"c4547a5724ed8d947c20de5128227bc71c14d401",_src:this._src,_label:this._label})}static get style(){return{default:defaultStyleCss}}},[289,"kol-avatar",{_src:[1],_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar"].forEach(n=>{if("kol-avatar"===n)customElements.get(n)||customElements.define(n,KolAvatar$1)})}const KolAvatar=KolAvatar$1,defineCustomElement=defineCustomElement$1;export{KolAvatar,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-avatar.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,o4JAAo4J,CAAC;AAC75J,+BAAe,eAAe;;MCYjBA,WAAS;;;;;;;;IACd,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,YAAY,IACvB,EAAC,cAAc,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAmB,CACjE,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAvatar"],"sources":["src/components/avatar/style.scss?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid rem(1);\n\t\t/*theme?*/\n\t\twidth: rem(100);\n\t\theight: rem(100);\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t/*theme?*/\n\t\tbackground-color: #d3d3d3;\n\t\tfont-size: rem(40);\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { AvatarProps } from '../../schema';\nimport { KolAvatarWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements AvatarProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar\">\n\t\t\t\t<KolAvatarWcTag _src={this._src} _label={this._label}></KolAvatarWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"version":3}
+{"file":"kol-avatar.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,ioLAAioL;;MCa5oLA,WAAS,GAAAC,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;;;;;;;;IACd,MAAM,GAAA;QACZ,OAAO,CAAC,CAAA,cAAc,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAvatar","__stencil_proxyCustomElement"],"sources":["src/components/avatar/style.scss?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n\n@layer kol-component {\n\t.kol-avatar,\n\t.kol-avatar__image,\n\t.kol-avatar__initials {\n\t\tborder-radius: 50%;\n\t}\n\n\t.kol-avatar {\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid to-rem(1);\n\t\twidth: to-rem(100);\n\t\theight: to-rem(100);\n\n\t\t&__image,\n\t\t&__initials {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\n\t\t&__initials {\n\t\t\tbackground-color: #d3d3d3;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\n\t\t\tfont-size: to-rem(40);\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport type { AvatarProps } from '../../schema';\nimport { KolAvatarWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements AvatarProps {\n\tpublic render(): JSX.Element {\n\t\treturn <KolAvatarWcTag _src={this._src} _label={this._label}></KolAvatarWcTag>;\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"version":3}

package/dist/components/kol-badge.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{n as nonce}from"./dev.utils2.js";import{a as KolButtonWcTag}from"./component-names.js";import{h as handleColorChange,v as validateColor}from"./color.js";import{K as KolSpanFc}from"./Span.js";import{v as validateIcons}from"./icons.js";import{f as featureHint,o as objectObjectHandler,p as parseJson,s as setState}from"./prop.validators.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  /* :host implicitly inherits font-size, e.g. for usage in headlines */\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span {\n    display: inline-flex;\n    place-items: center;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span > .kol-button-wc button {\n    color: inherit;\n  }\n}",KolBadgeDefaultStyle0=defaultStyleCss;featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.bgColorStr="#000",this.colorStr="#fff",this.id=nonce(),this.handleColorChange=n=>{const t=handleColorChange(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_icons:{}}}renderSmartButton(n){return h(KolButtonWcTag,{_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_variant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return h(Host,{key:"4d1ce86b0851c964d41593bc24f9f4fb31da8f0c",class:"kol-badge"},h("span",{key:"c249ffe90841da052de010c22ca8387f1048d7f6",class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},h(KolSpanFc,{key:"5edf18c99bce32697927b626964fcc2b0bc0d24b",id:n?this.id:void 0,allowMarkdown:!0,icons:this.state._icons,label:this._label}),n&&this.renderSmartButton(this.state._smartButton)))}validateIcons(n){validateIcons(this,n)}validateColor(n){validateColor(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){objectObjectHandler(n,(()=>{try{n=parseJson(n)}catch(n){}setState(this,"_smartButton",n)}))}componentWillLoad(){this.validateIcons(this._icons),this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}}static get style(){return{default:KolBadgeDefaultStyle0}}},[33,"kol-badge",{_color:[1],_icons:[1],_label:[1],_smartButton:[1,"_smart-button"],state:[32]},void 0,{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-badge"].forEach((n=>{if("kol-badge"===n)customElements.get(n)||customElements.define(n,KolBadge$1)}))}const KolBadge=KolBadge$1,defineCustomElement=defineCustomElement$1;export{KolBadge,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{f as featureHint,o as objectObjectHandler,p as parseJson,s as setState}from"./common.js";import{h as handleColorChange,v as validateColor}from"./color.js";import{v as validateIcons}from"./icons.js";import"./Alert.js";import{c as clsx}from"./clsx.js";import{d as KolButtonWcTag}from"./component-names.js";import{K as KolSpanFc}from"./Span.js";import"./i18n.js";import{n as nonce}from"./dev.utils.js";const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\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, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\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-badge {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n  }\n  .kol-badge .kol-badge__smart-button .button {\n    color: inherit;\n  }\n}";featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.bgColorStr="#000",this.colorStr="#fff",this.id=nonce(),this._color="#000",this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_icons:{}},this.handleColorChange=n=>{const t=handleColorChange(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor}}renderSmartButton(n){return h(KolButtonWcTag,{class:"kol-badge__smart-button",_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_buttonVariant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return h("span",{key:"5887c57c800757a960919276d5422054b6d7c17f",class:clsx("kol-badge",{"kol-badge--has-smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton}),style:{backgroundColor:this.bgColorStr,color:this.colorStr}},h(KolSpanFc,{key:"d6650fca7447ba669d77f8c81cfbc70a67622b0b",class:"kol-badge__label",id:n?this.id:void 0,allowMarkdown:!0,icons:this.state._icons,label:this._label}),n&&this.renderSmartButton(this.state._smartButton))}validateIcons(n){validateIcons(this,n)}validateColor(n){validateColor(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){objectObjectHandler(n,()=>{try{n=parseJson(n)}catch(n){}setState(this,"_smartButton",n)})}componentWillLoad(){this.validateIcons(this._icons),this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-badge",{_color:[1],_icons:[1],_label:[1],_smartButton:[1,"_smart-button"],state:[32]},void 0,{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-badge"].forEach(n=>{if("kol-badge"===n)customElements.get(n)||customElements.define(n,KolBadge$1)})}const KolBadge=KolBadge$1,defineCustomElement=defineCustomElement$1;export{KolBadge,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-badge.js","mappings":"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","names":["KolBadge"],"sources":["src/components/badge/style.scss?tag=kol-badge&mode=default&encapsulation=shadow","src/components/badge/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t/* :host implicitly inherits font-size, e.g. for usage in headlines */\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid rem(1);\n\t}\n\n\t:host > span > .kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n","import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { KolSpanFc } from '../../functional-components';\n\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tprivate renderSmartButton(props: ButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t\t_variant={props._variant}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\n\t\treturn (\n\t\t\t<Host class=\"kol-badge\">\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolSpanFc id={hasSmartButton ? this.id : undefined} allowMarkdown icons={this.state._icons} label={this._label} />\n\t\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\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 * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_icons: {},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor as string;\n\t};\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: KoliBriIconsProp): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"version":3}
+{"file":"kol-badge.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,m2MAAm2M;;ACU33M,WAAW,CAAC,CAAqE,mEAAA,CAAA,CAAC;MASrEA,UAAQ,GAAAC,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AAPrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQS,QAAA,IAAU,CAAA,UAAA,GAAG,MAAM;AACnB,QAAA,IAAQ,CAAA,QAAA,GAAG,MAAM;AACR,QAAA,IAAE,CAAA,EAAA,GAAG,KAAK,EAAE;AA0Cd,QAAA,IAAM,CAAA,MAAA,GAA4B,MAAM;QAiBvC,IAAA,CAAA,KAAK,GAAgB;AACpC,YAAA,MAAM,EAAE;AACP,gBAAA,eAAe,EAAE,MAAM;AACvB,gBAAA,eAAe,EAAE,MAAM;AACvB,aAAA;AACD,YAAA,MAAM,EAAE,EAAE;SACV;AAEO,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC,KAAc,KAAI;AAC9C,YAAA,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC;AAC1C,YAAA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC,eAAe;AAC3C,YAAA,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,eAAyB;AACpD,SAAC;AAmCD;AAxGQ,IAAA,iBAAiB,CAAC,KAAkB,EAAA;AAC3C,QAAA,QACC,CAAA,CAAC,cAAc,EAAA,EACd,KAAK,EAAC,yBAAyB,EAC/B,aAAa,EAAE,IAAI,CAAC,EAAE,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,cAAc,EAAE,KAAK,CAAC,QAAQ,EAAA,CACb;;IAIb,MAAM,GAAA;AACZ,QAAA,MAAM,cAAc,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,IAAI;AAEtG,QAAA,QACC,CACC,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;AACxB,gBAAA,6BAA6B,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,IAAI;aAC9G,CAAC,EACF,KAAK,EAAE;gBACN,eAAe,EAAE,IAAI,CAAC,UAAU;gBAChC,KAAK,EAAE,IAAI,CAAC,QAAQ;AACpB,aAAA,EAAA,EAED,CAAA,CAAC,SAAS,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,cAAc,GAAG,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,aAAa,EAAA,IAAA,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAI,CAAA,EAC3I,cAAc,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,YAA2B,CAAC,CAC3E;;AAuCF,IAAA,aAAa,CAAC,KAAwB,EAAA;AAC5C,QAAA,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC;;AAIpB,IAAA,aAAa,CAAC,KAA8B,EAAA;AAClD,QAAA,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;AAC1B,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,KAAK,EAAE;gBACN,WAAW,EAAE,IAAI,CAAC,iBAAiB;AACnC,aAAA;AACD,SAAA,CAAC;;AAII,IAAA,mBAAmB,CAAC,KAA4B,EAAA;AACtD,QAAA,mBAAmB,CAAC,KAAK,EAAE,MAAK;AAC/B,YAAA,IAAI;AACH,gBAAA,KAAK,GAAG,SAAS,CAAc,KAAe,CAAC;;YAE9C,OAAO,CAAC,EAAE;;AAGZ,YAAA,QAAQ,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,CAAC;AACtC,SAAC,CAAC;;IAGI,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;AAC/B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;AAC/B,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolBadge","__stencil_proxyCustomElement"],"sources":["src/components/badge/style.scss?tag=kol-badge&mode=default&encapsulation=shadow","src/components/badge/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-badge {\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid to-rem(1);\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\n\t\t.kol-badge__smart-button {\n\t\t\t.button {\n\t\t\t\tcolor: inherit;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { KolSpanFc } from '../../functional-components';\n\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport clsx from 'clsx';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tprivate renderSmartButton(props: ButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass=\"kol-badge__smart-button\"\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t\t_buttonVariant={props._variant}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclass={clsx('kol-badge', {\n\t\t\t\t\t'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<KolSpanFc class=\"kol-badge__label\" id={hasSmartButton ? this.id : undefined} allowMarkdown icons={this.state._icons} label={this._label} />\n\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}\n\t\t\t</span>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\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 * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_icons: {},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor as string;\n\t};\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: KoliBriIconsProp): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"version":3}

package/dist/components/kol-breadcrumb.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Fragment,Host}from"@stencil/core/internal/client";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{c as KolIconTag,e as KolLinkTag}from"./component-names.js";import{h as a11yHintLabelingLandmarks}from"./prop.validators.js";import{v as validateLabel}from"./label.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",KolBreadcrumbDefaultStyle0=defaultStyleCss,KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return h("li",{key:e},0!==e&&h(KolIconTag,{_label:"",_icons:"codicon codicon-chevron-right"}),e===t?h("span",null,n._hideLabel?h(KolIconTag,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):h(Fragment,null,n._label)):h(KolLinkTag,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return h(Host,{key:"85e3ef39dc640950961b7c46345bc57aab788d97",class:"kol-breadcrumb"},h("nav",{key:"eade5348014e8fc87d23e8a5cedf5ebe5c497bba","aria-label":this.state._label},h("ul",{key:"5690ace0a27f103490c936c50bdf347c7dd0ca61"},0===this.state._links.length&&h("li",{key:"34e1ebe710f535c29ec7e9d27a775909cca34538"},h(KolIconTag,{key:"013e167866aa0f55255bfabafc8b976cbfeb7bf1",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:KolBreadcrumbDefaultStyle0}}},[33,"kol-breadcrumb",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb"].forEach((n=>{if("kol-breadcrumb"===n)customElements.get(n)||customElements.define(n,KolBreadcrumb$1)}))}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Fragment}from"@stencil/core/internal/client";import{d as a11yHintLabelingLandmarks}from"./common.js";import{v as validateLabel}from"./label.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{e as KolIconTag,f as KolLinkWcTag}from"./component-names.js";const defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\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, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\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-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-breadcrumb__icon::part(separator) {\n    font-size: 0.7em;\n    font-weight: 900;\n  }\n  .kol-breadcrumb__icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return h("li",{class:"kol-breadcrumb__list-element",key:e},0!==e&&h(KolIconTag,{class:"kol-breadcrumb__icon",_label:"",_icons:"codicon codicon-chevron-right"}),e===t?h("span",{class:"kol-breadcrumb__list-element-span","aria-current":"page"},n._hideLabel?h(KolIconTag,{class:"kol-breadcrumb__icon",_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):h(Fragment,null,n._label)):h(KolLinkWcTag,Object.assign({class:"kol-breadcrumb__link",_linkVariant:"standalone"},n)))},this.state={_label:"",_links:[]}}render(){return h("nav",{key:"2aa677c03f9df0fcca0ab77dacc43c27c2d16d89",class:"kol-breadcrumb","aria-label":this.state._label},h("ul",{key:"70aad9485b495366f0458769da35c8841111a816",class:"kol-breadcrumb__list"},0===this.state._links.length&&h("li",{key:"b78a562b80efff67fc05e5b9ad0b50c19db2a21d"},h(KolIconTag,{key:"915a3797feadfe8fbb81878a63af7cfd8ef9f60a",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-breadcrumb",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb"].forEach(n=>{if("kol-breadcrumb"===n)customElements.get(n)||customElements.define(n,KolBreadcrumb$1)})}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-breadcrumb.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ojJAAojJ,CAAC;AAC7kJ,mCAAe,eAAe;;MCgBjBA,eAAa;;;;;QACR,eAAU,GAAG,CAAC,IAAyB,EAAE,KAAa;YACtE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/C,QACC,UAAI,GAAG,EAAE,KAAK,IACZ,KAAK,KAAK,CAAC,IAAI,EAAC,UAAU,IAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,+BAA+B,GAAG,EAC9E,KAAK,KAAK,SAAS,IACnB,gBACE,IAAI,CAAC,UAAU,IACf,EAAC,UAAU,IAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAI,KAE3H,kBAAG,IAAI,CAAC,MAAM,CAAI,CAClB,CACK,KAEP,EAAC,UAAU,oBAAK,IAAI,EAAe,CACnC,CACG,EACJ;SACF,CAAC;;;qBA6BwC;YACzC,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;SACV;;IA9BM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC3B,0EAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjC,6DACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,KAC9B,6DACC,EAAC,UAAU,qDAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,sBAAsB,GAAG,WAClD,CACL,EACA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CACnC,CACA,CACA,EACN;KACF;IAkBM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAClC;QACD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;QACH,yBAAyB,CAAC,KAAK,CAAC,CAAC;QACjC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC/B;IAGM,aAAa,CAAC,KAAgC;QACpD,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KAC5C;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEM,oBAAoB;QAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolBreadcrumb"],"sources":["src/components/breadcrumb/style.scss?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\t.kol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\t.kol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n","import type { BreadcrumbAPI, BreadcrumbLinkProps, BreadcrumbStates, LabelPropType, LinkProps, Stringified } from '../../schema';\nimport { a11yHintLabelingLandmarks, validateLabel } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolIconTag, KolLinkTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements BreadcrumbAPI {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<li key={index}>\n\t\t\t\t{index !== 0 && <KolIconTag _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{link._hideLabel ? (\n\t\t\t\t\t\t\t<KolIconTag _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>{link._label}</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<KolLinkTag {...link}></KolLinkTag>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-breadcrumb\">\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<KolIconTag _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\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 combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: BreadcrumbStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\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<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}
+{"file":"kol-breadcrumb.js","mappings":"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","names":["KolBreadcrumb","__stencil_proxyCustomElement"],"sources":["src/components/breadcrumb/style.scss?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../@shared/kol-link-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@layer kol-component {\n\t@include kol-link-styles('kol-link');\n\n\t.kol-breadcrumb {\n\t\t&__list,\n\t\t&__list-element {\n\t\t\tdisplay: flex;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tgap: 0.5em;\n\t\t\tflex-wrap: wrap;\n\t\t\tplace-items: center;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&__icon {\n\t\t\t&::part(separator) {\n\t\t\t\tfont-size: 0.7em;\n\t\t\t\tfont-weight: 900;\n\t\t\t}\n\n\t\t\t&::part(separator):before {\n\t\t\t\tcontent: '\\f054';\n\t\t\t\tfont-family: 'Font Awesome 6 Free';\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { BreadcrumbAPI, BreadcrumbLinkProps, BreadcrumbStates, LabelPropType, LinkProps, Stringified } from '../../schema';\nimport { a11yHintLabelingLandmarks, validateLabel } from '../../schema';\nimport { Component, Fragment, h, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolIconTag, KolLinkWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements BreadcrumbAPI {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<li class=\"kol-breadcrumb__list-element\" key={index}>\n\t\t\t\t{index !== 0 && <KolIconTag class=\"kol-breadcrumb__icon\" _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span class=\"kol-breadcrumb__list-element-span\" aria-current=\"page\">\n\t\t\t\t\t\t{link._hideLabel ? (\n\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\tclass=\"kol-breadcrumb__icon\"\n\t\t\t\t\t\t\t\t_label={link._label}\n\t\t\t\t\t\t\t\t_icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>{link._label}</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<KolLinkWcTag class=\"kol-breadcrumb__link\" _linkVariant=\"standalone\" {...link}></KolLinkWcTag>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-breadcrumb\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-breadcrumb__list\">\n\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<KolIconTag class=\"kol-breadcrumb_icon\" _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t</ul>\n\t\t\t</nav>\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 list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: BreadcrumbStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\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<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}

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

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

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

@@ -1 +1 @@
-{"file":"kol-button-link.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,20MAA20M,CAAC;AACp2M,mCAAe,eAAe;;MC8BjBA,eAAa;;;;;QAGR,aAAQ,GAAG,CAAC,GAA4B;YACxD,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;SACvB,CAAC;;;;;;yBAmFmC,KAAK;0BAOJ,KAAK;;;;;;;;;;6BAmDW,KAAK;qBAKf,QAAQ;;;IA9I7C,MAAM,QAAQ;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC;KACnB;IAMM,MAAM,KAAK;QACjB,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;KACtB;IAGM,MAAM,QAAQ;;QACpB,OAAM,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,EAAE,CAAA,CAAC;KACnC;IAEM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,iBAAiB,IAC5B,EAAC,cAAc,qDACd,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,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,MAAM,EACZ,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,IAEnB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACX,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonLink"],"sources":["src/components/button-link/style.scss?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../link';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonLinkProps,\n\tButtonTypePropType,\n\tFocusableElement,\n\tIconsPropType,\n\tIdPropType,\n\tLabelWithExpertSlotPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolButtonLink implements ButtonLinkProps, FocusableElement {\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<StencilUnknown> | undefined> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-link\">\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"link\"\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines 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 expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\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 * @TODO: Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\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 */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). 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?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\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?: Stringified<StencilUnknown>;\n}\n"],"version":3}
+{"file":"kol-button-link.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,o0NAAo0N;;MC+B/0NA,eAAa,GAAAC,kBAAA,CAAA,MAAA,aAAA,SAAA,WAAA,CAAA;AAT1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAYkB,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAA4B,KAAI;AAC5D,YAAA,IAAI,CAAC,WAAW,GAAG,GAAG;AACvB,SAAC;AA8Ec,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAqB5B,QAAA,IAAQ,CAAA,QAAA,GAAyB,QAAQ;AAiCzC,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAMpD;AA/IO,IAAA,MAAM,QAAQ,GAAA;QACpB,OAAO,IAAI,CAAC,MAAM;;AAOZ,IAAA,MAAM,QAAQ,GAAA;;AACpB,QAAA,OAAM,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE,CAAA;;IAG5B,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,cAAc,EACd,EAAA,GAAA,EAAA,0CAAA,EAAA,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,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,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,YAAY,EAAE,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAEnB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonLink","__stencil_proxyCustomElement"],"sources":["src/components/button-link/style.scss?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../@shared/kol-link-mixin' as *;\n\n@layer kol-component {\n\t@include kol-link-styles('kol-button');\n\n\t.kol-button--inline {\n\t\tmin-height: unset; // Inline links may have the height of the flowing text and do not necessarily have to be 44px high.\n\t}\n}\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonLinkProps,\n\tButtonTypePropType,\n\tFocusableElement,\n\tIconsPropType,\n\tIdPropType,\n\tLabelWithExpertSlotPropType,\n\tLinkVariantPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolButtonLink implements ButtonLinkProps, FocusableElement {\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\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_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\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_linkVariant={this._variant}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\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>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\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 expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\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 * @TODO: Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\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?: IdPropType;\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 which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: LinkVariantPropType = 'inline';\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\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 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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events.js";import{n as nonce}from"./dev.utils2.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller.js";import{A as AssociatedInputController}from"./associated.controller.js";import{g as KolTooltipWcTag}from"./component-names.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{e as watchString,c as watchBoolean,w as watchValidator,m as mapBoolean2String,k as mapStringOrBoolean2String,l as setEventTarget,s as setState}from"./prop.validators.js";import{K as KolSpanFc}from"./Span.js";import{v as validateAriaDescription,a as validateAriaExpanded,b as validateAlternativeButtonLinkRole}from"./aria-expanded.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateHideLabel}from"./hide-label.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateDisabled}from"./disabled.js";import{v as validateIcons}from"./icons.js";const validateAriaControls=(t,a)=>{watchString(t,"_ariaControls",a)},validateAriaSelected=(t,a)=>{watchBoolean(t,"_ariaSelected",a)},validateButtonCallbacks=(t,a)=>{watchValidator(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,a)=>{watchValidator(t,"_type",(t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t)),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),a)},buttonVariantPropTypeOptions=["primary","secondary","normal","tertiary","danger","ghost","custom"],validateButtonVariant=(t,a)=>{watchValidator(t,"_variant",(t=>"string"==typeof t&&buttonVariantPropTypeOptions.includes(t)),new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(", ")}`]),a,{defaultValue:"normal"})},KolButtonWc$1=proxyCustomElement(class extends HTMLElement{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){var t,a;const e=showExpertSlot(this.state._label),i=Boolean(null===(a=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim())||void 0===a?void 0:a.length),s=this.state._accessKey||this.state._shortKey;return h(Host,{key:"9229fafa55f157524e578e996dc2f4ed6776d89c",class:"kol-button-wc"},h("button",Object.assign({key:"ab8e6a81d07ebbaeac72510de40e728ee4bfb47d",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":i?this.internalDescriptionById:void 0,"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{button:!0,disabled:!0===this.state._disabled,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id,name:this.state._name},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h(KolSpanFc,{key:"ac80cc701a605464c052758624104854479722a6",class:"button-inner",badgeText:s,icons:this.state._icons,hideLabel:this.state._hideLabel,label:e?"":this.state._label},h("slot",{key:"a31842754a7dea83cfb1994f539c080214643a0e",name:"expert",slot:"expert"}))),h(KolTooltipWcTag,{key:"05c7dc30dcbb54011f260b1f88b3d6f66335354f","aria-hidden":"true",hidden:e||!this.state._hideLabel,_badgeText:s,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),i&&h("span",{key:"03ae4ee27c5a5a478325df049367289eb5549b49",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(){super(),this.__registerHost(),this.internalDescriptionById=nonce(),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var a,e;"submit"===this.state._type?propagateSubmitEventToForm({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?propagateResetEventToForm({form:this.host,ref:this.buttonRef}):(stopPropagation(t),tryToDispatchKoliBriEvent("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(setEventTarget(t,this.buttonRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new AssociatedInputController(this,"button",this.host)}validateAccessKey(t){validateAccessKey(this,t),validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){validateAriaDescription(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){validateCustomClass(this,t)}validateDisabled(t){validateDisabled(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateIcons(t){validateIcons(this,t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabelWithExpertSlot(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){validateShortKey(this,t),validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant),validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},[4,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_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],state:[32],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc"].forEach((t=>{if("kol-button-wc"===t)customElements.get(t)||customElements.define(t,KolButtonWc$1)}))}const KolButtonWc=KolButtonWc$1,defineCustomElement=defineCustomElement$1;export{KolButtonWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{c as watchBoolean,w as watchValidator,m as mapStringOrBoolean2String,e as mapBoolean2String,g as setEventTarget,h as watchString,s as setState}from"./common.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateAriaControls,a as validateAriaDescription,b as validateAriaExpanded,c as validateLinkVariant,d as validateAlternativeButtonLinkRole,e as validateButtonVariant}from"./link-variant.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateDisabled}from"./disabled.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateIcons}from"./icons.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller.js";import{A as AssociatedInputController}from"./associated.controller.js";import{a as KolTooltipWcTag}from"./component-names.js";import"./Alert.js";import{c as clsx}from"./clsx.js";import{K as KolSpanFc}from"./Span.js";import"./i18n.js";const validateAriaSelected=(t,a)=>{watchBoolean(t,"_ariaSelected",a)},validateButtonCallbacks=(t,a)=>{watchValidator(t,"_on",t=>"object"==typeof t&&null!==t,new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,a)=>{watchValidator(t,"_type",t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),a)},KolButtonWc$1=proxyCustomElement(class extends HTMLElement{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}async hideTooltip(){var t;null===(t=this.tooltipRef)||void 0===t||t.hideTooltip()}render(){var t;const a=showExpertSlot(this.state._label),e=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim(),i=this.state._accessKey||this.state._shortKey,s=!0===this.state._disabled,l=!0===this.state._hideLabel;return h(Host,{key:"1f6ccf2475a5590dc277f48b3eb98ea953a95426"},h("button",{key:"91d8c33f2cc1315a46484cbf0b83ff734b6c83a9",ref:t=>this.buttonRef=t,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-description":e||void 0,"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-keyshortcuts":this.state._shortKey,"aria-label":l&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:clsx("kol-button",{"kol-button--disabled":s,[`kol-button--${this.state._buttonVariant}`]:"custom"!==this.state._buttonVariant,[`kol-button--${this.state._linkVariant}`]:this.state._linkVariant,"kol-button--hide-label":l,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}),disabled:s,id:this.state._id,name:this.state._name,onClick:this.onClick,onMouseDown:this.onMouseDown,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type},h(KolSpanFc,{key:"5ff1a30cb5c461a121c84c9f5cc56e67790ab472",class:"kol-button__text",badgeText:i,icons:this.state._icons,hideLabel:l,label:a?"":this.state._label},h("slot",{key:"6d28e4c9a449c8cd8beed156515f38db3a5e63ae",name:"expert",slot:"expert"}))),l&&h(KolTooltipWcTag,{key:"dafcb51bac223df027a9f40bb31216175263cb8d",ref:t=>this.tooltipRef=t,"aria-hidden":"true",hidden:a,class:"kol-button__tooltip",_badgeText:i,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){super(),!1!==t&&this.__registerHost(),this.onClick=t=>{var a,e;"submit"===this.state._type?propagateSubmitEventToForm({form:this.host}):"reset"===this.state._type?propagateResetEventToForm({form:this.host}):(this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(setEventTarget(t,this.buttonRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._value))),this.host&&dispatchDomEvent(this.host,KolEvent.click,this.state._value)},this.onMouseDown=t=>{var a,e,i;null===(i=null===(e=null===(a=this.state)||void 0===a?void 0:a._on)||void 0===e?void 0:e.onMouseDown)||void 0===i||i.call(e,t),this.host&&dispatchDomEvent(this.host,KolEvent.mousedown)},this._disabled=!1,this._hideLabel=!1,this._tooltipAlign="top",this._type="button",this._buttonVariant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_buttonVariant:"normal"},this.controller=new AssociatedInputController(this,"button",this.host)}validateAccessKey(t){validateAccessKey(this,t),validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){validateAriaDescription(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){validateCustomClass(this,t)}validateDisabled(t){validateDisabled(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateIcons(t){validateIcons(this,t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabelWithExpertSlot(this,t,{required:!0})}validateLinkVariant(t){validateLinkVariant(this,t)}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){validateShortKey(this,t),validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateButtonVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateLinkVariant(this._linkVariant),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateButtonVariant(this._buttonVariant),validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_linkVariant:["validateLinkVariant"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_buttonVariant:["validateButtonVariant"]}}},[260,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaHasPopup:[1,"_aria-has-popup"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_linkVariant:[1,"_link-variant"],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_buttonVariant:[1,"_button-variant"],state:[32],kolFocus:[64],hideTooltip:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_linkVariant:["validateLinkVariant"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_buttonVariant:["validateButtonVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc"].forEach(t=>{if("kol-button-wc"===t)customElements.get(t)||customElements.define(t,KolButtonWc$1)})}const KolButtonWc=KolButtonWc$1,defineCustomElement=defineCustomElement$1;export{KolButtonWc,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-button-wc.js","mappings":"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","names":["KolButtonWc"],"sources":["src/schema/props/aria-controls.ts","src/schema/props/aria-selected.ts","src/schema/props/button-callbacks.ts","src/schema/props/button-type.ts","src/schema/props/button-variant.ts","src/components/button/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchString } from '../utils';\n\n/* types */\n/**\n * Defines which elements are being controlled. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n * @deprecated\n */\ntype AriaControlsPropType = string;\n\n/**\n * @deprecated\n */\nexport type PropAriaControls = {\n\tariaControls: AriaControlsPropType;\n};\n\n/* validator */\nexport const validateAriaControls = (component: Generic.Element.Component, value?: AriaControlsPropType): void => {\n\twatchString(component, '_ariaControls', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\ntype AriaSelectedPropType = boolean;\n\n/**\n * Marks this element as selected.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n */\nexport type PropAriaSelected = {\n\tariaSelected: AriaSelectedPropType;\n};\n\n/* validator */\nexport const validateAriaSelected = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_ariaSelected', value);\n};\n","import type { Events } from '../enums';\nimport type { EventCallback, EventValueOrEventCallback } from '../types/callbacks';\nimport type { StencilUnknown } from '../types/unknown';\nimport { watchValidator } from '../utils';\n\nimport type { Generic } from 'adopted-style-sheets';\n/* types */\nexport type ButtonCallbacksPropType<T> = {\n\t[Events.onClick]?: EventValueOrEventCallback<MouseEvent, T>;\n\t[Events.onMouseDown]?: EventCallback<MouseEvent>;\n};\n\n/**\n * Defines the callback functions for button events.\n */\nexport type PropButtonCallbacks<T> = {\n\ton: ButtonCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateButtonCallbacks = (component: Generic.Element.Component, value?: ButtonCallbacksPropType<StencilUnknown>): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_on`,\n\t\t(value) => typeof value === 'object' && value !== null,\n\t\tnew Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']),\n\t\tvalue,\n\t);\n};\n","/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst buttonTypePropTypeOptions = ['button', 'reset', 'submit'] as const;\nexport type ButtonTypePropType = (typeof buttonTypePropTypeOptions)[number];\n\n/**\n * Defines either the type of the component or of the components interactive element.\n */\nexport type PropButtonType = {\n\ttype: ButtonTypePropType;\n};\n\n/* validator */\nexport const validateButtonType = (component: Generic.Element.Component, value?: ButtonTypePropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_type`,\n\t\t(value?) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'] as const;\nexport type ButtonVariantPropType = (typeof buttonVariantPropTypeOptions)[number];\n\n/**\n * Defines which variant should be used for presentation.\n */\nexport type PropButtonVariant = {\n\tvariant: ButtonVariantPropType;\n};\n\n/* validator */\nexport const validateButtonVariant = (component: Generic.Element.Component, value?: ButtonVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_variant`,\n\t\t(value) => typeof value === 'string' && buttonVariantPropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t\t{\n\t\t\tdefaultValue: 'normal',\n\t\t},\n\t);\n};\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonAPI,\n\tButtonCallbacksPropType,\n\tButtonStates,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tsetEventTarget,\n\tsetState,\n\tshowExpertSlot,\n\tvalidateAccessKey,\n\tvalidateAlternativeButtonLinkRole,\n\tvalidateAriaControls,\n\tvalidateAriaDescription,\n\tvalidateAriaExpanded,\n\tvalidateAriaSelected,\n\tvalidateButtonCallbacks,\n\tvalidateButtonType,\n\tvalidateButtonVariant,\n\tvalidateCustomClass,\n\tvalidateDisabled,\n\tvalidateHideLabel,\n\tvalidateIcons,\n\tvalidateLabelWithExpertSlot,\n\tvalidateShortKey,\n\tvalidateTabIndex,\n\tvalidateTooltipAlign,\n\twatchString,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { AssociatedInputController } from '../input-adapter-leanup/associated.controller';\nimport { KolTooltipWcTag } from '../../core/component-names';\nimport { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key';\nimport { KolSpanFc } from '../../functional-components';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements ButtonAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate buttonRef?: HTMLButtonElement;\n\n\tprivate readonly internalDescriptionById = nonce();\n\n\tprivate readonly catchRef = (ref?: HTMLButtonElement) => {\n\t\tthis.buttonRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.buttonRef?.focus();\n\t}\n\n\tprivate readonly onClick = (event: MouseEvent) => {\n\t\tif (this.state._type === 'submit') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else if (this.state._type === 'reset') {\n\t\t\tpropagateResetEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else {\n\t\t\t// Event handling\n\t\t\tstopPropagation(event);\n\n\t\t\ttryToDispatchKoliBriEvent('click', this.host, this.state._value);\n\n\t\t\t// TODO: Static form handling\n\t\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\n\t\t\t// Callback\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tsetEventTarget(event, this.buttonRef);\n\t\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst hasAriaDescription = Boolean(this.state._ariaDescription?.trim()?.length);\n\t\tconst badgeText = this.state._accessKey || this.state._shortKey;\n\n\t\treturn (\n\t\t\t<Host class=\"kol-button-wc\">\n\t\t\t\t<button\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\taccessKey={this.state._accessKey || undefined}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-describedby={hasAriaDescription ? this.internalDescriptionById : undefined}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\t[this.state._variant as string]: this.state._variant !== 'custom',\n\t\t\t\t\t\t[this.state._customClass as string]:\n\t\t\t\t\t\t\tthis.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t\t'hide-label': this.state._hideLabel === true,\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\tid={this.state._id}\n\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t{...this.state._on}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\n\t\t\t\t>\n\t\t\t\t\t<KolSpanFc\n\t\t\t\t\t\tclass=\"button-inner\"\n\t\t\t\t\t\tbadgeText={badgeText}\n\t\t\t\t\t\ticons={this.state._icons}\n\t\t\t\t\t\thideLabel={this.state._hideLabel}\n\t\t\t\t\t\tlabel={hasExpertSlot ? '' : this.state._label}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t\t</KolSpanFc>\n\t\t\t\t</button>\n\t\t\t\t<KolTooltipWcTag\n\t\t\t\t\t/**\n\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t */\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t_badgeText={badgeText}\n\t\t\t\t\t_align={this.state._tooltipAlign}\n\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t{hasAriaDescription && (\n\t\t\t\t\t<span class=\"visually-hidden\" id={this.internalDescriptionById}>\n\t\t\t\t\t\t{this.state._ariaDescription}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: AssociatedInputController;\n\n\t/**\n\t * Defines the elements access key.\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 expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\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 */\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 the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\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?: Stringified<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\t@State() public state: ButtonStates = {\n\t\t_icons: {},\n\t\t_label: '', // ⚠ required\n\t\t_on: {},\n\t\t_type: 'button',\n\t\t_variant: 'normal',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new AssociatedInputController(this, 'button', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tvalidateAccessKey(this, value);\n\t\tvalidateAccessAndShortKey(value, this._shortKey);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\tvalidateAriaControls(this, value);\n\t}\n\n\t@Watch('_ariaDescription')\n\tpublic validateAriaDescription(value?: AriaDescriptionPropType): void {\n\t\tvalidateAriaDescription(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsPropType): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: ButtonCallbacksPropType<StencilUnknown>): void {\n\t\tvalidateButtonCallbacks(this, value);\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativeButtonLinkRolePropType): void {\n\t\tvalidateAlternativeButtonLinkRole(this, value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tvalidateShortKey(this, value);\n\t\tvalidateAccessAndShortKey(this._accessKey, value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: ButtonTypePropType): void {\n\t\tvalidateButtonType(this, value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tsetState(this, '_value', value);\n\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ButtonVariantPropType): void {\n\t\tvalidateButtonVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaDescription(this._ariaDescription);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateName(this._name);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShortKey(this._shortKey);\n\t\tthis.validateSyncValueBySelector(this._syncValueBySelector);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t\tvalidateAccessAndShortKey(this._accessKey, this._shortKey);\n\t}\n}\n"],"version":3}
+{"file":"kol-button-wc.js","mappings":"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","names":["KolButtonWc","__stencil_proxyCustomElement"],"sources":["src/schema/props/aria-selected.ts","src/schema/props/button-callbacks.ts","src/schema/props/button-type.ts","src/components/button/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type AriaSelectedPropType = boolean;\n\n/**\n * Marks this element as selected.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n */\nexport type PropAriaSelected = {\n\tariaSelected: AriaSelectedPropType;\n};\n\n/* validator */\nexport const validateAriaSelected = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_ariaSelected', value);\n};\n","import type { Callback } from '../enums';\nimport type { EventCallback, EventValueOrEventCallback } from '../types/callbacks';\nimport type { StencilUnknown } from '../types/unknown';\nimport { watchValidator } from '../utils';\n\nimport type { Generic } from 'adopted-style-sheets';\n/* types */\nexport type ButtonCallbacksPropType<T> = {\n\t[Callback.onClick]?: EventValueOrEventCallback<MouseEvent, T>;\n\t[Callback.onMouseDown]?: EventCallback<MouseEvent>;\n};\n\n/**\n * Defines the callback functions for button events.\n */\nexport type PropButtonCallbacks<T> = {\n\ton: ButtonCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateButtonCallbacks = (component: Generic.Element.Component, value?: ButtonCallbacksPropType<StencilUnknown>): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_on`,\n\t\t(value) => typeof value === 'object' && value !== null,\n\t\tnew Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']),\n\t\tvalue,\n\t);\n};\n","/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst buttonTypePropTypeOptions = ['button', 'reset', 'submit'] as const;\nexport type ButtonTypePropType = (typeof buttonTypePropTypeOptions)[number];\n\n/**\n * Defines either the type of the component or of the components interactive element.\n */\nexport type PropButtonType = {\n\ttype: ButtonTypePropType;\n};\n\n/* validator */\nexport const validateButtonType = (component: Generic.Element.Component, value?: ButtonTypePropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_type`,\n\t\t(value?) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tAriaExpandedPropType,\n\tAriaSelectedPropType,\n\tButtonCallbacksPropType,\n\tButtonStates,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDisabledPropType,\n\tHideLabelPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInternalButtonAPI,\n\tLabelWithExpertSlotPropType,\n\tLinkVariantPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { validateLinkVariant } from '../../schema';\nimport {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tsetEventTarget,\n\tsetState,\n\tshowExpertSlot,\n\tvalidateAccessKey,\n\tvalidateAlternativeButtonLinkRole,\n\tvalidateAriaControls,\n\tvalidateAriaDescription,\n\tvalidateAriaExpanded,\n\tvalidateAriaSelected,\n\tvalidateButtonCallbacks,\n\tvalidateButtonType,\n\tvalidateButtonVariant,\n\tvalidateCustomClass,\n\tvalidateDisabled,\n\tvalidateHideLabel,\n\tvalidateIcons,\n\tvalidateLabelWithExpertSlot,\n\tvalidateShortKey,\n\tvalidateTooltipAlign,\n\twatchString,\n} from '../../schema';\nimport { validateTabIndex } from '../../schema/props/tab-index';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { AssociatedInputController } from '../input-adapter-leanup/associated.controller';\nimport { KolTooltipWcTag } from '../../core/component-names';\nimport { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key';\nimport type { AriaHasPopupPropType } from '../../schema/props/aria-has-popup';\nimport { KolSpanFc } from '../../functional-components';\nimport clsx from 'clsx';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements InternalButtonAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate buttonRef?: HTMLButtonElement;\n\tprivate tooltipRef?: HTMLKolTooltipWcElement;\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.buttonRef?.focus();\n\t}\n\n\t/**\n\t * Hides the tooltip.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hideTooltip() {\n\t\tvoid this.tooltipRef?.hideTooltip();\n\t}\n\n\tprivate readonly onClick = (event: MouseEvent) => {\n\t\tif (this.state._type === 'submit') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else if (this.state._type === 'reset') {\n\t\t\tpropagateResetEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else {\n\t\t\t// TODO: Static form handling\n\t\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\n\t\t\t// Callback\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tsetEventTarget(event, this.buttonRef);\n\t\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t\t}\n\t\t}\n\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.click, this.state._value);\n\t\t}\n\t};\n\n\tprivate readonly onMouseDown = (event: MouseEvent) => {\n\t\tthis.state?._on?.onMouseDown?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.mousedown);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst ariaDescription = this.state._ariaDescription?.trim();\n\t\tconst badgeText = this.state._accessKey || this.state._shortKey;\n\t\tconst isDisabled = this.state._disabled === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button\n\t\t\t\t\tref={(ref) => (this.buttonRef = ref)}\n\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-description={ariaDescription || undefined}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-haspopup={this._ariaHasPopup}\n\t\t\t\t\taria-keyshortcuts={this.state._shortKey}\n\t\t\t\t\taria-label={hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={clsx('kol-button', {\n\t\t\t\t\t\t'kol-button--disabled': isDisabled,\n\t\t\t\t\t\t[`kol-button--${this.state._buttonVariant as string}`]: this.state._buttonVariant !== 'custom',\n\t\t\t\t\t\t[`kol-button--${this.state._linkVariant as string}`]: this.state._linkVariant,\n\t\t\t\t\t\t'kol-button--hide-label': hideLabel,\n\t\t\t\t\t\t[this.state._customClass as string]:\n\t\t\t\t\t\t\tthis.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t})}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tid={this.state._id}\n\t\t\t\t\tname={this.state._name}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tonMouseDown={this.onMouseDown}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\n\t\t\t\t>\n\t\t\t\t\t<KolSpanFc\n\t\t\t\t\t\tclass=\"kol-button__text\"\n\t\t\t\t\t\tbadgeText={badgeText}\n\t\t\t\t\t\ticons={this.state._icons}\n\t\t\t\t\t\thideLabel={hideLabel}\n\t\t\t\t\t\tlabel={hasExpertSlot ? '' : this.state._label}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t\t</KolSpanFc>\n\t\t\t\t</button>\n\t\t\t\t{hideLabel && (\n\t\t\t\t\t<KolTooltipWcTag\n\t\t\t\t\t\tref={(ref) => (this.tooltipRef = ref)}\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t */\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\thidden={hasExpertSlot}\n\t\t\t\t\t\tclass=\"kol-button__tooltip\"\n\t\t\t\t\t\t_badgeText={badgeText}\n\t\t\t\t\t\t_align={this.state._tooltipAlign}\n\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: AssociatedInputController;\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 expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines the aria-haspopup attribute. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup)\n\t * @internal\n\t */\n\t@Prop() public _ariaHasPopup?: AriaHasPopupPropType;\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 _buttonVariant=\"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 * @internal\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 which variant should be used for presentation.\n\t * @internal\n\t */\n\t@Prop() public _linkVariant?: LinkVariantPropType;\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 the role of the components primary element.\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 * @internal\n\t */\n\t@Prop() public _buttonVariant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: ButtonStates = {\n\t\t_icons: {},\n\t\t_label: '', // ⚠ required\n\t\t_on: {},\n\t\t_type: 'button',\n\t\t_buttonVariant: 'normal',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new AssociatedInputController(this, 'button', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tvalidateAccessKey(this, value);\n\t\tvalidateAccessAndShortKey(value, this._shortKey);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\tvalidateAriaControls(this, value);\n\t}\n\n\t@Watch('_ariaDescription')\n\tpublic validateAriaDescription(value?: AriaDescriptionPropType): void {\n\t\tvalidateAriaDescription(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: AriaExpandedPropType): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: AriaSelectedPropType): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsPropType): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_linkVariant')\n\tpublic validateLinkVariant(value?: LinkVariantPropType): void {\n\t\tvalidateLinkVariant(this, value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: ButtonCallbacksPropType<StencilUnknown>): void {\n\t\tvalidateButtonCallbacks(this, value);\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativeButtonLinkRolePropType): void {\n\t\tvalidateAlternativeButtonLinkRole(this, value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tvalidateShortKey(this, value);\n\t\tvalidateAccessAndShortKey(this._accessKey, value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: ButtonTypePropType): void {\n\t\tvalidateButtonType(this, value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\tsetState(this, '_value', value);\n\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t}\n\n\t@Watch('_buttonVariant')\n\tpublic validateButtonVariant(value?: ButtonVariantPropType): void {\n\t\tvalidateButtonVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaDescription(this._ariaDescription);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLinkVariant(this._linkVariant);\n\t\tthis.validateName(this._name);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShortKey(this._shortKey);\n\t\tthis.validateSyncValueBySelector(this._syncValueBySelector);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateButtonVariant(this._buttonVariant);\n\t\tvalidateAccessAndShortKey(this._accessKey, this._shortKey);\n\t}\n}\n"],"version":3}