@public-ui/components 3.0.0-alpha.1 → 3.0.0-ec88c9a9f00b83411c02bb7c1e982732e1259613.0

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolBadgeDefaultStyle0","featureHint","KolBadge","this","bgColorStr","colorStr","id","nonce","handleColorChange","value","colorPair","backgroundColor","foregroundColor","_color","_icons","renderSmartButton","props","h","KolButtonWcTag","class","_ariaControls","_customClass","_disabled","_hideLabel","_id","_label","_on","_tooltipAlign","_variant","render","hasSmartButton","state","_smartButton","key","clsx","style","color","KolSpanFc","undefined","allowMarkdown","icons","label","validateIcons","validateColor","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"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.kol-badge {\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\tfont-size: rem(16);\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_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<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"],"mappings":";;;gkBAAA,MAAMA,EAAkB,ytLACxB,MAAAC,EAAeD,ECSfE,EAAY,uE,MASCC,EAAQ,M,yBACZC,KAAAC,WAAa,OACbD,KAAAE,SAAW,OACFF,KAAAG,GAAKC,IAmEdJ,KAAAK,kBAAqBC,IAC5B,MAAMC,EAAYF,EAAkBC,GACpCN,KAAKC,WAAaM,EAAUC,gBAC5BR,KAAKE,SAAWK,EAAUE,eAAyB,E,YA5BH,O,mFAiBZ,CACpCC,OAAQ,CACPF,gBAAiB,OACjBC,gBAAiB,QAElBE,OAAQ,G,CA9DD,iBAAAC,CAAkBC,GACzB,OACCC,EAACC,EAAc,CACdC,MAAM,0BACNC,cAAejB,KAAKG,GACpBe,aAAcL,EAAMK,aACpBC,UAAWN,EAAMM,UACjBC,WAAY,KACZT,OAAQE,EAAMF,OACdU,IAAKR,EAAMQ,IACXC,OAAQT,EAAMS,OACdC,IAAKV,EAAMU,IACXC,cAAeX,EAAMW,cACrBC,SAAUZ,EAAMY,U,CAKZ,MAAAC,GACN,MAAMC,SAAwB3B,KAAK4B,MAAMC,eAAiB,UAAY7B,KAAK4B,MAAMC,eAAiB,KAElG,OACCf,EAAA,QAAAgB,IAAA,2CACCd,MAAOe,EAAK,YAAa,CACxB,qCAAsC/B,KAAK4B,MAAMC,eAAiB,UAAY7B,KAAK4B,MAAMC,eAAiB,OAE3GG,MAAO,CACNxB,gBAAiBR,KAAKC,WACtBgC,MAAOjC,KAAKE,WAGbY,EAACoB,EAAS,CAAAJ,IAAA,2CAACd,MAAM,mBAAmBb,GAAIwB,EAAiB3B,KAAKG,GAAKgC,UAAWC,cAAa,KAACC,MAAOrC,KAAK4B,MAAMjB,OAAQ2B,MAAOtC,KAAKsB,SACjIK,GAAkB3B,KAAKY,kBAAkBZ,KAAK4B,MAAMC,c,CAwCjD,aAAAU,CAAcjC,GACpBiC,EAAcvC,KAAMM,E,CAId,aAAAkC,CAAclC,GACpBkC,EAAcxC,KAAMM,EAAO,CAC1BmC,aAAc,OACdC,MAAO,CACNC,YAAa3C,KAAKK,oB,CAMd,mBAAAuC,CAAoBtC,GAC1BuC,EAAoBvC,GAAO,KAC1B,IACCA,EAAQwC,EAAuBxC,E,CAE9B,MAAOyC,G,CAGTC,EAAShD,KAAM,eAAgBM,EAAM,G,CAIhC,iBAAA2C,GACNjD,KAAKuC,cAAcvC,KAAKW,QACxBX,KAAKwC,cAAcxC,KAAKU,QACxBV,KAAK4C,oBAAoB5C,KAAK6B,a","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolBadgeDefaultStyle0","featureHint","KolBadge","this","bgColorStr","colorStr","id","nonce","handleColorChange","value","colorPair","backgroundColor","foregroundColor","_color","_icons","renderSmartButton","props","h","KolButtonWcTag","class","_ariaControls","_customClass","_disabled","_hideLabel","_id","_label","_on","_tooltipAlign","_variant","render","hasSmartButton","state","_smartButton","key","clsx","style","color","KolSpanFc","undefined","allowMarkdown","icons","label","validateIcons","validateColor","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["src/components/badge/style.scss?tag=kol-badge&mode=default&encapsulation=shadow","src/components/badge/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../../styles/global';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t.kol-badge {\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\tfont-size: rem(16);\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_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<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"],"mappings":";;;0nBAAA,MAAMA,EAAkB,smLACxB,MAAAC,EAAeD,ECSfE,EAAY,uE,MASCC,EAAQ,M,yBACZC,KAAAC,WAAa,OACbD,KAAAE,SAAW,OACFF,KAAAG,GAAKC,IAmEdJ,KAAAK,kBAAqBC,IAC5B,MAAMC,EAAYF,EAAkBC,GACpCN,KAAKC,WAAaM,EAAUC,gBAC5BR,KAAKE,SAAWK,EAAUE,eAAyB,E,YA5BH,O,mFAiBZ,CACpCC,OAAQ,CACPF,gBAAiB,OACjBC,gBAAiB,QAElBE,OAAQ,G,CA9DD,iBAAAC,CAAkBC,GACzB,OACCC,EAACC,EAAc,CACdC,MAAM,0BACNC,cAAejB,KAAKG,GACpBe,aAAcL,EAAMK,aACpBC,UAAWN,EAAMM,UACjBC,WAAY,KACZT,OAAQE,EAAMF,OACdU,IAAKR,EAAMQ,IACXC,OAAQT,EAAMS,OACdC,IAAKV,EAAMU,IACXC,cAAeX,EAAMW,cACrBC,SAAUZ,EAAMY,U,CAKZ,MAAAC,GACN,MAAMC,SAAwB3B,KAAK4B,MAAMC,eAAiB,UAAY7B,KAAK4B,MAAMC,eAAiB,KAElG,OACCf,EAAA,QAAAgB,IAAA,2CACCd,MAAOe,EAAK,YAAa,CACxB,qCAAsC/B,KAAK4B,MAAMC,eAAiB,UAAY7B,KAAK4B,MAAMC,eAAiB,OAE3GG,MAAO,CACNxB,gBAAiBR,KAAKC,WACtBgC,MAAOjC,KAAKE,WAGbY,EAACoB,EAAS,CAAAJ,IAAA,2CAACd,MAAM,mBAAmBb,GAAIwB,EAAiB3B,KAAKG,GAAKgC,UAAWC,cAAa,KAACC,MAAOrC,KAAK4B,MAAMjB,OAAQ2B,MAAOtC,KAAKsB,SACjIK,GAAkB3B,KAAKY,kBAAkBZ,KAAK4B,MAAMC,c,CAwCjD,aAAAU,CAAcjC,GACpBiC,EAAcvC,KAAMM,E,CAId,aAAAkC,CAAclC,GACpBkC,EAAcxC,KAAMM,EAAO,CAC1BmC,aAAc,OACdC,MAAO,CACNC,YAAa3C,KAAKK,oB,CAMd,mBAAAuC,CAAoBtC,GAC1BuC,EAAoBvC,GAAO,KAC1B,IACCA,EAAQwC,EAAuBxC,E,CAE9B,MAAOyC,G,CAGTC,EAAShD,KAAM,eAAgBM,EAAM,G,CAIhC,iBAAA2C,GACNjD,KAAKuC,cAAcvC,KAAKW,QACxBX,KAAKwC,cAAcxC,KAAKU,QACxBV,KAAK4C,oBAAoB5C,KAAK6B,a","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,F as t}from"./index-a49af574.js";import{r as i,a as o}from"./unique-nav-labels-768d04e9.js";import{w as a}from"./validation-1a210179.js";import{d as s,e as l}from"./component-names-aa3cbc3c.js";import{e as r}from"./prop.validators-c5e6ad2d.js";import{v as d}from"./label-d70e7c34.js";import"./dev.utils-fab45cbc.js";import"./index-541b643a.js";const c="/*\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  .kol-breadcrumb {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\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-breadcrumb__icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-breadcrumb__icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",h=c,b=class{constructor(i){n(this,i),this.renderLink=(n,i)=>{const a=this.state._links.length-1;return e("li",{class:"kol-breadcrumb__list-element",key:i},0!==i&&e(s,{class:"kol-breadcrumb__icon",_label:"",_icons:"codicon codicon-chevron-right"}),i===a?e("span",{class:"kol-breadcrumb__list-element-span"},n._hideLabel?e(s,{class:"kol-breadcrumb__icon",_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):e(t,null,n._label)):e(l,Object.assign({class:"kol-breadcrumb__link"},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e("nav",{key:"d086ccf1b9fccd3c2d9afe55f56a285e58f451f5",class:"kol-breadcrumb","aria-label":this.state._label},e("ul",{key:"ea55b4eed94749a422d06e470f3f09b75e0a7978",class:"kol-breadcrumb__list"},0===this.state._links.length&&e("li",{key:"e601d2603ba034b4b0d553138f1d4e762fc372e8"},e(s,{key:"025141bd396636bccac3f3991f6a91cfa1ad994c",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(n,e,t=!1){t||i(this.state._label),d(this,n,{required:!0}),r(n),o(this.state._label)}validateLinks(n){a("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};b.style={default:h};export{b as kol_breadcrumb};
+import{r as n,h as e,F as t}from"./index-2153bd8a.js";import{r as i,a as o}from"./unique-nav-labels-768d04e9.js";import{w as a}from"./validation-0c197148.js";import{d as l,e as s}from"./component-names-545d6582.js";import{e as r}from"./prop.validators-9feb1d92.js";import{v as d}from"./label-d0315384.js";import"./dev.utils-fab45cbc.js";import"./index-da3e0c00.js";const c="/*\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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-breadcrumb {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\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-breadcrumb__icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-breadcrumb__icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",h=c,b=class{constructor(i){n(this,i),this.renderLink=(n,i)=>{const a=this.state._links.length-1;return e("li",{class:"kol-breadcrumb__list-element",key:i},0!==i&&e(l,{class:"kol-breadcrumb__icon",_label:"",_icons:"codicon codicon-chevron-right"}),i===a?e("span",{class:"kol-breadcrumb__list-element-span"},n._hideLabel?e(l,{class:"kol-breadcrumb__icon",_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):e(t,null,n._label)):e(s,Object.assign({class:"kol-breadcrumb__link"},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e("nav",{key:"d086ccf1b9fccd3c2d9afe55f56a285e58f451f5",class:"kol-breadcrumb","aria-label":this.state._label},e("ul",{key:"ea55b4eed94749a422d06e470f3f09b75e0a7978",class:"kol-breadcrumb__list"},0===this.state._links.length&&e("li",{key:"e601d2603ba034b4b0d553138f1d4e762fc372e8"},e(l,{key:"025141bd396636bccac3f3991f6a91cfa1ad994c",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(n,e,t=!1){t||i(this.state._label),d(this,n,{required:!0}),r(n),o(this.state._label)}validateLinks(n){a("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};b.style={default:h};export{b as kol_breadcrumb};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolBreadcrumbDefaultStyle0","KolBreadcrumb","this","renderLink","link","index","lastIndex","state","_links","length","h","class","key","KolIconTag","_label","_icons","_hideLabel","Fragment","KolLinkTag","Object","assign","render","map","validateLabel","value","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"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.kol-breadcrumb {\n\t\tfont-size: rem(16);\n\n\t\t&__list,\n\t\t&__list-element {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t\tdisplay: flex;\n\t\t\tgap: 0.5em;\n\t\t\tflex-wrap: wrap;\n\t\t\tplace-items: center;\n\t\t}\n\n\t\t&__icon {\n\t\t\t&::part(separator) {\n\t\t\t\tfont-weight: 900;\n\t\t\t\tfont-size: 0.7em;\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, 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 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\">\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<KolLinkTag class=\"kol-breadcrumb__link\" {...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<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"],"mappings":";;;6WAAA,MAAMA,EAAkB,koJACxB,MAAAC,EAAeD,E,MCgBFE,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,MAAM,+BAA+BC,IAAKP,GAC5CA,IAAU,GAAKK,EAACG,EAAU,CAACF,MAAM,uBAAuBG,OAAO,GAAGC,OAAO,kCACzEV,IAAUC,EACVI,EAAA,QAAMC,MAAM,qCACVP,EAAKY,WACLN,EAACG,EAAU,CACVF,MAAM,uBACNG,OAAQV,EAAKU,OACbC,cAAeX,EAAKW,SAAW,SAAWX,EAAKW,OAAS,iCAGzDL,EAAAO,EAAA,KAAGb,EAAKU,SAIVJ,EAACQ,EAAUC,OAAAC,OAAA,CAACT,MAAM,wBAA2BP,IAE1C,E,uDA6BmC,CACzCU,OAAQ,GACRN,OAAQ,G,CA3BF,MAAAa,GACN,OACCX,EAAA,OAAAE,IAAA,2CAAKD,MAAM,iBAAgB,aAAaT,KAAKK,MAAMO,QAClDJ,EAAA,MAAAE,IAAA,2CAAID,MAAM,wBACRT,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,MAAAE,IAAA,4CACCF,EAACG,EAAU,CAAAD,IAAA,2CAACD,MAAM,sBAAsBG,OAAO,GAAGC,OAAO,yBAAyB,KAGnFb,KAAKK,MAAMC,OAAOc,IAAIpB,KAAKC,a,CAsBzB,aAAAoB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAezB,KAAKK,MAAMO,O,CAE3BS,EAAcrB,KAAMsB,EAAO,CAC1BI,SAAU,OAEXC,EAA0BL,GAC1BM,EAAY5B,KAAKK,MAAMO,O,CAIjB,aAAAiB,CAAcP,GACpBQ,EAAc,gBAAiB9B,KAAMsB,E,CAG/B,iBAAAS,GACN/B,KAAKqB,cAAcrB,KAAKY,OAAQoB,UAAW,MAC3ChC,KAAK6B,cAAc7B,KAAKM,O,CAGlB,oBAAA2B,GACNR,EAAezB,KAAKK,MAAMO,O","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolBreadcrumbDefaultStyle0","KolBreadcrumb","this","renderLink","link","index","lastIndex","state","_links","length","h","class","key","KolIconTag","_label","_icons","_hideLabel","Fragment","KolLinkTag","Object","assign","render","map","validateLabel","value","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/breadcrumb/style.scss?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../../styles/global';\n\n@layer kol-component {\n\t.kol-breadcrumb {\n\t\tfont-size: rem(16);\n\n\t\t&__list,\n\t\t&__list-element {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t\tdisplay: flex;\n\t\t\tgap: 0.5em;\n\t\t\tflex-wrap: wrap;\n\t\t\tplace-items: center;\n\t\t}\n\n\t\t&__icon {\n\t\t\t&::part(separator) {\n\t\t\t\tfont-weight: 900;\n\t\t\t\tfont-size: 0.7em;\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, 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 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\">\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<KolLinkTag class=\"kol-breadcrumb__link\" {...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<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"],"mappings":";;;6WAAA,MAAMA,EAAkB,slJACxB,MAAAC,EAAeD,E,MCgBFE,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,MAAM,+BAA+BC,IAAKP,GAC5CA,IAAU,GAAKK,EAACG,EAAU,CAACF,MAAM,uBAAuBG,OAAO,GAAGC,OAAO,kCACzEV,IAAUC,EACVI,EAAA,QAAMC,MAAM,qCACVP,EAAKY,WACLN,EAACG,EAAU,CACVF,MAAM,uBACNG,OAAQV,EAAKU,OACbC,cAAeX,EAAKW,SAAW,SAAWX,EAAKW,OAAS,iCAGzDL,EAAAO,EAAA,KAAGb,EAAKU,SAIVJ,EAACQ,EAAUC,OAAAC,OAAA,CAACT,MAAM,wBAA2BP,IAE1C,E,uDA6BmC,CACzCU,OAAQ,GACRN,OAAQ,G,CA3BF,MAAAa,GACN,OACCX,EAAA,OAAAE,IAAA,2CAAKD,MAAM,iBAAgB,aAAaT,KAAKK,MAAMO,QAClDJ,EAAA,MAAAE,IAAA,2CAAID,MAAM,wBACRT,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,MAAAE,IAAA,4CACCF,EAACG,EAAU,CAAAD,IAAA,2CAACD,MAAM,sBAAsBG,OAAO,GAAGC,OAAO,yBAAyB,KAGnFb,KAAKK,MAAMC,OAAOc,IAAIpB,KAAKC,a,CAsBzB,aAAAoB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAezB,KAAKK,MAAMO,O,CAE3BS,EAAcrB,KAAMsB,EAAO,CAC1BI,SAAU,OAEXC,EAA0BL,GAC1BM,EAAY5B,KAAKK,MAAMO,O,CAIjB,aAAAiB,CAAcP,GACpBQ,EAAc,gBAAiB9B,KAAMsB,E,CAG/B,iBAAAS,GACN/B,KAAKqB,cAAcrB,KAAKY,OAAQoB,UAAW,MAC3ChC,KAAK6B,cAAc7B,KAAKM,O,CAGlB,oBAAA2B,GACNR,EAAezB,KAAKK,MAAMO,O","ignoreList":[]}

package/dist/kolibri/kol-button-link.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-a49af574.js";import{a as i}from"./component-names-aa3cbc3c.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 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}",a=o,s=class{constructor(e){n(this,e),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 e(t,{key:"006f6b601aad6ffe2f9f0681859202d65fe7a9c6",class:"kol-button-link"},e(i,{key:"e8e54dca4641b1fc6aa220196a8ebe174624653b",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},e("slot",{key:"6cd1c8deb4b73155976c23bc44c241bd3c329843",name:"expert",slot:"expert"})))}static get delegatesFocus(){return!0}};s.style={default:a};export{s as kol_button_link};
+import{r as n,h as e}from"./index-2153bd8a.js";import{a as t}from"./component-names-545d6582.js";const i="/*\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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\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(8rem / var(--kolibri-root-font-size, 16));\n  }\n}",o=i,a=class{constructor(e){n(this,e),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 kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"cd3a9ab0a6002b5bb973ded11b3f2f8da94f51b0",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},e("slot",{key:"1a36b0a82300760746c9966f48df90d19315f771",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:o};export{a as kol_button_link};

package/dist/kolibri/kol-button-link.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonLinkDefaultStyle0","KolButtonLink","this","catchRef","ref","buttonWcRef","getValue","_value","focus","kolFocus","_a","render","h","Host","key","class","KolButtonWcTag","_accessKey","_ariaControls","_ariaDescription","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_id","_label","_name","_on","_role","_shortKey","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","name","slot"],"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"],"mappings":";;;wGAAA,MAAMA,EAAkB,40MACxB,MAAAC,EAAeD,E,MC8BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BF,KAAKG,YAAcD,CAAG,E,gKAoFc,M,gBAOC,M,qOAmDgB,M,WAKV,S,sBA9IrC,cAAME,GACZ,OAAOJ,KAAKK,M,CAON,WAAMC,SACNN,KAAKO,U,CAIL,cAAMA,G,aACNC,EAAAR,KAAKG,eAAW,MAAAK,SAAA,SAAAA,EAAED,W,CAGlB,MAAAE,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,mBACXH,EAACI,EAAc,CAAAF,IAAA,2CACdV,IAAKF,KAAKC,SACVc,WAAYf,KAAKe,WACjBC,cAAehB,KAAKgB,cACpBC,iBAAkBjB,KAAKiB,iBACvBC,cAAelB,KAAKkB,cACpBC,cAAenB,KAAKmB,cACpBC,UAAWpB,KAAKoB,UAChBC,OAAQrB,KAAKqB,OACbC,WAAYtB,KAAKsB,WACjBC,IAAKvB,KAAKuB,IACVC,OAAQxB,KAAKwB,OACbC,MAAOzB,KAAKyB,MACZC,IAAK1B,KAAK0B,IACVC,MAAM,OACNC,UAAW5B,KAAK4B,UAChBC,qBAAsB7B,KAAK6B,qBAC3BC,UAAW9B,KAAK8B,UAChBC,cAAe/B,KAAK+B,cACpBC,MAAOhC,KAAKgC,MACZ3B,OAAQL,KAAKK,QAEbK,EAAA,QAAAE,IAAA,2CAAMqB,KAAK,SAASC,KAAK,Y","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolButtonLinkDefaultStyle0","KolButtonLink","this","catchRef","ref","buttonWcRef","getValue","_value","kolFocus","_a","render","h","KolButtonWcTag","key","_accessKey","_ariaControls","_ariaDescription","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_id","_label","_name","_on","_role","_shortKey","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","name","slot"],"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 '../../styles/global';\n@import '../@shared/kol-link-mixin';\n\n@include kol-link-styles('kol-button');\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, 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@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_icons={this._icons}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_role=\"link\"\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t>\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 which key combination can be used to trigger or focus the interactive element of the component.\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"],"mappings":";;;iGAAA,MAAMA,EAAkB,q4LACxB,MAAAC,EAAeD,E,MC8BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BF,KAAKG,YAAcD,CAAG,E,gKA0Ec,M,gBAOC,M,qOAmDgB,M,WAKV,S,sBApIrC,cAAME,GACZ,OAAOJ,KAAKK,M,CAIN,cAAMC,G,aACNC,EAAAP,KAAKG,eAAW,MAAAI,SAAA,SAAAA,EAAED,W,CAGlB,MAAAE,GACN,OACCC,EAACC,EAAc,CAAAC,IAAA,2CACdT,IAAKF,KAAKC,SACVW,WAAYZ,KAAKY,WACjBC,cAAeb,KAAKa,cACpBC,iBAAkBd,KAAKc,iBACvBC,cAAef,KAAKe,cACpBC,cAAehB,KAAKgB,cACpBC,UAAWjB,KAAKiB,UAChBC,OAAQlB,KAAKkB,OACbC,WAAYnB,KAAKmB,WACjBC,IAAKpB,KAAKoB,IACVC,OAAQrB,KAAKqB,OACbC,MAAOtB,KAAKsB,MACZC,IAAKvB,KAAKuB,IACVC,MAAM,OACNC,UAAWzB,KAAKyB,UAChBC,qBAAsB1B,KAAK0B,qBAC3BC,UAAW3B,KAAK2B,UAChBC,cAAe5B,KAAK4B,cACpBC,MAAO7B,KAAK6B,MACZxB,OAAQL,KAAKK,QAEbI,EAAA,QAAAE,IAAA,2CAAMmB,KAAK,SAASC,KAAK,W","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as s,g as e}from"./index-a49af574.js";import{s as a,t as d}from"./events-29e84d75.js";import{n as o}from"./dev.utils-8fad8415.js";import{p as h,a as n}from"./controller-6c2714a5.js";import{A as l}from"./associated.controller-bce3d721.js";import{u as r}from"./component-names-aa3cbc3c.js";import{v as c,a as b,b as f,c as v}from"./access-and-short-key-864aafba.js";import{i as u,b as m,w as p,x as y,y as _,q as j,s as g}from"./prop.validators-c5e6ad2d.js";import{K as x}from"./Span-7f84ad00.js";import{v as S,a as k,b as A}from"./aria-expanded-1b7c2c54.js";import{s as C}from"./reuse-32931294.js";import{v as T}from"./custom-class-9311655e.js";import{v as B}from"./disabled-5fc4b444.js";import{v as K}from"./hide-label-db0db59c.js";import{v as w}from"./icons-f3b7aabd.js";import{a as I}from"./label-d70e7c34.js";import{v as V}from"./tooltip-align-c001aae2.js";import"./dev.utils-fab45cbc.js";import"./index-541b643a.js";import"./tslib.es6-2e5096f8.js";import"./clsx-09a06a12.js";import"./InternalUnderlinedBadgeText-8f2a64b6.js";import"./common-54bf85ba.js";import"./align-3f029493.js";const L=(t,a)=>{u(t,"_ariaControls",a)},D=(t,a)=>{m(t,"_ariaSelected",a)},E=(t,a)=>{p(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},H=["button","reset","submit"],O=(t,a)=>{p(t,"_type",(t=>"string"==typeof t&&H.includes(t)),new Set([`KoliBriButtonType {${H.join(", ")}`]),a)},q=["primary","secondary","normal","tertiary","danger","ghost","custom"],N=(t,a)=>{p(t,"_variant",(t=>"string"==typeof t&&q.includes(t)),new Set([`KoliBriButtonVariant {${q.join(", ")}`]),a,{defaultValue:"normal"})},R=class{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){var a,e;const s=C(this.state._label),l=Boolean(null===(e=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===e?void 0:e.length),o=this.state._accessKey||this.state._shortKey;return t(i,{key:"82d4f2083e633c86638e8b0ce2230394f85197a2",class:"kol-button-wc"},t("button",Object.assign({key:"276f87174d26c53eddbbebe0b9bbd50b6af2a44b",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":l?this.internalDescriptionById:void 0,"aria-expanded":y(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":_(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}),t(x,{key:"74ccd5acd2addc46a0af23357306534576983b9a",class:"button-inner",badgeText:o,icons:this.state._icons,hideLabel:this.state._hideLabel,label:s?"":this.state._label},t("slot",{key:"1deceb55a97bb5bcdf03f520c96c0dc8ea14bc05",name:"expert",slot:"expert"}))),t(r,{key:"658ee2ee05eb5df0782540e35133553d10883620","aria-hidden":"true",hidden:s||!this.state._hideLabel,_badgeText:o,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),l&&t("span",{key:"38adf394c49ec285140e24a78d1f9311bbc6a4ed",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(t){s(this,t),this.internalDescriptionById=o(),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var e,i;"submit"===this.state._type?h({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?n({form:this.host,ref:this.buttonRef}):(a(t),d("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(j(t,this.buttonRef),null===(i=this.state._on)||void 0===i||i.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 l(this,"button",this.host)}validateAccessKey(t){c(this,t),b(t,this._shortKey)}validateAriaControls(t){L(this,t)}validateAriaDescription(t){S(this,t)}validateAriaExpanded(t){k(this,t)}validateAriaSelected(t){D(this,t)}validateCustomClass(t){T(this,t)}validateDisabled(t){B(this,t)}validateHideLabel(t){K(this,t)}validateIcons(t){w(this,t)}validateId(t){u(this,"_id",t)}validateLabel(t){I(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){E(this,t)}validateRole(t){A(this,t)}validateShortKey(t){f(this,t),b(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){v(this,t)}validateTooltipAlign(t){V(this,t)}validateType(t){O(this,t)}validateValue(t){g(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){N(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),b(this._accessKey,this._shortKey)}get host(){return e(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"]}}};export{R as kol_button_wc};
+import{h as t,H as i,r as s,g as a}from"./index-2153bd8a.js";import{d as e,K as o}from"./events-5adf6b62.js";import{n as d}from"./dev.utils-41f03190.js";import{p as h,a as l}from"./controller-f84a4671.js";import{A as n}from"./associated.controller-52d302aa.js";import{g as r}from"./component-names-545d6582.js";import{v as c,a as b,b as v,c as f}from"./access-and-short-key-9cca88b8.js";import{c as u}from"./clsx-09a06a12.js";import{i as m,b as p,w as _,x as y,y as j,q as x,s as k}from"./prop.validators-9feb1d92.js";import{K as g}from"./Span-b96a4249.js";import{v as A,a as S,b as C,c as T}from"./button-variant-ce5f212b.js";import{s as I}from"./reuse-32931294.js";import{v as K}from"./custom-class-ac49545a.js";import{v as w}from"./disabled-dad7478c.js";import{v as B}from"./hide-label-429a15ea.js";import{v as D}from"./icons-199f1746.js";import{a as L}from"./label-d0315384.js";import{v as V}from"./tooltip-align-8e0fa436.js";import"./dev.utils-fab45cbc.js";import"./index-da3e0c00.js";import"./tslib.es6-1173d062.js";import"./Icon-0b465eae.js";import"./InternalUnderlinedBadgeText-a9d4003e.js";import"./isObject-ffcbbb76.js";import"./common-54bf85ba.js";import"./align-4719d626.js";const E=(t,a)=>{m(t,"_ariaControls",a)},H=(t,a)=>{p(t,"_ariaSelected",a)},O=(t,a)=>{_(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},q=["button","reset","submit"],M=(t,a)=>{_(t,"_type",(t=>"string"==typeof t&&q.includes(t)),new Set([`KoliBriButtonType {${q.join(", ")}`]),a)},N=class{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){var a,e;const s=I(this.state._label),o=Boolean(null===(e=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===e?void 0:e.length),l=this.state._accessKey||this.state._shortKey;return t(i,{key:"b87a69b493328d33c7de2a3d0b928494cba9f7cf"},t("button",{key:"b06eba81f2b3be3d03c9d3469475f03d668fd03d",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":o?this.internalDescriptionById:void 0,"aria-expanded":y(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":j(this.state._ariaSelected),class:u("kol-button",{"kol-button--disabled":!0===this.state._disabled,[`kol-button--${this.state._variant}`]:"custom"!==this.state._variant,"kol-button--hide-label":!0===this.state._hideLabel,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}),disabled:this.state._disabled,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},t(g,{key:"6a1fa974599782667b0e1b9d888f67d9e0cc74ac",class:"kol-button__text",badgeText:l,icons:this.state._icons,hideLabel:this.state._hideLabel,label:s?"":this.state._label},t("slot",{key:"1f07a5048f510b5a912d1d3af30bce9ad8e4b835",name:"expert",slot:"expert"}))),t(r,{key:"31dab73a3a12f9a8b47ce9e1f44858a5fba3c1cd","aria-hidden":"true",hidden:s||!this.state._hideLabel,class:"kol-button__tooltip",_badgeText:l,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),o&&t("span",{key:"2466203cc457e420290a13831b895eae9d209740",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(t){s(this,t),this.internalDescriptionById=d(),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var a,i;"submit"===this.state._type?h({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?l({form:this.host,ref:this.buttonRef}):(this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(x(t,this.buttonRef),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value))),this.host&&e(this.host,o.click,this.state._value)},this.onMouseDown=t=>{var a,i,s;null===(s=null===(i=null===(a=this.state)||void 0===a?void 0:a._on)||void 0===i?void 0:i.onMouseDown)||void 0===s||s.call(i,t),this.host&&e(this.host,o.mousedown)},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 n(this,"button",this.host)}validateAccessKey(t){c(this,t),b(t,this._shortKey)}validateAriaControls(t){E(this,t)}validateAriaDescription(t){A(this,t)}validateAriaExpanded(t){S(this,t)}validateAriaSelected(t){H(this,t)}validateCustomClass(t){K(this,t)}validateDisabled(t){w(this,t)}validateHideLabel(t){B(this,t)}validateIcons(t){D(this,t)}validateId(t){m(this,"_id",t)}validateLabel(t){L(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){O(this,t)}validateRole(t){C(this,t)}validateShortKey(t){v(this,t),b(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){f(this,t)}validateTooltipAlign(t){V(this,t)}validateType(t){M(this,t)}validateValue(t){k(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){T(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),b(this._accessKey,this._shortKey)}get host(){return a(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"]}}};export{N as kol_button_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["validateAriaControls","component","value","watchString","validateAriaSelected","watchBoolean","validateButtonCallbacks","watchValidator","Set","buttonTypePropTypeOptions","validateButtonType","includes","join","buttonVariantPropTypeOptions","validateButtonVariant","defaultValue","KolButtonWc","kolFocus","_a","this","buttonRef","focus","render","hasExpertSlot","showExpertSlot","state","_label","hasAriaDescription","Boolean","_b","_ariaDescription","trim","length","badgeText","_accessKey","_shortKey","h","Host","key","class","Object","assign","ref","catchRef","accessKey","undefined","_ariaControls","internalDescriptionById","mapBoolean2String","_ariaExpanded","_hideLabel","mapStringOrBoolean2String","_ariaSelected","button","disabled","_disabled","_variant","_customClass","id","_id","name","_name","_on","onClick","role","_role","tabIndex","_tabIndex","type","_type","KolSpanFc","icons","_icons","hideLabel","label","slot","KolTooltipWcTag","hidden","_badgeText","_align","_tooltipAlign","constructor","hostRef","nonce","event","propagateSubmitEventToForm","form","host","propagateResetEventToForm","stopPropagation","tryToDispatchKoliBriEvent","_value","controller","setFormAssociatedValue","setEventTarget","AssociatedInputController","validateAccessKey","validateAccessAndShortKey","validateAriaDescription","validateAriaExpanded","validateCustomClass","validateDisabled","validateHideLabel","validateIcons","validateId","validateLabel","validateLabelWithExpertSlot","required","validateName","validateOn","validateRole","validateAlternativeButtonLinkRole","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTooltipAlign","validateType","validateValue","setState","validateVariant","componentWillLoad","_syncValueBySelector"],"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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["validateAriaControls","component","value","watchString","validateAriaSelected","watchBoolean","validateButtonCallbacks","watchValidator","Set","buttonTypePropTypeOptions","validateButtonType","includes","join","KolButtonWc","kolFocus","_a","this","buttonRef","focus","render","hasExpertSlot","showExpertSlot","state","_label","hasAriaDescription","Boolean","_b","_ariaDescription","trim","length","badgeText","_accessKey","_shortKey","h","Host","key","ref","catchRef","accessKey","undefined","_ariaControls","internalDescriptionById","mapBoolean2String","_ariaExpanded","_hideLabel","mapStringOrBoolean2String","_ariaSelected","class","clsx","_disabled","_variant","_customClass","disabled","id","_id","name","_name","onClick","onMouseDown","role","_role","tabIndex","_tabIndex","type","_type","KolSpanFc","icons","_icons","hideLabel","label","slot","KolTooltipWcTag","hidden","_badgeText","_align","_tooltipAlign","constructor","hostRef","nonce","event","propagateSubmitEventToForm","form","host","propagateResetEventToForm","controller","setFormAssociatedValue","_value","_on","setEventTarget","dispatchDomEvent","KolEvent","click","_c","call","mousedown","AssociatedInputController","validateAccessKey","validateAccessAndShortKey","validateAriaDescription","validateAriaExpanded","validateCustomClass","validateDisabled","validateHideLabel","validateIcons","validateId","validateLabel","validateLabelWithExpertSlot","required","validateName","validateOn","validateRole","validateAlternativeButtonLinkRole","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTooltipAlign","validateType","validateValue","setState","validateVariant","validateButtonVariant","componentWillLoad","_syncValueBySelector"],"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/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 */\ntype AriaControlsPropType = string;\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 { 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\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 { dispatchDomEvent, KolEvent } 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';\nimport clsx from 'clsx';\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// 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 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>\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={clsx('kol-button', {\n\t\t\t\t\t\t'kol-button--disabled': this.state._disabled === true,\n\t\t\t\t\t\t[`kol-button--${this.state._variant as string}`]: this.state._variant !== 'custom',\n\t\t\t\t\t\t'kol-button--hide-label': this.state._hideLabel === true,\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})}\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\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={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\tclass=\"kol-button__tooltip\"\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 which key combination can be used to trigger or focus the interactive element of the component.\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"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-a49af574.js";import{a as i}from"./component-names-aa3cbc3c.js";const o="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * 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    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}",a=o,s=class{constructor(t){n(this,t),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._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"}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 e(t,{key:"28f15441de520b7f0e0dd526dcdd9e02ab4e5a72",class:"kol-button"},e(i,{key:"c85003c733d45961086399afd01aba6de4f1ae40",ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},e("slot",{key:"8830c01e13e7cdad8f45e5fbbdf4f35832bd6704",name:"expert",slot:"expert"})))}static get delegatesFocus(){return!0}};s.style={default:a};export{s as kol_button};
+import{r as n,h as e}from"./index-2153bd8a.js";import{a as t}from"./component-names-545d6582.js";const i="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * 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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}",o=i,a=class{constructor(e){n(this,e),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._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"}async getValue(){return this._value}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"5519ef1a4a2b2712c79de19764e0bd953cab7593",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},e("slot",{key:"8d611f948fb4e30c1d8ca90fa7b7b8aa275f4a19",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:o};export{a as kol_button};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonDefaultStyle0","KolButton","this","catchRef","ref","buttonWcRef","getValue","_value","focus","kolFocus","_a","render","h","Host","key","class","KolButtonWcTag","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaDescription","_ariaExpanded","_ariaSelected","_disabled","_hideLabel","_icons","_id","_label","_name","_on","_role","_shortKey","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","name","slot"],"sources":["src/components/button/style.scss?tag=kol-button&mode=default&encapsulation=shadow","src/components/button/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../button';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\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',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolButton implements ButtonProps, 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\">\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\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_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\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={this._role}\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\t_variant={this._variant}\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 */\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 * Defines the elements short key.\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"],"mappings":";;;wGAAA,MAAMA,EAAkB,k5LACxB,MAAAC,EAAeD,E,MC8BFE,EAAS,M,yBAGJC,KAAAC,SAAYC,IAC5BF,KAAKG,YAAcD,CAAG,E,4LA6Fc,M,gBAOC,M,qOAmDgB,M,WAKV,S,oCAUM,Q,CAjK3C,cAAME,GACZ,OAAOJ,KAAKK,M,CAON,WAAMC,SACNN,KAAKO,U,CAIL,cAAMA,G,aACNC,EAAAR,KAAKG,eAAW,MAAAK,SAAA,SAAAA,EAAED,W,CAGlB,MAAAE,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACXH,EAACI,EAAc,CAAAF,IAAA,2CACdV,IAAKF,KAAKC,SACVY,MAAO,CACNE,OAAQ,KACR,CAACf,KAAKgB,UAAqBhB,KAAKgB,WAAa,SAC7C,CAAChB,KAAKiB,cAAyBjB,KAAKgB,WAAa,iBAAmBhB,KAAKiB,eAAiB,UAAYjB,KAAKiB,aAAaC,OAAS,GAElIC,WAAYnB,KAAKmB,WACjBC,cAAepB,KAAKoB,cACpBC,iBAAkBrB,KAAKqB,iBACvBC,cAAetB,KAAKsB,cACpBC,cAAevB,KAAKuB,cACpBN,aAAcjB,KAAKiB,aACnBO,UAAWxB,KAAKwB,UAChBC,WAAYzB,KAAKyB,WACjBC,OAAQ1B,KAAK0B,OACbC,IAAK3B,KAAK2B,IACVC,OAAQ5B,KAAK4B,OACbC,MAAO7B,KAAK6B,MACZC,IAAK9B,KAAK8B,IACVC,MAAO/B,KAAK+B,MACZC,UAAWhC,KAAKgC,UAChBC,qBAAsBjC,KAAKiC,qBAC3BC,UAAWlC,KAAKkC,UAChBC,cAAenC,KAAKmC,cACpBC,MAAOpC,KAAKoC,MACZ/B,OAAQL,KAAKK,OACbW,SAAUhB,KAAKgB,UAEfN,EAAA,QAAAE,IAAA,2CAAMyB,KAAK,SAASC,KAAK,Y","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolButtonDefaultStyle0","KolButton","this","catchRef","ref","buttonWcRef","getValue","_value","kolFocus","_a","render","h","KolButtonWcTag","key","_accessKey","_ariaControls","_ariaDescription","_ariaExpanded","_ariaSelected","_customClass","_disabled","_hideLabel","_icons","_id","_label","_name","_on","_role","_shortKey","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","_variant","name","slot"],"sources":["src/components/button/style.scss?tag=kol-button&mode=default&encapsulation=shadow","src/components/button/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../../styles/global';\n@import '../@shared/kol-button-mixin';\n\n@include kol-button-styles('kol-button');\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\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',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolButton implements ButtonProps, 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@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_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_role={this._role}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\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"],"mappings":";;;iGAAA,MAAMA,EAAkB,4uLACxB,MAAAC,EAAeD,E,MC8BFE,EAAS,M,yBAGJC,KAAAC,SAAYC,IAC5BF,KAAKG,YAAcD,CAAG,E,4LA8Ec,M,gBAOC,M,qOAmDgB,M,WAKV,S,oCAUM,Q,CAlJ3C,cAAME,GACZ,OAAOJ,KAAKK,M,CAIN,cAAMC,G,aACNC,EAAAP,KAAKG,eAAW,MAAAI,SAAA,SAAAA,EAAED,W,CAGlB,MAAAE,GACN,OACCC,EAACC,EAAc,CAAAC,IAAA,2CACdT,IAAKF,KAAKC,SACVW,WAAYZ,KAAKY,WACjBC,cAAeb,KAAKa,cACpBC,iBAAkBd,KAAKc,iBACvBC,cAAef,KAAKe,cACpBC,cAAehB,KAAKgB,cACpBC,aAAcjB,KAAKiB,aACnBC,UAAWlB,KAAKkB,UAChBC,WAAYnB,KAAKmB,WACjBC,OAAQpB,KAAKoB,OACbC,IAAKrB,KAAKqB,IACVC,OAAQtB,KAAKsB,OACbC,MAAOvB,KAAKuB,MACZC,IAAKxB,KAAKwB,IACVC,MAAOzB,KAAKyB,MACZC,UAAW1B,KAAK0B,UAChBC,qBAAsB3B,KAAK2B,qBAC3BC,UAAW5B,KAAK4B,UAChBC,cAAe7B,KAAK6B,cACpBC,MAAO9B,KAAK8B,MACZzB,OAAQL,KAAKK,OACb0B,SAAU/B,KAAK+B,UAEftB,EAAA,QAAAE,IAAA,2CAAMqB,KAAK,SAASC,KAAK,W","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-a49af574.js";import{t as i}from"./i18n-5fe08f1c.js";import{w as o}from"./validation-e83461ea.js";import{a}from"./component-names-aa3cbc3c.js";import{K as s}from"./Heading-1fe830dd.js";import{v as l}from"./has-closer-aa8f6369.js";import{s as r}from"./prop.validators-c5e6ad2d.js";import{v as d}from"./label-d70e7c34.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./tslib.es6-2e5096f8.js";import"./clsx-09a06a12.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const c="/*\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div.card {\n    height: 100%;\n    position: relative;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}",h=c,f=class{constructor(e){n(this,e),this.close=()=>{var n;void 0!==(null===(n=this._on)||void 0===n?void 0:n.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=n=>"object"==typeof n&&null!==n&&"function"==typeof n.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:""}}render(){return e(t,{key:"9aa65a489edc7dbe65aad70688fe0929d6011a3a",class:"kol-card"},e("div",{key:"fc94a21dd74dcb819ab293edff009e0822d32c6f",class:"card"},e("div",{key:"2f9ea910d296bec61e92b09c553b0b0d143df495",class:"header"},e(s,{key:"bf4fd020711c677817b3f154ff4c0487825225d9",level:this.state._level},this.state._label)),e("div",{key:"728cb833ef40bdb2ed16cfa5d1c98a9e42a56284",class:"content"},e("slot",{key:"062028afa26ed4a83b1b3e2f55b12919172ccc23"})),this.state._hasCloser&&e(a,{key:"c7307a3cca346e179c74bb78947486e9090c878e",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(n){this.validateOnValue(n)&&r(this,"_on",{onClose:n.onClose})}validateHasCloser(n){l(this,n)}validateLabel(n){d(this,n,{required:!0})}validateLevel(n){o(this,n)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};f.style={default:h};export{f as kol_card};
+import{r as n,h as e,g as t}from"./index-2153bd8a.js";import{t as i}from"./i18n-5fe08f1c.js";import{w as o}from"./validation-14b61e5a.js";import{a}from"./component-names-545d6582.js";import{d as s,K as l}from"./events-5adf6b62.js";import{K as r}from"./Heading-51231592.js";import{v as d}from"./has-closer-a4e62c58.js";import{s as c}from"./prop.validators-9feb1d92.js";import{v as h}from"./label-d0315384.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./tslib.es6-1173d062.js";import"./clsx-09a06a12.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";const f="/*\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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-card {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 100%;\n    position: relative;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card__close-button {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}",b=f,m=class{constructor(e){n(this,e),this.close=()=>{var n;void 0!==(null===(n=this._on)||void 0===n?void 0:n.onClose)&&this._on.onClose(new Event("Close")),this.host&&s(this.host,l.close)},this.on={onClick:this.close},this.validateOnValue=n=>"object"==typeof n&&null!==n&&"function"==typeof n.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=0,this.state={_label:""}}render(){return e("div",{key:"9b3f3c20c9f8873638f5b814a0bb975d35c6755f",class:"kol-card"},e("div",{key:"c27dd41fa36b132eb59a6f04079ea6f4449ccfa3",class:"kol-card__header"},e(r,{key:"2b20ac61c90422eed8000a20fd280e420a3a5baf",class:"kol-card__headline",level:this.state._level},this.state._label)),e("div",{key:"1603a72a02901b29effa7169aa8e50eb2c99ee05",class:"kol-card__content"},e("slot",{key:"97db416900df4d84d0d5060d9c0a0bf926c02dd3"})),this.state._hasCloser&&e(a,{key:"b3fd968a5063de19f354be783e37c2674ede03ef",class:"kol-card__close-button","data-testid":"card-close-button",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i("kol-close"),_on:this.on,_tooltipAlign:"left"}))}validateOn(n){this.validateOnValue(n)&&c(this,"_on",{onClose:n.onClose})}validateHasCloser(n){d(this,n)}validateLabel(n){h(this,n,{required:!0})}validateLevel(n){o(this,n)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}get host(){return t(this)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};m.style={default:b};export{m as kol_card};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolCardDefaultStyle0","KolCard","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","value","_label","render","h","Host","key","class","KolHeadingFc","level","state","_level","_hasCloser","KolButtonWcTag","_hideLabel","_icons","left","icon","translate","_tooltipAlign","validateOn","setState","validateHasCloser","validateLabel","required","validateLevel","watchHeadingLevel","componentWillLoad"],"sources":["src/components/card/style.scss?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t:host > div.card {\n\t\theight: 100%;\n\t\tposition: relative;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid rem(1);\n\t}\n\n\t.close {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t}\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { JSX } from '@stencil/core';\nimport type { CardAPI, CardStates, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, LabelPropType } from '../../schema';\nimport { setState, validateHasCloser, validateLabel } from '../../schema';\n\nimport { translate } from '../../i18n';\nimport { watchHeadingLevel } from '../heading/validation';\n\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KolHeadingFc } from '../../functional-components';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements CardAPI {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-card\">\n\t\t\t\t<div class=\"card\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<KolHeadingFc level={this.state._level}>{this.state._label}</KolHeadingFc>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t@State() public state: CardStates = {\n\t\t_label: '', // ⚠ required\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"mappings":";;;shBAAA,MAAMA,EAAkB,iuLACxB,MAAAC,EAAeD,E,MCoBFE,EAAO,M,yBACFC,KAAAC,MAAQ,K,MACxB,KAAIC,EAAAF,KAAKG,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCL,KAAKG,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZN,KAAAO,GAAK,CACrBC,QAASR,KAAKC,OAyDPD,KAAAS,gBAAmBC,UACnBA,IAAU,UAAYA,IAAU,aAAgBA,EAAoCN,UAAY,W,mCAjBlE,M,kCAUC,E,WAEH,CACnCO,OAAQ,G,CAnDF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,YACXH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACVH,EAACI,EAAY,CAAAF,IAAA,2CAACG,MAAOlB,KAAKmB,MAAMC,QAASpB,KAAKmB,MAAMR,SAErDE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACVH,EAAA,QAAAE,IAAA,8CAEAf,KAAKmB,MAAME,YACXR,EAACS,EAAc,CAAAP,IAAA,2CACdC,MAAM,QACNO,WAAU,KACVC,OAAQ,CACPC,KAAM,CACLC,KAAM,0BAGRf,OAAQgB,EAAU,aAClBxB,IAAKH,KAAKO,GACVqB,cAAc,U,CAqCb,UAAAC,CAAWnB,GACjB,GAAIV,KAAKS,gBAAgBC,GAAQ,CAChCoB,EAAoC9B,KAAM,MAAO,CAChDI,QAAUM,EAAqCN,S,EAM3C,iBAAA2B,CAAkBrB,GACxBqB,EAAkB/B,KAAMU,E,CAIlB,aAAAsB,CAActB,GACpBsB,EAAchC,KAAMU,EAAO,CAC1BuB,SAAU,M,CAKL,aAAAC,CAAcxB,GACpByB,EAAkBnC,KAAMU,E,CAGlB,iBAAA0B,GACNpC,KAAK+B,kBAAkB/B,KAAKqB,YAC5BrB,KAAKgC,cAAchC,KAAKW,QACxBX,KAAKkC,cAAclC,KAAKoB,QACxBpB,KAAK6B,WAAW7B,KAAKG,I","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolCardDefaultStyle0","KolCard","this","close","_a","_on","onClose","undefined","Event","host","dispatchDomEvent","KolEvent","on","onClick","validateOnValue","value","_label","render","h","key","class","KolHeadingFc","level","state","_level","_hasCloser","KolButtonWcTag","_hideLabel","_icons","left","icon","translate","_tooltipAlign","validateOn","setState","validateHasCloser","validateLabel","required","validateLevel","watchHeadingLevel","componentWillLoad"],"sources":["src/components/card/style.scss?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../../styles/global';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t.kol-card {\n\t\tfont-size: rem(16);\n\n\t\theight: 100%;\n\t\tposition: relative;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid rem(1);\n\n\t\t&__close-button {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport type { JSX } from '@stencil/core';\nimport type { CardAPI, CardStates, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, LabelPropType } from '../../schema';\nimport { setState, validateHasCloser, validateLabel } from '../../schema';\n\nimport { translate } from '../../i18n';\nimport { watchHeadingLevel } from '../heading/validation';\n\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KolHeadingFc } from '../../functional-components';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements CardAPI {\n\t@Element() private readonly host?: HTMLKolCardElement;\n\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class=\"kol-card\">\n\t\t\t\t<div class=\"kol-card__header\">\n\t\t\t\t\t<KolHeadingFc class=\"kol-card__headline\" level={this.state._level}>\n\t\t\t\t\t\t{this.state._label}\n\t\t\t\t\t</KolHeadingFc>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"kol-card__content\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-card__close-button\"\n\t\t\t\t\t\tdata-testid=\"card-close-button\"\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t@State() public state: CardStates = {\n\t\t_label: '', // ⚠ required\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"mappings":";;;skBAAA,MAAMA,EAAkB,wmLACxB,MAAAC,EAAeD,E,MCqBFE,EAAO,M,yBAGFC,KAAAC,MAAQ,K,MACxB,KAAIC,EAAAF,KAAKG,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCL,KAAKG,IAAIC,QAAQ,IAAIE,MAAM,S,CAE5B,GAAIN,KAAKO,KAAM,CACdC,EAAiBR,KAAKO,KAAME,EAASR,M,GAItBD,KAAAU,GAAK,CACrBC,QAASX,KAAKC,OA0DPD,KAAAY,gBAAmBC,UACnBA,IAAU,UAAYA,IAAU,aAAgBA,EAAoCT,UAAY,W,mCAjBlE,M,kCAUC,E,WAEH,CACnCU,OAAQ,G,CApDF,MAAAC,GACN,OACCC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,YACVF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACVF,EAACG,EAAY,CAAAF,IAAA,2CAACC,MAAM,qBAAqBE,MAAOpB,KAAKqB,MAAMC,QACzDtB,KAAKqB,MAAMP,SAGdE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,qBACVF,EAAA,QAAAC,IAAA,8CAEAjB,KAAKqB,MAAME,YACXP,EAACQ,EAAc,CAAAP,IAAA,2CACdC,MAAM,yBAAwB,cAClB,oBACZO,WAAU,KACVC,OAAQ,CACPC,KAAM,CACLC,KAAM,0BAGRd,OAAQe,EAAU,aAClB1B,IAAKH,KAAKU,GACVoB,cAAc,S,CAoCZ,UAAAC,CAAWlB,GACjB,GAAIb,KAAKY,gBAAgBC,GAAQ,CAChCmB,EAAoChC,KAAM,MAAO,CAChDI,QAAUS,EAAqCT,S,EAM3C,iBAAA6B,CAAkBpB,GACxBoB,EAAkBjC,KAAMa,E,CAIlB,aAAAqB,CAAcrB,GACpBqB,EAAclC,KAAMa,EAAO,CAC1BsB,SAAU,M,CAKL,aAAAC,CAAcvB,GACpBwB,EAAkBrC,KAAMa,E,CAGlB,iBAAAyB,GACNtC,KAAKiC,kBAAkBjC,KAAKuB,YAC5BvB,KAAKkC,cAAclC,KAAKc,QACxBd,KAAKoC,cAAcpC,KAAKsB,QACxBtB,KAAK+B,WAAW/B,KAAKG,I","ignoreList":[]}