@public-ui/components 2.0.15 → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"names":["formatNameAsInitial","name","length","toUpperCase","formatLabelAsInitials","label","names","split","first","at","last","KolAvatarWc","_src","_label","render","h","Host","key","class","translate","placeholders","this","state","role","alt","src","trim","validateSrc","value","validateImageSource","validateLabel","required","componentWillLoad"],"sources":["src/components/avatar/controller.ts","src/components/avatar/component.tsx"],"sourcesContent":["const formatNameAsInitial = (name: string): string => {\n\tif (name.length === 0) {\n\t\treturn '';\n\t}\n\n\treturn name[0].toUpperCase();\n};\n\nexport const formatLabelAsInitials = (label: string): string => {\n\tconst names = label.split(/\\s+/); // split by any whitespace characters\n\tconst first = names.at(0);\n\tconst last = names.at(-1);\n\n\t// names might consist of only one word\n\tif (names.length >= 2 && first && last) {\n\t\treturn `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;\n\t}\n\n\treturn formatNameAsInitial(label);\n};\n","import type { JSX } from '@stencil/core';\nimport { validateImageSource, validateLabel } from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { formatLabelAsInitials } from './controller';\n\nimport type { AvatarAPI, AvatarStates, ImageSourcePropType, LabelPropType } from '@public-ui/schema';\n@Component({\n\ttag: 'kol-avatar-wc',\n\tshadow: false,\n})\nexport class KolAvatarWc implements AvatarAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar-wc\">\n\t\t\t\t<div aria-label={translate('kol-avatar-alt', { placeholders: { name: this.state._label } })} class=\"container\" role=\"img\">\n\t\t\t\t\t{this.state._src ? (\n\t\t\t\t\t\t<img alt=\"\" aria-hidden=\"true\" class=\"image\" src={this.state._src} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span aria-hidden=\"true\" class=\"initials\">\n\t\t\t\t\t\t\t{formatLabelAsInitials(this.state._label.trim())}\n\t\t\t\t\t\t</span>\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 * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: ImageSourcePropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: AvatarStates = {\n\t\t_src: '',\n\t\t_label: '', // ⚠ required\n\t};\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(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\tpublic componentWillLoad(): void {\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;uKAAA,MAAMA,EAAuBC,IAC5B,GAAIA,EAAKC,SAAW,EAAG,CACtB,MAAO,E,CAGR,OAAOD,EAAK,GAAGE,aAAa,EAGtB,MAAMC,EAAyBC,IACrC,MAAMC,EAAQD,EAAME,MAAM,OAC1B,MAAMC,EAAQF,EAAMG,GAAG,GACvB,MAAMC,EAAOJ,EAAMG,IAAI,GAGvB,GAAIH,EAAMJ,QAAU,GAAKM,GAASE,EAAM,CACvC,MAAO,GAAGV,EAAoBQ,KAASR,EAAoBU,I,CAG5D,OAAOV,EAAoBK,EAAM,E,MCNrBM,EAAW,M,8EA2Be,CACrCC,KAAM,GACNC,OAAQ,G,CA5BF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,iBACXH,EAAA,OAAAE,IAAA,wDAAiBE,EAAU,iBAAkB,CAAEC,aAAc,CAAEnB,KAAMoB,KAAKC,MAAMT,UAAaK,MAAM,YAAYK,KAAK,OAClHF,KAAKC,MAAMV,KACXG,EAAA,OAAKS,IAAI,GAAE,cAAa,OAAON,MAAM,QAAQO,IAAKJ,KAAKC,MAAMV,OAE7DG,EAAA,sBAAkB,OAAOG,MAAM,YAC7Bd,EAAsBiB,KAAKC,MAAMT,OAAOa,U,CAwBxC,WAAAC,CAAYC,GAClBC,EAAoBR,KAAMO,E,CAIpB,aAAAE,CAAcF,GACpBE,EAAcT,KAAMO,EAAO,CAC1BG,SAAU,M,CAIL,iBAAAC,GACNX,KAAKM,YAAYN,KAAKT,MACtBS,KAAKS,cAAcT,KAAKR,O"}
+{"version":3,"names":["formatNameAsInitial","name","length","toUpperCase","formatLabelAsInitials","label","names","split","first","at","last","KolAvatarWc","_src","_label","render","h","Host","key","class","translate","placeholders","this","state","role","alt","src","trim","validateSrc","value","validateImageSource","validateLabel","required","componentWillLoad"],"sources":["src/components/avatar/controller.ts","src/components/avatar/component.tsx"],"sourcesContent":["const formatNameAsInitial = (name: string): string => {\n\tif (name.length === 0) {\n\t\treturn '';\n\t}\n\n\treturn name[0].toUpperCase();\n};\n\nexport const formatLabelAsInitials = (label: string): string => {\n\tconst names = label.split(/\\s+/); // split by any whitespace characters\n\tconst first = names.at(0);\n\tconst last = names.at(-1);\n\n\t// names might consist of only one word\n\tif (names.length >= 2 && first && last) {\n\t\treturn `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;\n\t}\n\n\treturn formatNameAsInitial(label);\n};\n","import type { JSX } from '@stencil/core';\nimport { validateImageSource, validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { formatLabelAsInitials } from './controller';\n\nimport type { AvatarAPI, AvatarStates, ImageSourcePropType, LabelPropType } from '../../schema';\n@Component({\n\ttag: 'kol-avatar-wc',\n\tshadow: false,\n})\nexport class KolAvatarWc implements AvatarAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar-wc\">\n\t\t\t\t<div aria-label={translate('kol-avatar-alt', { placeholders: { name: this.state._label } })} class=\"container\" role=\"img\">\n\t\t\t\t\t{this.state._src ? (\n\t\t\t\t\t\t<img alt=\"\" aria-hidden=\"true\" class=\"image\" src={this.state._src} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span aria-hidden=\"true\" class=\"initials\">\n\t\t\t\t\t\t\t{formatLabelAsInitials(this.state._label.trim())}\n\t\t\t\t\t\t</span>\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 * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: ImageSourcePropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: AvatarStates = {\n\t\t_src: '',\n\t\t_label: '', // ⚠ required\n\t};\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(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\tpublic componentWillLoad(): void {\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;6UAAA,MAAMA,EAAuBC,IAC5B,GAAIA,EAAKC,SAAW,EAAG,CACtB,MAAO,E,CAGR,OAAOD,EAAK,GAAGE,aAAa,EAGtB,MAAMC,EAAyBC,IACrC,MAAMC,EAAQD,EAAME,MAAM,OAC1B,MAAMC,EAAQF,EAAMG,GAAG,GACvB,MAAMC,EAAOJ,EAAMG,IAAI,GAGvB,GAAIH,EAAMJ,QAAU,GAAKM,GAASE,EAAM,CACvC,MAAO,GAAGV,EAAoBQ,KAASR,EAAoBU,I,CAG5D,OAAOV,EAAoBK,EAAM,E,MCNrBM,EAAW,M,8EA2Be,CACrCC,KAAM,GACNC,OAAQ,G,CA5BF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,iBACXH,EAAA,OAAAE,IAAA,wDAAiBE,EAAU,iBAAkB,CAAEC,aAAc,CAAEnB,KAAMoB,KAAKC,MAAMT,UAAaK,MAAM,YAAYK,KAAK,OAClHF,KAAKC,MAAMV,KACXG,EAAA,OAAKS,IAAI,GAAE,cAAa,OAAON,MAAM,QAAQO,IAAKJ,KAAKC,MAAMV,OAE7DG,EAAA,sBAAkB,OAAOG,MAAM,YAC7Bd,EAAsBiB,KAAKC,MAAMT,OAAOa,U,CAwBxC,WAAAC,CAAYC,GAClBC,EAAoBR,KAAMO,E,CAIpB,aAAAE,CAAcF,GACpBE,EAAcT,KAAMO,EAAO,CAC1BG,SAAU,M,CAIL,iBAAAC,GACNX,KAAKM,YAAYN,KAAKT,MACtBS,KAAKS,cAAcT,KAAKR,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-3fbcceca.js";import{e as i}from"./component-names-ed22f86e.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n    /*theme?*/\n    width: 100px;\n    height: 100px;\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*theme?*/\n    background: #d3d3d3;\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n}",a=o,s=class{constructor(e){n(this,e),this._src=void 0,this._label=void 0}render(){return e(t,{key:"c10a3e22a9825845f9ba2c0dcd5a469115ff7b6c",class:"kol-avatar"},e(i,{key:"91b780eeab485179a1f7e158965bd6a244cd6e67",_src:this._src,_label:this._label}))}};s.style={default:a};export{s as kol_avatar};
+import{r as n,h as e,H as t}from"./index-3fbcceca.js";import{e as i}from"./component-names-ed22f86e.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n    /*theme?*/\n    width: 100px;\n    height: 100px;\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*theme?*/\n    background: #d3d3d3;\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n}",a=o,s=class{constructor(e){n(this,e),this._src=void 0,this._label=void 0}render(){return e(t,{key:"27dcef5bc7bcb3d600f33e1776e8c1e913ede9d8",class:"kol-avatar"},e(i,{key:"f8c1eb9c59ef3bbcbe704834ce4325284f8e6e8c",_src:this._src,_label:this._label}))}};s.style={default:a};export{s as kol_avatar};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolAvatarDefaultStyle0","KolAvatar","render","h","Host","key","class","KolAvatarWcTag","_src","this","_label"],"sources":["src/components/avatar/style.scss?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid 1px;\n\t\t/*theme?*/\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t/*theme?*/\n\t\tbackground: #d3d3d3;\n\t\tfont-size: rem(32);\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { AvatarProps } from '@public-ui/schema';\nimport { KolAvatarWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements AvatarProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar\">\n\t\t\t\t<KolAvatarWcTag _src={this._src} _label={this._label}></KolAvatarWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAkB,yrJACxB,MAAAC,EAAeD,E,MCYFE,EAAS,M,mEACd,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACXH,EAACI,EAAc,CAAAF,IAAA,2CAACG,KAAMC,KAAKD,KAAME,OAAQD,KAAKC,S"}
+{"version":3,"names":["defaultStyleCss","KolAvatarDefaultStyle0","KolAvatar","render","h","Host","key","class","KolAvatarWcTag","_src","this","_label"],"sources":["src/components/avatar/style.scss?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid 1px;\n\t\t/*theme?*/\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t/*theme?*/\n\t\tbackground: #d3d3d3;\n\t\tfont-size: rem(32);\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { AvatarProps } from '../../schema';\nimport { KolAvatarWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements AvatarProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar\">\n\t\t\t\t<KolAvatarWcTag _src={this._src} _label={this._label}></KolAvatarWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAkB,yrJACxB,MAAAC,EAAeD,E,MCYFE,EAAS,M,mEACd,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACXH,EAACI,EAAc,CAAAF,IAAA,2CAACG,KAAMC,KAAKD,KAAME,OAAQD,KAAKC,S"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-3fbcceca.js";import{f as i,n as o,o as s,q as a,r as l,k as r}from"./index-44da6e7f.js";import{c as d,f as h}from"./component-names-ed22f86e.js";import{n as c}from"./dev.utils-ba0ad340.js";const u="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  /* :host implicitly inherits font-size, e.g. for usage in headlines */\n  :host > span {\n    display: inline-flex;\n    place-items: center;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host > span > .kol-button-wc button {\n    color: inherit;\n  }\n}",b=u;i("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const p=class{constructor(t){n(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.id=c(),this.handleColorChange=n=>{const t=o(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(n){return e(d,{_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_variant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return e(t,{key:"746b69d7e6a31860bcf349493beb6f203ae88a17",class:"kol-badge"},e("span",{key:"6a89317d2c932f4c3b271f5e15068ec818d59f5a",class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},e(h,{key:"5db2e58b4886b2732b7c0735196c26748b2f1f52",id:n?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),n&&this.renderSmartButton(this.state._smartButton)))}validateColor(n){s(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){a(n,(()=>{try{n=l(n)}catch(n){}r(this,"_smartButton",n)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};p.style={default:b};export{p as kol_badge};
+import{r as n,h as e,H as t}from"./index-3fbcceca.js";import{c as i,f as o}from"./component-names-ed22f86e.js";import{n as a}from"./dev.utils-37559a2c.js";import{h as s,v as l}from"./color-5129ba78.js";import{f as r,o as d,p as h,s as c}from"./prop.validators-29d576d2.js";import"./dev.utils-1ca991a2.js";import"./reuse-b66836de.js";import"./index-4a3076fc.js";const u="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  /* :host implicitly inherits font-size, e.g. for usage in headlines */\n  :host > span {\n    display: inline-flex;\n    place-items: center;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host > span > .kol-button-wc button {\n    color: inherit;\n  }\n}",p=u;r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const b=class{constructor(t){n(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.id=a(),this.handleColorChange=n=>{const t=s(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(n){return e(i,{_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_variant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return e(t,{key:"0b334746c26463bbc697f08077e165e56b34a97f",class:"kol-badge"},e("span",{key:"83210f467b224cb691d844a0311f4a31a1ad6e79",class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},e(o,{key:"d5a3248d67baa494d9671e0da7de918511af084b",id:n?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),n&&this.renderSmartButton(this.state._smartButton)))}validateColor(n){l(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){d(n,(()=>{try{n=h(n)}catch(n){}c(this,"_smartButton",n)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};b.style={default:p};export{b as kol_badge};

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","renderSmartButton","props","h","KolButtonWcTag","_ariaControls","_customClass","_disabled","_hideLabel","_icons","_id","_label","_on","_tooltipAlign","_variant","render","hasSmartButton","state","_smartButton","Host","key","class","style","color","KolSpanWcTag","undefined","_allowMarkdown","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/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t/* :host implicitly inherits font-size, e.g. for usage in headlines */\n\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid 1px;\n\t}\n\n\t:host > span > .kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n","import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '@public-ui/schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor } from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { KolSpanWcTag } from '../../core/component-names';\n\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tprivate renderSmartButton(props: ButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t\t_variant={props._variant}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\t\treturn (\n\t\t\t<Host class=\"kol-badge\">\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolSpanWcTag id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></KolSpanWcTag>\n\t\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t};\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('_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.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"mappings":";;;sOAAA,MAAMA,EAAkB,g2IACxB,MAAAC,EAAeD,ECQfE,EAAY,uE,MASCC,EAAQ,M,yBACZC,KAAAC,WAAa,OACbD,KAAAE,SAAW,OACFF,KAAAG,GAAKC,IAkEdJ,KAAAK,kBAAqBC,IAC5B,MAAMC,EAAYF,EAAkBC,GACpCN,KAAKC,WAAaM,EAAUC,gBAC5BR,KAAKE,SAAWK,EAAUE,eAAyB,E,YA3BH,O,mFAiBZ,CACpCC,OAAQ,CACPF,gBAAiB,OACjBC,gBAAiB,Q,CA5DX,iBAAAE,CAAkBC,GACzB,OACCC,EAACC,EAAc,CACdC,cAAef,KAAKG,GACpBa,aAAcJ,EAAMI,aACpBC,UAAWL,EAAMK,UACjBC,WAAY,KACZC,OAAQP,EAAMO,OACdC,IAAKR,EAAMQ,IACXC,OAAQT,EAAMS,OACdC,IAAKV,EAAMU,IACXC,cAAeX,EAAMW,cACrBC,SAAUZ,EAAMY,U,CAKZ,MAAAC,GACN,MAAMC,SAAwB1B,KAAK2B,MAAMC,eAAiB,UAAY5B,KAAK2B,MAAMC,eAAiB,KAClG,OACCf,EAACgB,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACXlB,EAAA,QAAAiB,IAAA,2CACCC,MAAO,CACN,sBAAuB/B,KAAK2B,MAAMC,eAAiB,UAAY5B,KAAK2B,MAAMC,eAAiB,MAE5FI,MAAO,CACNxB,gBAAiBR,KAAKC,WACtBgC,MAAOjC,KAAKE,WAGbW,EAACqB,EAAY,CAAAJ,IAAA,2CAAC3B,GAAIuB,EAAiB1B,KAAKG,GAAKgC,UAAWC,eAAc,KAACjB,OAAQnB,KAAKmB,OAAQE,OAAQrB,KAAKqB,SACxGK,GAAkB1B,KAAKW,kBAAkBX,KAAK2B,MAAMC,e,CAwClD,aAAAS,CAAc/B,GACpB+B,EAAcrC,KAAMM,EAAO,CAC1BgC,aAAc,OACdC,MAAO,CACNC,YAAaxC,KAAKK,oB,CAMd,mBAAAoC,CAAoBnC,GAC1BoC,EAAoBpC,GAAO,KAC1B,IACCA,EAAQqC,EAAuBrC,E,CAE9B,MAAOsC,G,CAGTC,EAAS7C,KAAM,eAAgBM,EAAM,G,CAIhC,iBAAAwC,GACN9C,KAAKqC,cAAcrC,KAAKU,QACxBV,KAAKyC,oBAAoBzC,KAAK4B,a"}
+{"version":3,"names":["defaultStyleCss","KolBadgeDefaultStyle0","featureHint","KolBadge","this","bgColorStr","colorStr","id","nonce","handleColorChange","value","colorPair","backgroundColor","foregroundColor","_color","renderSmartButton","props","h","KolButtonWcTag","_ariaControls","_customClass","_disabled","_hideLabel","_icons","_id","_label","_on","_tooltipAlign","_variant","render","hasSmartButton","state","_smartButton","Host","key","class","style","color","KolSpanWcTag","undefined","_allowMarkdown","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/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t/* :host implicitly inherits font-size, e.g. for usage in headlines */\n\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid 1px;\n\t}\n\n\t:host > span > .kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n","import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { KolSpanWcTag } from '../../core/component-names';\n\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tprivate renderSmartButton(props: ButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t\t_variant={props._variant}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\t\treturn (\n\t\t\t<Host class=\"kol-badge\">\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolSpanWcTag id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></KolSpanWcTag>\n\t\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t};\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('_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.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"mappings":";;;yWAAA,MAAMA,EAAkB,g2IACxB,MAAAC,EAAeD,ECQfE,EAAY,uE,MASCC,EAAQ,M,yBACZC,KAAAC,WAAa,OACbD,KAAAE,SAAW,OACFF,KAAAG,GAAKC,IAkEdJ,KAAAK,kBAAqBC,IAC5B,MAAMC,EAAYF,EAAkBC,GACpCN,KAAKC,WAAaM,EAAUC,gBAC5BR,KAAKE,SAAWK,EAAUE,eAAyB,E,YA3BH,O,mFAiBZ,CACpCC,OAAQ,CACPF,gBAAiB,OACjBC,gBAAiB,Q,CA5DX,iBAAAE,CAAkBC,GACzB,OACCC,EAACC,EAAc,CACdC,cAAef,KAAKG,GACpBa,aAAcJ,EAAMI,aACpBC,UAAWL,EAAMK,UACjBC,WAAY,KACZC,OAAQP,EAAMO,OACdC,IAAKR,EAAMQ,IACXC,OAAQT,EAAMS,OACdC,IAAKV,EAAMU,IACXC,cAAeX,EAAMW,cACrBC,SAAUZ,EAAMY,U,CAKZ,MAAAC,GACN,MAAMC,SAAwB1B,KAAK2B,MAAMC,eAAiB,UAAY5B,KAAK2B,MAAMC,eAAiB,KAClG,OACCf,EAACgB,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACXlB,EAAA,QAAAiB,IAAA,2CACCC,MAAO,CACN,sBAAuB/B,KAAK2B,MAAMC,eAAiB,UAAY5B,KAAK2B,MAAMC,eAAiB,MAE5FI,MAAO,CACNxB,gBAAiBR,KAAKC,WACtBgC,MAAOjC,KAAKE,WAGbW,EAACqB,EAAY,CAAAJ,IAAA,2CAAC3B,GAAIuB,EAAiB1B,KAAKG,GAAKgC,UAAWC,eAAc,KAACjB,OAAQnB,KAAKmB,OAAQE,OAAQrB,KAAKqB,SACxGK,GAAkB1B,KAAKW,kBAAkBX,KAAK2B,MAAMC,e,CAwClD,aAAAS,CAAc/B,GACpB+B,EAAcrC,KAAMM,EAAO,CAC1BgC,aAAc,OACdC,MAAO,CACNC,YAAaxC,KAAKK,oB,CAMd,mBAAAoC,CAAoBnC,GAC1BoC,EAAoBpC,GAAO,KAC1B,IACCA,EAAQqC,EAAuBrC,E,CAE9B,MAAOsC,G,CAGTC,EAAS7C,KAAM,eAAgBM,EAAM,G,CAIhC,iBAAAwC,GACN9C,KAAKqC,cAAcrC,KAAKU,QACxBV,KAAKyC,oBAAoBzC,KAAK4B,a"}

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,H as i}from"./index-3fbcceca.js";import{v as o,t as a}from"./index-44da6e7f.js";import{r as s,a as l}from"./unique-nav-labels-62d9802d.js";import{w as r}from"./validation-daa38230.js";import{g as d,h as c}from"./component-names-ed22f86e.js";const h="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",b=h,p=class{constructor(i){n(this,i),this.renderLink=(n,i)=>{const a=this.state._links.length-1;return e("li",{key:i},0!==i&&e(d,{_label:"",_icons:"codicon codicon-chevron-right"}),i===a?e("span",null,n._hideLabel?e(d,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):e(t,null,n._label)):e(c,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e(i,{key:"254bccd49021ec2d56c6b38b8240df50dc7c5023",class:"kol-breadcrumb"},e("nav",{key:"dbd48e397c56b0b0c45af00c09a4d616ff329f41","aria-label":this.state._label},e("ul",{key:"57f211b69a85c5af31ac9d50602048a62b016bac"},0===this.state._links.length&&e("li",{key:"6d59d8598caa0c7c1fafde753e9b87431aedbc99"},e(d,{key:"9b1dfc2eddc205ee1db8554ccbb8891b6704f58c",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||s(this.state._label),o(this,n,{required:!0}),a(n),l(this.state._label)}validateLinks(n){r("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){s(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};p.style={default:b};export{p as kol_breadcrumb};
+import{r as n,h as e,F as t,H as i}from"./index-3fbcceca.js";import{r as a,a as o}from"./unique-nav-labels-62d9802d.js";import{w as s}from"./validation-561836d9.js";import{g as l,h as r}from"./component-names-ed22f86e.js";import{e as d}from"./prop.validators-29d576d2.js";import{v as c}from"./label-e56ffdc6.js";import"./index-4a3076fc.js";import"./dev.utils-1ca991a2.js";const h="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",b=h,p=class{constructor(i){n(this,i),this.renderLink=(n,i)=>{const a=this.state._links.length-1;return e("li",{key:i},0!==i&&e(l,{_label:"",_icons:"codicon codicon-chevron-right"}),i===a?e("span",null,n._hideLabel?e(l,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):e(t,null,n._label)):e(r,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e(i,{key:"1cfa36fa9a381d7b470854ec4a550b54817e37d6",class:"kol-breadcrumb"},e("nav",{key:"d913f0b8853e65302801b62abb9ee1a7911ba264","aria-label":this.state._label},e("ul",{key:"9719d99bcfedb925e819b0abf14977692fdabc76"},0===this.state._links.length&&e("li",{key:"1681efdfcdb0eb6d31fe0baf14efa89208ef04e9"},e(l,{key:"21f1969a164aaa85d48a8e985e2e788be10a5135",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||a(this.state._label),c(this,n,{required:!0}),d(n),o(this.state._label)}validateLinks(n){s("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){a(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};p.style={default:b};export{p 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","key","KolIconTag","_label","_icons","_hideLabel","Fragment","KolLinkTag","Object","assign","render","Host","class","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/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\t.kol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\t.kol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n","import type { BreadcrumbAPI, BreadcrumbLinkProps, BreadcrumbStates, LabelPropType, LinkProps, Stringified } from '@public-ui/schema';\nimport { a11yHintLabelingLandmarks, validateLabel } from '@public-ui/schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolIconTag, KolLinkTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements BreadcrumbAPI {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<li key={index}>\n\t\t\t\t{index !== 0 && <KolIconTag _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{link._hideLabel ? (\n\t\t\t\t\t\t\t<KolIconTag _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>{link._label}</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<KolLinkTag {...link}></KolLinkTag>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-breadcrumb\">\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<KolIconTag _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: BreadcrumbStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;6QAAA,MAAMA,EAAkB,g/IACxB,MAAAC,EAAeD,E,MCgBFE,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,IAAKN,GACPA,IAAU,GAAKK,EAACE,EAAU,CAACC,OAAO,GAAGC,OAAO,kCAC5CT,IAAUC,EACVI,EAAA,YACEN,EAAKW,WACLL,EAACE,EAAU,CAACC,OAAQT,EAAKS,OAAQC,cAAeV,EAAKU,SAAW,SAAWV,EAAKU,OAAS,iCAEzFJ,EAAAM,EAAA,KAAGZ,EAAKS,SAIVH,EAACO,EAAUC,OAAAC,OAAA,GAAKf,IAEb,E,uDA+BmC,CACzCS,OAAQ,GACRL,OAAQ,G,CA7BF,MAAAY,GACN,OACCV,EAACW,EAAI,CAAAV,IAAA,2CAACW,MAAM,kBACXZ,EAAA,OAAAC,IAAA,wDAAiBT,KAAKK,MAAMM,QAC3BH,EAAA,MAAAC,IAAA,4CACET,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,MAAAC,IAAA,4CACCD,EAACE,EAAU,CAAAD,IAAA,2CAACE,OAAO,GAAGC,OAAO,yBAAyB,KAGvDZ,KAAKK,MAAMC,OAAOe,IAAIrB,KAAKC,c,CAuB1B,aAAAqB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAe1B,KAAKK,MAAMM,O,CAE3BW,EAActB,KAAMuB,EAAO,CAC1BI,SAAU,OAEXC,EAA0BL,GAC1BM,EAAY7B,KAAKK,MAAMM,O,CAIjB,aAAAmB,CAAcP,GACpBQ,EAAc,gBAAiB/B,KAAMuB,E,CAG/B,iBAAAS,GACNhC,KAAKsB,cAActB,KAAKW,OAAQsB,UAAW,MAC3CjC,KAAK8B,cAAc9B,KAAKM,O,CAGlB,oBAAA4B,GACNR,EAAe1B,KAAKK,MAAMM,O"}
+{"version":3,"names":["defaultStyleCss","KolBreadcrumbDefaultStyle0","KolBreadcrumb","this","renderLink","link","index","lastIndex","state","_links","length","h","key","KolIconTag","_label","_icons","_hideLabel","Fragment","KolLinkTag","Object","assign","render","Host","class","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/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\t.kol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\t.kol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n","import type { BreadcrumbAPI, BreadcrumbLinkProps, BreadcrumbStates, LabelPropType, LinkProps, Stringified } from '../../schema';\nimport { a11yHintLabelingLandmarks, validateLabel } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolIconTag, KolLinkTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements BreadcrumbAPI {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<li key={index}>\n\t\t\t\t{index !== 0 && <KolIconTag _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{link._hideLabel ? (\n\t\t\t\t\t\t\t<KolIconTag _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>{link._label}</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<KolLinkTag {...link}></KolLinkTag>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-breadcrumb\">\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<KolIconTag _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: BreadcrumbStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;oXAAA,MAAMA,EAAkB,g/IACxB,MAAAC,EAAeD,E,MCgBFE,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,IAAKN,GACPA,IAAU,GAAKK,EAACE,EAAU,CAACC,OAAO,GAAGC,OAAO,kCAC5CT,IAAUC,EACVI,EAAA,YACEN,EAAKW,WACLL,EAACE,EAAU,CAACC,OAAQT,EAAKS,OAAQC,cAAeV,EAAKU,SAAW,SAAWV,EAAKU,OAAS,iCAEzFJ,EAAAM,EAAA,KAAGZ,EAAKS,SAIVH,EAACO,EAAUC,OAAAC,OAAA,GAAKf,IAEb,E,uDA+BmC,CACzCS,OAAQ,GACRL,OAAQ,G,CA7BF,MAAAY,GACN,OACCV,EAACW,EAAI,CAAAV,IAAA,2CAACW,MAAM,kBACXZ,EAAA,OAAAC,IAAA,wDAAiBT,KAAKK,MAAMM,QAC3BH,EAAA,MAAAC,IAAA,4CACET,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,MAAAC,IAAA,4CACCD,EAACE,EAAU,CAAAD,IAAA,2CAACE,OAAO,GAAGC,OAAO,yBAAyB,KAGvDZ,KAAKK,MAAMC,OAAOe,IAAIrB,KAAKC,c,CAuB1B,aAAAqB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAe1B,KAAKK,MAAMM,O,CAE3BW,EAActB,KAAMuB,EAAO,CAC1BI,SAAU,OAEXC,EAA0BL,GAC1BM,EAAY7B,KAAKK,MAAMM,O,CAIjB,aAAAmB,CAAcP,GACpBQ,EAAc,gBAAiB/B,KAAMuB,E,CAG/B,iBAAAS,GACNhC,KAAKsB,cAActB,KAAKW,OAAQsB,UAAW,MAC3CjC,KAAK8B,cAAc9B,KAAKM,O,CAGlB,oBAAA4B,GACNR,EAAe1B,KAAKK,MAAMM,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as c,h as a,H as o}from"./index-3fbcceca.js";const s=class{constructor(a){c(this,a),this.state={}}render(){return a(o,{key:"9fbc05912a978daa9a990739dda78f117e87574c",class:"kol-button-group-wc"},a("slot",{key:"f2c31dd0205d6a6143661c20dc23df51f7aaf91c"}))}};export{s as kol_button_group_wc};
+import{r as e,h as o,H as s}from"./index-3fbcceca.js";const t=class{constructor(s){e(this,s),this.state={}}render(){return o(s,{key:"d70d07aee8bf780d21f93ad48d5549e65e889f02",class:"kol-button-group-wc"},o("slot",{key:"3dfb84fee69b23211aab06b29d28690cdebe5ffc"}))}};export{t as kol_button_group_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["KolButtonGroupWc","render","h","Host","key","class"],"sources":["src/components/button-group/component.tsx"],"sourcesContent":["import type { ButtonGroupAPI, ButtonGroupStates } from '@public-ui/schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, State } from '@stencil/core';\n\n@Component({\n\ttag: 'kol-button-group-wc',\n\tshadow: false,\n})\n/**\n * @deprecated This component has been deprecated as it does not contribute significantly to accessibility.\n */\nexport class KolButtonGroupWc implements ButtonGroupAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-group-wc\">\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: ButtonGroupStates = {};\n}\n"],"mappings":";;;4DAWaA,EAAgB,M,oCASe,E,CARpC,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,uBACXH,EAAA,QAAAE,IAAA,6C"}
+{"version":3,"names":["KolButtonGroupWc","render","h","Host","key","class"],"sources":["src/components/button-group/component.tsx"],"sourcesContent":["import type { ButtonGroupAPI, ButtonGroupStates } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, State } from '@stencil/core';\n\n@Component({\n\ttag: 'kol-button-group-wc',\n\tshadow: false,\n})\n/**\n * @deprecated This component has been deprecated as it does not contribute significantly to accessibility.\n */\nexport class KolButtonGroupWc implements ButtonGroupAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-group-wc\">\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: ButtonGroupStates = {};\n}\n"],"mappings":";;;4DAWaA,EAAgB,M,oCASe,E,CARpC,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,uBACXH,EAAA,QAAAE,IAAA,6C"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonGroupDefaultStyle0","KolButtonGroup","render","h","Host","key","class","KolButtonGroupWcTag"],"sources":["src/components/button-group/style.scss?tag=kol-button-group&mode=default&encapsulation=shadow","src/components/button-group/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t:host > .kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import type { ButtonGroupProps } from '@public-ui/schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host } from '@stencil/core';\nimport { KolButtonGroupWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements ButtonGroupProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-group\">\n\t\t\t\t<KolButtonGroupWcTag>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolButtonGroupWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;mGAAA,MAAMA,EAAkB,4tIACxB,MAAAC,EAAeD,E,MCWFE,EAAc,M,yBACnB,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,oBACXH,EAACI,EAAmB,CAAAF,IAAA,4CACnBF,EAAA,QAAAE,IAAA,8C"}
+{"version":3,"names":["defaultStyleCss","KolButtonGroupDefaultStyle0","KolButtonGroup","render","h","Host","key","class","KolButtonGroupWcTag"],"sources":["src/components/button-group/style.scss?tag=kol-button-group&mode=default&encapsulation=shadow","src/components/button-group/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t:host > .kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import type { ButtonGroupProps } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host } from '@stencil/core';\nimport { KolButtonGroupWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements ButtonGroupProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-group\">\n\t\t\t\t<KolButtonGroupWcTag>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolButtonGroupWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;mGAAA,MAAMA,EAAkB,4tIACxB,MAAAC,EAAeD,E,MCWFE,EAAc,M,yBACnB,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,oBACXH,EAACI,EAAmB,CAAAF,IAAA,4CACnBF,EAAA,QAAAE,IAAA,8C"}

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,g as i}from"./index-3fbcceca.js";import{h as o}from"./index-44da6e7f.js";import{c as s}from"./component-names-ed22f86e.js";const a="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    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: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]),\n  button:is(:focus, :hover):not([disabled]) {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\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  }\n}",l=a,d=class{constructor(e){n(this,e),this.catchRef=n=>{o(this.host,n)},this._accessKey=void 0,this._ariaControls=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._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}render(){return e(t,{key:"bd8d9c18b824af71b6e02763f80a619d4b92bf82",class:"kol-button-link"},e(s,{key:"c60e6ed4dd984141f90e773194fd7157a9348570",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_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",_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},e("slot",{key:"bba6c4a3141df4f4afbfff5abd8b6b8e2c6f3572",name:"expert",slot:"expert"})))}get host(){return i(this)}};d.style={default:l};export{d as kol_button_link};
+import{r as n,h as e,H as t,g as i}from"./index-3fbcceca.js";import{c as o}from"./component-names-ed22f86e.js";import{a as s}from"./reuse-b66836de.js";const a="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    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: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]),\n  button:is(:focus, :hover):not([disabled]) {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\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  }\n}",l=a,d=class{constructor(e){n(this,e),this.catchRef=n=>{s(this.host,n)},this._accessKey=void 0,this._ariaControls=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._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}render(){return e(t,{key:"bcca14709dca36d36884f1bda80d249ef151cf03",class:"kol-button-link"},e(o,{key:"1601a8be9c9c8c85cb776f95aa3981ccc388d978",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_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",_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},e("slot",{key:"dd476ba7cf6a6d3b08553cc7490ee51d4f08fff0",name:"expert",slot:"expert"})))}get host(){return i(this)}};d.style={default:l};export{d as kol_button_link};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonLinkDefaultStyle0","KolButtonLink","this","catchRef","ref","propagateFocus","host","getValue","_value","render","h","Host","key","class","KolButtonWcTag","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_id","_label","_name","_on","_role","_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/component.tsx"],"sourcesContent":["@import '../link';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonLinkProps,\n\tButtonTypePropType,\n\tIconsPropType,\n\tIdPropType,\n\tLabelWithExpertSlotPropType,\n\tNamePropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport { propagateFocus } from '@public-ui/schema';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements ButtonLinkProps {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, 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\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_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_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 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 * 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":";;;uJAAA,MAAMA,EAAkB,0wJACxB,MAAAC,EAAeD,E,MC0BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,gIAgEM,M,gBAOC,M,4MA8CgB,M,WAKV,S,sBArHrC,cAAMG,GACZ,OAAOL,KAAKM,M,CAGN,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,mBACXH,EAACI,EAAc,CAAAF,IAAA,2CACdR,IAAKF,KAAKC,SACVY,WAAYb,KAAKa,WACjBC,cAAed,KAAKc,cACpBC,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,qBAAsBzB,KAAKyB,qBAC3BC,UAAW1B,KAAK0B,UAChBC,cAAe3B,KAAK2B,cACpBC,MAAO5B,KAAK4B,MACZtB,OAAQN,KAAKM,QAEbE,EAAA,QAAAE,IAAA,2CAAMmB,KAAK,SAASC,KAAK,Y"}
+{"version":3,"names":["defaultStyleCss","KolButtonLinkDefaultStyle0","KolButtonLink","this","catchRef","ref","propagateFocus","host","getValue","_value","render","h","Host","key","class","KolButtonWcTag","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_id","_label","_name","_on","_role","_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/component.tsx"],"sourcesContent":["@import '../link';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonLinkProps,\n\tButtonTypePropType,\n\tIconsPropType,\n\tIdPropType,\n\tLabelWithExpertSlotPropType,\n\tNamePropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { propagateFocus } from '../../schema';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements ButtonLinkProps {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, 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\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_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_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 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 * 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":";;;uJAAA,MAAMA,EAAkB,0wJACxB,MAAAC,EAAeD,E,MC0BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,gIAgEM,M,gBAOC,M,4MA8CgB,M,WAKV,S,sBArHrC,cAAMG,GACZ,OAAOL,KAAKM,M,CAGN,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,mBACXH,EAACI,EAAc,CAAAF,IAAA,2CACdR,IAAKF,KAAKC,SACVY,WAAYb,KAAKa,WACjBC,cAAed,KAAKc,cACpBC,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,qBAAsBzB,KAAKyB,qBAC3BC,UAAW1B,KAAK0B,UAChBC,cAAe3B,KAAK2B,cACpBC,MAAO5B,KAAK4B,MACZtB,OAAQN,KAAKM,QAEbE,EAAA,QAAAE,IAAA,2CAAMmB,KAAK,SAASC,KAAK,Y"}

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 a}from"./index-3fbcceca.js";import{ay as e,az as h,h as d,a7 as l,aA as n,aB as o,aC as r,aD as c,ah as b,i as f,P as u,aE as v,A as _,S as m,aF as p,aG as y,U as A,a as x,aH as g,k,aI as C,I}from"./index-44da6e7f.js";import{s as S,t as j}from"./events-29e84d75.js";import{p as L,a as V}from"./controller-09ce054b.js";import{A as K}from"./associated.controller-47f177a8.js";import{a as T,f as w}from"./component-names-ed22f86e.js";const B=class{render(){const a=I(this.state._label);return t(i,{key:"9b78f24010f60a0c49b27964904b492cb4b9a8b0",class:"kol-button-wc"},t("button",Object.assign({key:"56acddc79474d7a0bccef57e49451ab2685cf07b",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-expanded":e(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":h(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(w,{key:"9b9c3ce492e455e928f509b5fb092139040ea545",class:"button-inner",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:a?"":this.state._label},t("slot",{key:"76c5e81308b9c7de483723bd55f0dcfbf2b2d6d5",name:"expert",slot:"expert"}))),t(T,{key:"bdbb52aa525f761ce82e78256ea1e4d8018cc369","aria-hidden":"true",hidden:a||!this.state._hideLabel,_accessKey:this._accessKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){s(this,t),this.catchRef=t=>{this.ref=t,d(this.host,this.ref)},this.onClick=t=>{var a,e;"submit"===this.state._type?L({form:this.host,ref:this.ref}):"reset"===this.state._type?V({form:this.host,ref:this.ref}):(S(t),j("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(l(t,this.ref),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=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._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 K(this,"button",this.host)}validateAccessKey(t){n(this,t)}validateAriaControls(t){o(this,t)}validateAriaExpanded(t){r(this,t)}validateAriaSelected(t){c(this,t)}validateCustomClass(t){b(this,t)}validateDisabled(t){f(this,t)}validateHideLabel(t){u(this,t)}validateIcons(t){v(this,t)}validateId(t){_(this,"_id",t)}validateLabel(t){m(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){p(this,t)}validateRole(t){y(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){A(this,t)}validateTooltipAlign(t){x(this,t)}validateType(t){g(this,t)}validateValue(t){k(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){C(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),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.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};export{B as kol_button_wc};
+import{h as t,H as i,r as s,g as e}from"./index-3fbcceca.js";import{s as a,t as o}from"./events-29e84d75.js";import{p as d,a as n}from"./controller-04329990.js";import{A as h}from"./associated.controller-b0ff2f30.js";import{a as l,f as r}from"./component-names-ed22f86e.js";import{i as c,b as f,w as u,v,x as b,n as m,s as p}from"./prop.validators-29d576d2.js";import{v as _}from"./access-key-04ca8172.js";import{v as y}from"./icons-d2e01be4.js";import{v as j}from"./alternative-button-link-role-97826181.js";import{s as g,a as x}from"./reuse-b66836de.js";import{v as k}from"./custom-class-f88bc94b.js";import{v as A}from"./disabled-fbc49ac0.js";import{v as C}from"./hide-label-c461d8fe.js";import{a as S}from"./label-e56ffdc6.js";import{v as w}from"./tab-index-2cbc1ad1.js";import{v as V}from"./tooltip-align-c13a7aa7.js";import"./dev.utils-1ca991a2.js";import"./index-4a3076fc.js";import"./align-fc528dec.js";const B=(t,a)=>{c(t,"_ariaControls",a)},I=(t,a)=>{f(t,"_ariaExpanded",a)},K=(t,a)=>{f(t,"_ariaSelected",a)},T=(t,a)=>{u(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},L=["button","reset","submit"],E=(t,a)=>{u(t,"_type",(t=>"string"==typeof t&&L.includes(t)),new Set([`KoliBriButtonType {${L.join(", ")}`]),a)},D=["primary","secondary","normal","tertiary","danger","ghost","custom"],H=(t,a)=>{u(t,"_variant",(t=>"string"==typeof t&&D.includes(t)),new Set([`KoliBriButtonVariant {${D.join(", ")}`]),a,{defaultValue:"normal"})},O=class{render(){const a=g(this.state._label);return t(i,{key:"c0d16e55ccda6586451460ed73035afc5094a20c",class:"kol-button-wc"},t("button",Object.assign({key:"6ee3c6aa4c7eb2870b69369ae303b344f9243615",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-expanded":v(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":b(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(r,{key:"89e898b52482ab8f2b991ee630d3c01eba2c5673",class:"button-inner",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:a?"":this.state._label},t("slot",{key:"c7f11890216223942c6adea500e5904409877564",name:"expert",slot:"expert"}))),t(l,{key:"31d7ab91f54a8046442ffdb435f55cb4681d1b32","aria-hidden":"true",hidden:a||!this.state._hideLabel,_accessKey:this._accessKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){s(this,t),this.catchRef=t=>{this.ref=t,x(this.host,this.ref)},this.onClick=t=>{var e,s;"submit"===this.state._type?d({form:this.host,ref:this.ref}):"reset"===this.state._type?n({form:this.host,ref:this.ref}):(a(t),o("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)&&(m(t,this.ref),null===(s=this.state._on)||void 0===s||s.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=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._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 h(this,"button",this.host)}validateAccessKey(t){_(this,t)}validateAriaControls(t){B(this,t)}validateAriaExpanded(t){I(this,t)}validateAriaSelected(t){K(this,t)}validateCustomClass(t){k(this,t)}validateDisabled(t){A(this,t)}validateHideLabel(t){C(this,t)}validateIcons(t){y(this,t)}validateId(t){c(this,"_id",t)}validateLabel(t){S(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){T(this,t)}validateRole(t){j(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){w(this,t)}validateTooltipAlign(t){V(this,t)}validateType(t){E(this,t)}validateValue(t){p(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){H(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),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.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return e(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};export{O as kol_button_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["KolButtonWc","render","hasExpertSlot","showExpertSlot","this","state","_label","h","Host","key","class","Object","assign","ref","catchRef","accessKey","_accessKey","undefined","_ariaControls","mapBoolean2String","_ariaExpanded","_hideLabel","mapStringOrBoolean2String","_ariaSelected","button","disabled","_disabled","_variant","_customClass","length","id","_id","name","_name","_on","onClick","role","_role","tabIndex","_tabIndex","type","_type","KolSpanWcTag","_icons","slot","KolTooltipWcTag","hidden","_align","_tooltipAlign","constructor","hostRef","propagateFocus","host","event","propagateSubmitEventToForm","form","propagateResetEventToForm","stopPropagation","tryToDispatchKoliBriEvent","_value","controller","setFormAssociatedValue","_a","setEventTarget","_b","AssociatedInputController","validateAccessKey","value","validateAriaControls","validateAriaExpanded","validateAriaSelected","validateCustomClass","validateDisabled","validateHideLabel","validateIcons","validateId","watchString","validateLabel","validateLabelWithExpertSlot","required","validateName","validateOn","validateButtonCallbacks","validateRole","validateAlternativeButtonLinkRole","validateSyncValueBySelector","validateTabIndex","validateTooltipAlign","validateType","validateButtonType","validateValue","setState","validateVariant","validateButtonVariant","componentWillLoad","_syncValueBySelector"],"sources":["src/components/button/component.tsx"],"sourcesContent":["import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonAPI,\n\tButtonCallbacksPropType,\n\tButtonStates,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDisabledPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tpropagateFocus,\n\tsetEventTarget,\n\tsetState,\n\tshowExpertSlot,\n\tvalidateAccessKey,\n\tvalidateAlternativeButtonLinkRole,\n\tvalidateAriaControls,\n\tvalidateAriaExpanded,\n\tvalidateAriaSelected,\n\tvalidateButtonCallbacks,\n\tvalidateButtonType,\n\tvalidateButtonVariant,\n\tvalidateCustomClass,\n\tvalidateDisabled,\n\tvalidateHideLabel,\n\tvalidateIcons,\n\tvalidateLabelWithExpertSlot,\n\tvalidateTabIndex,\n\tvalidateTooltipAlign,\n\twatchString,\n} from '@public-ui/schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { AssociatedInputController } from '../input-adapter-leanup/associated.controller';\nimport { KolSpanWcTag, KolTooltipWcTag } from '../../core/component-names';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements ButtonAPI {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate ref?: HTMLButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLButtonElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\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.ref,\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.ref,\n\t\t\t});\n\t\t} else {\n\t\t\t// Event handling\n\t\t\tstopPropagation(event);\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.ref);\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\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-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<KolSpanWcTag\n\t\t\t\t\t\tclass=\"button-inner\"\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_label={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</KolSpanWcTag>\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_accessKey={this._accessKey}\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</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 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 * 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}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\tvalidateAriaControls(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('_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.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.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}\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateAriaControls","component","value","watchString","validateAriaExpanded","watchBoolean","validateAriaSelected","validateButtonCallbacks","watchValidator","Set","buttonTypePropTypeOptions","validateButtonType","includes","join","buttonVariantPropTypeOptions","validateButtonVariant","defaultValue","KolButtonWc","render","hasExpertSlot","showExpertSlot","this","state","_label","h","Host","key","class","Object","assign","ref","catchRef","accessKey","_accessKey","undefined","_ariaControls","mapBoolean2String","_ariaExpanded","_hideLabel","mapStringOrBoolean2String","_ariaSelected","button","disabled","_disabled","_variant","_customClass","length","id","_id","name","_name","_on","onClick","role","_role","tabIndex","_tabIndex","type","_type","KolSpanWcTag","_icons","slot","KolTooltipWcTag","hidden","_align","_tooltipAlign","constructor","hostRef","propagateFocus","host","event","propagateSubmitEventToForm","form","propagateResetEventToForm","stopPropagation","tryToDispatchKoliBriEvent","_value","controller","setFormAssociatedValue","_a","setEventTarget","_b","AssociatedInputController","validateAccessKey","validateCustomClass","validateDisabled","validateHideLabel","validateIcons","validateId","validateLabel","validateLabelWithExpertSlot","required","validateName","validateOn","validateRole","validateAlternativeButtonLinkRole","validateSyncValueBySelector","validateTabIndex","validateTooltipAlign","validateType","validateValue","setState","validateVariant","componentWillLoad","_syncValueBySelector"],"sources":["src/schema/props/aria-controls.ts","src/schema/props/aria-expanded.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 AriaExpandedPropType = boolean;\n\n/**\n * Marks this element as open/expanded, or that the connected element (aria-controls/aria-owns) is open/expanded.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n * @deprecated\n */\nexport type PropAriaExpanded = {\n\tariaExpanded: AriaExpandedPropType;\n};\n\n/* validator */\nexport const validateAriaExpanded = (component: Generic.Element.Component, value?: AriaExpandedPropType): void => {\n\twatchBoolean(component, '_ariaExpanded', 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\tButtonAPI,\n\tButtonCallbacksPropType,\n\tButtonStates,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDisabledPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tpropagateFocus,\n\tsetEventTarget,\n\tsetState,\n\tshowExpertSlot,\n\tvalidateAccessKey,\n\tvalidateAlternativeButtonLinkRole,\n\tvalidateAriaControls,\n\tvalidateAriaExpanded,\n\tvalidateAriaSelected,\n\tvalidateButtonCallbacks,\n\tvalidateButtonType,\n\tvalidateButtonVariant,\n\tvalidateCustomClass,\n\tvalidateDisabled,\n\tvalidateHideLabel,\n\tvalidateIcons,\n\tvalidateLabelWithExpertSlot,\n\tvalidateTabIndex,\n\tvalidateTooltipAlign,\n\twatchString,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { AssociatedInputController } from '../input-adapter-leanup/associated.controller';\nimport { KolSpanWcTag, KolTooltipWcTag } from '../../core/component-names';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements ButtonAPI {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate ref?: HTMLButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLButtonElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\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.ref,\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.ref,\n\t\t\t});\n\t\t} else {\n\t\t\t// Event handling\n\t\t\tstopPropagation(event);\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.ref);\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\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-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<KolSpanWcTag\n\t\t\t\t\t\tclass=\"button-inner\"\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_label={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</KolSpanWcTag>\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_accessKey={this._accessKey}\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</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 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 * 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}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\tvalidateAriaControls(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('_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.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.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}\n}\n"],"mappings":"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"}

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,g as i}from"./index-3fbcceca.js";import{h as s}from"./index-44da6e7f.js";import{c as o}from"./component-names-ed22f86e.js";const a="@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: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-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}",l=a,r=class{constructor(e){n(this,e),this.catchRef=n=>{s(this.host,n)},this._accessKey=void 0,this._ariaControls=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._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}render(){return e(t,{key:"5dabc170509cbae4006effd638d1f6df14a980b8",class:"kol-button"},e(o,{key:"8f77042817ac26209e77d4e7caa0f75f8b31f8ec",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,_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,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},e("slot",{key:"743561c96a08d73b2624af46a3da8ee429ad6ae6",name:"expert",slot:"expert"})))}get host(){return i(this)}};r.style={default:l};export{r as kol_button};
+import{r as n,h as e,H as t,g as i}from"./index-3fbcceca.js";import{c as s}from"./component-names-ed22f86e.js";import{a as o}from"./reuse-b66836de.js";const a="@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: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-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}",l=a,r=class{constructor(e){n(this,e),this.catchRef=n=>{o(this.host,n)},this._accessKey=void 0,this._ariaControls=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._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}render(){return e(t,{key:"f25b58d924abdc5215b2ec354a57427bed43b001",class:"kol-button"},e(s,{key:"e9afcf44b454f0a2c22bc1346fe583f697621efb",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,_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,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},e("slot",{key:"5b515b5587a2c125450f6b11952ab776bbc41a62",name:"expert",slot:"expert"})))}get host(){return i(this)}};r.style={default:l};export{r as kol_button};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonDefaultStyle0","KolButton","this","catchRef","ref","propagateFocus","host","getValue","_value","render","h","Host","key","class","KolButtonWcTag","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_hideLabel","_icons","_id","_label","_name","_on","_role","_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 '../button';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport { propagateFocus } from '@public-ui/schema';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n\nimport type { JSX } from '@stencil/core';\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, 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\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_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_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 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 * 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":";;;uJAAA,MAAMA,EAAkB,gkJACxB,MAAAC,EAAeD,E,MC0BFE,EAAS,M,yBAGJC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,4JAyEM,M,gBAOC,M,4MA8CgB,M,WAKV,S,oCAUM,Q,CAxI3C,cAAMG,GACZ,OAAOL,KAAKM,M,CAGN,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACXH,EAACI,EAAc,CAAAF,IAAA,2CACdR,IAAKF,KAAKC,SACVU,MAAO,CACNE,OAAQ,KACR,CAACb,KAAKc,UAAqBd,KAAKc,WAAa,SAC7C,CAACd,KAAKe,cAAyBf,KAAKc,WAAa,iBAAmBd,KAAKe,eAAiB,UAAYf,KAAKe,aAAaC,OAAS,GAElIC,WAAYjB,KAAKiB,WACjBC,cAAelB,KAAKkB,cACpBC,cAAenB,KAAKmB,cACpBC,cAAepB,KAAKoB,cACpBL,aAAcf,KAAKe,aACnBM,UAAWrB,KAAKqB,UAChBC,WAAYtB,KAAKsB,WACjBC,OAAQvB,KAAKuB,OACbC,IAAKxB,KAAKwB,IACVC,OAAQzB,KAAKyB,OACbC,MAAO1B,KAAK0B,MACZC,IAAK3B,KAAK2B,IACVC,MAAO5B,KAAK4B,MACZC,qBAAsB7B,KAAK6B,qBAC3BC,UAAW9B,KAAK8B,UAChBC,cAAe/B,KAAK+B,cACpBC,MAAOhC,KAAKgC,MACZ1B,OAAQN,KAAKM,OACbQ,SAAUd,KAAKc,UAEfN,EAAA,QAAAE,IAAA,2CAAMuB,KAAK,SAASC,KAAK,Y"}
+{"version":3,"names":["defaultStyleCss","KolButtonDefaultStyle0","KolButton","this","catchRef","ref","propagateFocus","host","getValue","_value","render","h","Host","key","class","KolButtonWcTag","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_hideLabel","_icons","_id","_label","_name","_on","_role","_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 '../button';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { propagateFocus } from '../../schema';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n\nimport type { JSX } from '@stencil/core';\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, 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\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_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_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 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 * 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":";;;uJAAA,MAAMA,EAAkB,gkJACxB,MAAAC,EAAeD,E,MC0BFE,EAAS,M,yBAGJC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,4JAyEM,M,gBAOC,M,4MA8CgB,M,WAKV,S,oCAUM,Q,CAxI3C,cAAMG,GACZ,OAAOL,KAAKM,M,CAGN,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACXH,EAACI,EAAc,CAAAF,IAAA,2CACdR,IAAKF,KAAKC,SACVU,MAAO,CACNE,OAAQ,KACR,CAACb,KAAKc,UAAqBd,KAAKc,WAAa,SAC7C,CAACd,KAAKe,cAAyBf,KAAKc,WAAa,iBAAmBd,KAAKe,eAAiB,UAAYf,KAAKe,aAAaC,OAAS,GAElIC,WAAYjB,KAAKiB,WACjBC,cAAelB,KAAKkB,cACpBC,cAAenB,KAAKmB,cACpBC,cAAepB,KAAKoB,cACpBL,aAAcf,KAAKe,aACnBM,UAAWrB,KAAKqB,UAChBC,WAAYtB,KAAKsB,WACjBC,OAAQvB,KAAKuB,OACbC,IAAKxB,KAAKwB,IACVC,OAAQzB,KAAKyB,OACbC,MAAO1B,KAAK0B,MACZC,IAAK3B,KAAK2B,IACVC,MAAO5B,KAAK4B,MACZC,qBAAsB7B,KAAK6B,qBAC3BC,UAAW9B,KAAK8B,UAChBC,cAAe/B,KAAK+B,cACpBC,MAAOhC,KAAKgC,MACZ1B,OAAQN,KAAKM,OACbQ,SAAUd,KAAKc,UAEfN,EAAA,QAAAE,IAAA,2CAAMuB,KAAK,SAASC,KAAK,Y"}