@public-ui/components 2.0.0-rc.8 → 2.0.0-rc.9

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolAlert","_level","render","h","Host","_alert","this","_hasCloser","_label","_on","_type","_variant"],"sources":["src/components/alert/style.css?tag=kol-alert&mode=default&encapsulation=shadow","src/components/alert/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\tkol-alert-wc {\n\t\tdisplay: grid;\n\t}\n\n\tkol-alert-wc .heading {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tkol-alert-wc .heading > div {\n\t\tflex-grow: 1;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { LabelPropType } from '../../types/props/label';\nimport { AlertType, AlertVariant, KoliBriAlertEventCallbacks, Props, States } from './types';\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-alert-wc\n\t\t\t\t\t_alert={this._alert}\n\t\t\t\t\t_hasCloser={this._hasCloser}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_level={this._level}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-alert-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = false;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\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?: AlertType = 'default';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: States = {\n\t\t_level: 1,\n\t};\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,orG,MCgBXC,EAAQ,M,qCAsBc,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAET,CAC/BC,OAAQ,E,CAvDF,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,gBACCE,OAAQC,KAAKD,OACbE,WAAYD,KAAKC,WACjBC,OAAQF,KAAKE,OACbP,OAAQK,KAAKL,OACbQ,IAAKH,KAAKG,IACVC,MAAOJ,KAAKI,MACZC,SAAUL,KAAKK,UAEfR,EAAA,c"}
+{"version":3,"names":["defaultStyleCss","KolAlert","_level","render","h","Host","_alert","this","_hasCloser","_label","_on","_type","_variant"],"sources":["src/components/alert/style.css?tag=kol-alert&mode=default&encapsulation=shadow","src/components/alert/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\tkol-alert-wc {\n\t\tdisplay: grid;\n\t}\n\n\tkol-alert-wc .heading {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tkol-alert-wc .heading > div {\n\t\tflex-grow: 1;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { LabelPropType } from '../../types/props/label';\nimport { AlertType, AlertVariant, KoliBriAlertEventCallbacks, Props, States } from './types';\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-alert-wc\n\t\t\t\t\t_alert={this._alert}\n\t\t\t\t\t_hasCloser={this._hasCloser}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_level={this._level}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-alert-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = false;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\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?: AlertType = 'default';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: States = {\n\t\t_level: 1,\n\t};\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,igG,MCgBXC,EAAQ,M,qCAsBc,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAET,CAC/BC,OAAQ,E,CAvDF,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,gBACCE,OAAQC,KAAKD,OACbE,WAAYD,KAAKC,WACjBC,OAAQF,KAAKE,OACbP,OAAQK,KAAKL,OACbQ,IAAKH,KAAKG,IACVC,MAAOJ,KAAKI,MACZC,SAAUL,KAAKK,UAEfR,EAAA,c"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as s,h as t,H as a}from"./index-9c30809b.js";import{a as i}from"./i18n-bb569ab8.js";import{v as r}from"./image-source-bdd50deb.js";import{v as e}from"./label-2cb169c2.js";import"./index-7a38e9a3.js";import"./dev.utils-34544843.js";import"./reuse-b3566e4c.js";import"./a11y.tipps-ce35f0ba.js";import"./prop.validators-b0d023a4.js";const o=a=>0===a.length?"":a[0].toUpperCase(),l=a=>{const t=a.split(/\s+/),s=t.at(0),e=t.at(-1);return t.length>=2&&s&&e?`${o(s)}${o(e)}`:o(a)},n=class{constructor(a){s(this,a),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return t(a,null,t("div",{"aria-label":i("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?t("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):t("span",{"aria-hidden":"true",class:"initials"},l(this.state._label))))}validateSrc(a){r(this,a)}validateLabel(a){e(this,a)}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};export{n as kol_avatar_wc};
+import{r as s,h as t,H as a}from"./index-0bc40dc4.js";import{a as i}from"./i18n-6d198e44.js";import{v as r}from"./image-source-b0d375f8.js";import{v as e}from"./label-8090b77e.js";import"./index-328ae082.js";import"./dev.utils-0ab1db26.js";import"./reuse-b3566e4c.js";import"./a11y.tipps-db7fb79f.js";import"./prop.validators-4ca765d6.js";const o=a=>0===a.length?"":a[0].toUpperCase(),l=a=>{const t=a.split(/\s+/),s=t.at(0),e=t.at(-1);return t.length>=2&&s&&e?`${o(s)}${o(e)}`:o(a)},n=class{constructor(a){s(this,a),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return t(a,null,t("div",{"aria-label":i("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?t("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):t("span",{"aria-hidden":"true",class:"initials"},l(this.state._label))))}validateSrc(a){r(this,a)}validateLabel(a){e(this,a)}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};export{n as kol_avatar_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-9c30809b.js";const i="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\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: 2rem;\n\t}\n}\n",o=class{constructor(n){t(this,n),this._src=void 0,this._label=void 0}render(){return n(e,null,n("kol-avatar-wc",{_src:this._src,_label:this._label}))}};o.style={default:i};export{o as kol_avatar};
+import{r as t,h as n,H as e}from"./index-0bc40dc4.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\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: 2rem;\n\t}\n}\n",o=class{constructor(n){t(this,n),this._src=void 0,this._label=void 0}render(){return n(e,null,n("kol-avatar-wc",{_src:this._src,_label:this._label}))}};o.style={default:i};export{o as kol_avatar};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolAvatar","render","h","Host","_src","this","_label"],"sources":["src/components/avatar/style.css?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\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: 2rem;\n\t}\n}\n","import { Component, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-avatar-wc _src={this._src} _label={this._label}></kol-avatar-wc>\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":";;;sDAAA,MAAMA,EAAkB,y3G,MCWXC,EAAS,M,mEACd,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBAAeE,KAAMC,KAAKD,KAAME,OAAQD,KAAKC,S"}
+{"version":3,"names":["defaultStyleCss","KolAvatar","render","h","Host","_src","this","_label"],"sources":["src/components/avatar/style.css?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\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: 2rem;\n\t}\n}\n","import { Component, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-avatar-wc _src={this._src} _label={this._label}></kol-avatar-wc>\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":";;;sDAAA,MAAMA,EAAkB,ssG,MCWXC,EAAS,M,mEACd,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBAAeE,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 t,h as n,H as e}from"./index-9c30809b.js";import{h as i,v as o}from"./color-d643b48d.js";import{f as s}from"./a11y.tipps-ce35f0ba.js";import{n as a}from"./dev.utils-34544843.js";import{o as r,p as l,s as h}from"./prop.validators-b0d023a4.js";import"./reuse-b3566e4c.js";const d="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t}\n\n\t:host > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n";s("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const c=class{constructor(n){t(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=a(),this.handleColorChange=t=>{const n=i(t);this.bgColorStr=n.backgroundColor,this.colorStr=n.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(t){return n("kol-button-wc",{_ariaControls:this.id,_customClass:t._customClass,_disabled:t._disabled,_hideLabel:!0,_icons:t._icons,_id:t._id,_label:t._label,_on:t._on,_tooltipAlign:t._tooltipAlign,_variant:t._variant})}render(){const t="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return n(e,null,n("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},n("kol-span-wc",{id:t?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),t&&this.renderSmartButton(this.state._smartButton)))}validateColor(t){o(this,t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(t){r(t,(()=>{try{t=l(t)}catch(t){}h(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};c.style={default:d};export{c as kol_badge};
+import{r as t,h as n,H as e}from"./index-0bc40dc4.js";import{h as i,v as o}from"./color-c062183a.js";import{f as s}from"./a11y.tipps-db7fb79f.js";import{n as a}from"./dev.utils-0ab1db26.js";import{o as r,p as l,s as h}from"./prop.validators-4ca765d6.js";import"./reuse-b3566e4c.js";const d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t}\n\n\t:host > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n";s("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const c=class{constructor(n){t(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=a(),this.handleColorChange=t=>{const n=i(t);this.bgColorStr=n.backgroundColor,this.colorStr=n.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(t){return n("kol-button-wc",{_ariaControls:this.id,_customClass:t._customClass,_disabled:t._disabled,_hideLabel:!0,_icons:t._icons,_id:t._id,_label:t._label,_on:t._on,_tooltipAlign:t._tooltipAlign,_variant:t._variant})}render(){const t="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return n(e,null,n("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},n("kol-span-wc",{id:t?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),t&&this.renderSmartButton(this.state._smartButton)))}validateColor(t){o(this,t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(t){r(t,(()=>{try{t=l(t)}catch(t){}h(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};c.style={default:d};export{c as kol_badge};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","featureHint","KolBadge","this","bgColorStr","colorStr","id","nonce","handleColorChange","value","colorPair","backgroundColor","foregroundColor","_color","renderSmartButton","props","h","_ariaControls","_customClass","_disabled","_hideLabel","_icons","_id","_label","_on","_tooltipAlign","_variant","render","hasSmartButton","state","_smartButton","Host","class","style","color","undefined","_allowMarkdown","validateColor","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","src/components/badge/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t}\n\n\t:host > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconsProp } from '../../types/icons';\nimport { handleColorChange, PropColor, validateColor } from '../../types/props/color';\nimport { LabelPropType } from '../../types/props/label';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { objectObjectHandler, parseJson, setState } from '../../utils/prop.validators';\nimport { ButtonProps } from '../button/types';\nimport { API, States } from './types';\n\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements API {\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<kol-button-wc\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></kol-button-wc>\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>\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<kol-span-wc id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></kol-span-wc>\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: States = {\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":";;;0RAAA,MAAMA,EAAkB,6kGCYxBC,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,mFAiBjB,CAC/BC,OAAQ,CACPF,gBAAiB,OACjBC,gBAAiB,Q,CA5DX,iBAAAE,CAAkBC,GACzB,OACCC,EAAA,iBACCC,cAAed,KAAKG,GACpBY,aAAcH,EAAMG,aACpBC,UAAWJ,EAAMI,UACjBC,WAAY,KACZC,OAAQN,EAAMM,OACdC,IAAKP,EAAMO,IACXC,OAAQR,EAAMQ,OACdC,IAAKT,EAAMS,IACXC,cAAeV,EAAMU,cACrBC,SAAUX,EAAMW,U,CAKZ,MAAAC,GACN,MAAMC,SAAwBzB,KAAK0B,MAAMC,eAAiB,UAAY3B,KAAK0B,MAAMC,eAAiB,KAClG,OACCd,EAACe,EAAI,KACJf,EAAA,QACCgB,MAAO,CACN,sBAAuB7B,KAAK0B,MAAMC,eAAiB,UAAY3B,KAAK0B,MAAMC,eAAiB,MAE5FG,MAAO,CACNtB,gBAAiBR,KAAKC,WACtB8B,MAAO/B,KAAKE,WAGbW,EAAA,eAAaV,GAAIsB,EAAiBzB,KAAKG,GAAK6B,UAAWC,eAAc,KAACf,OAAQlB,KAAKkB,OAAQE,OAAQpB,KAAKoB,SACvGK,GAAkBzB,KAAKW,kBAAkBX,KAAK0B,MAAMC,e,CAwClD,aAAAO,CAAc5B,GACpB4B,EAAclC,KAAMM,EAAO,CAC1B6B,aAAc,OACdC,MAAO,CACNC,YAAarC,KAAKK,oB,CAMd,mBAAAiC,CAAoBhC,GAC1BiC,EAAoBjC,GAAO,KAC1B,IACCA,EAAQkC,EAAuBlC,E,CAE9B,MAAOmC,G,CAGTC,EAAS1C,KAAM,eAAgBM,EAAM,G,CAIhC,iBAAAqC,GACN3C,KAAKkC,cAAclC,KAAKU,QACxBV,KAAKsC,oBAAoBtC,KAAK2B,a"}
+{"version":3,"names":["defaultStyleCss","featureHint","KolBadge","this","bgColorStr","colorStr","id","nonce","handleColorChange","value","colorPair","backgroundColor","foregroundColor","_color","renderSmartButton","props","h","_ariaControls","_customClass","_disabled","_hideLabel","_icons","_id","_label","_on","_tooltipAlign","_variant","render","hasSmartButton","state","_smartButton","Host","class","style","color","undefined","_allowMarkdown","validateColor","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","src/components/badge/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t}\n\n\t:host > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconsProp } from '../../types/icons';\nimport { handleColorChange, PropColor, validateColor } from '../../types/props/color';\nimport { LabelPropType } from '../../types/props/label';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { objectObjectHandler, parseJson, setState } from '../../utils/prop.validators';\nimport { ButtonProps } from '../button/types';\nimport { API, States } from './types';\n\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements API {\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<kol-button-wc\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></kol-button-wc>\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>\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<kol-span-wc id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></kol-span-wc>\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: States = {\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":";;;0RAAA,MAAMA,EAAkB,05FCYxBC,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,mFAiBjB,CAC/BC,OAAQ,CACPF,gBAAiB,OACjBC,gBAAiB,Q,CA5DX,iBAAAE,CAAkBC,GACzB,OACCC,EAAA,iBACCC,cAAed,KAAKG,GACpBY,aAAcH,EAAMG,aACpBC,UAAWJ,EAAMI,UACjBC,WAAY,KACZC,OAAQN,EAAMM,OACdC,IAAKP,EAAMO,IACXC,OAAQR,EAAMQ,OACdC,IAAKT,EAAMS,IACXC,cAAeV,EAAMU,cACrBC,SAAUX,EAAMW,U,CAKZ,MAAAC,GACN,MAAMC,SAAwBzB,KAAK0B,MAAMC,eAAiB,UAAY3B,KAAK0B,MAAMC,eAAiB,KAClG,OACCd,EAACe,EAAI,KACJf,EAAA,QACCgB,MAAO,CACN,sBAAuB7B,KAAK0B,MAAMC,eAAiB,UAAY3B,KAAK0B,MAAMC,eAAiB,MAE5FG,MAAO,CACNtB,gBAAiBR,KAAKC,WACtB8B,MAAO/B,KAAKE,WAGbW,EAAA,eAAaV,GAAIsB,EAAiBzB,KAAKG,GAAK6B,UAAWC,eAAc,KAACf,OAAQlB,KAAKkB,OAAQE,OAAQpB,KAAKoB,SACvGK,GAAkBzB,KAAKW,kBAAkBX,KAAK0B,MAAMC,e,CAwClD,aAAAO,CAAc5B,GACpB4B,EAAclC,KAAMM,EAAO,CAC1B6B,aAAc,OACdC,MAAO,CACNC,YAAarC,KAAKK,oB,CAMd,mBAAAiC,CAAoBhC,GAC1BiC,EAAoBjC,GAAO,KAC1B,IACCA,EAAQkC,EAAuBlC,E,CAE9B,MAAOmC,G,CAGTC,EAAS1C,KAAM,eAAgBM,EAAM,G,CAIhC,iBAAAqC,GACN3C,KAAKkC,cAAclC,KAAKU,QACxBV,KAAKsC,oBAAoBtC,KAAK2B,a"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,F as e,H as i}from"./index-9c30809b.js";import{v as o}from"./label-2cb169c2.js";import{b as a}from"./a11y.tipps-ce35f0ba.js";import{r as l,a as s}from"./unique-nav-labels-c6750f60.js";import{w as r}from"./validation-6962a682.js";import"./prop.validators-b0d023a4.js";import"./dev.utils-34544843.js";import"./reuse-b3566e4c.js";const d="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\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\tkol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\tkol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n",h=class{constructor(i){t(this,i),this.renderLink=(t,i)=>{const l=this.state._links.length-1;return n("li",{key:i},0!==i&&n("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),i===l?n("span",null,t._hideLabel?n("kol-icon",{_label:t._label,_icons:"string"==typeof t._icons?t._icons:"codicon codicon-symbol-event"}):n(e,null,t._label)):n("kol-link",Object.assign({},t)))},this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return n(i,null,n("nav",{"aria-label":this.state._label},n("ul",null,0===this.state._links.length&&n("li",null,n("kol-icon",{_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(t,n,e=!1){e||l(this.state._label),o(this,t),a(t),s(this.state._label)}validateLinks(t){r("KolBreadcrumb",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){l(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};h.style={default:d};export{h as kol_breadcrumb};
+import{r as t,h as n,F as e,H as i}from"./index-0bc40dc4.js";import{v as o}from"./label-8090b77e.js";import{b as a}from"./a11y.tipps-db7fb79f.js";import{r as l,a as s}from"./unique-nav-labels-c6750f60.js";import{w as r}from"./validation-4f6082a5.js";import"./prop.validators-4ca765d6.js";import"./dev.utils-0ab1db26.js";import"./reuse-b3566e4c.js";const d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\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\tkol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\tkol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n",h=class{constructor(i){t(this,i),this.renderLink=(t,i)=>{const a=this.state._links.length-1;return n("li",{key:i},0!==i&&n("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),i===a?n("span",null,t._hideLabel?n("kol-icon",{_label:t._label,_icons:"string"==typeof t._icons?t._icons:"codicon codicon-symbol-event"}):n(e,null,t._label)):n("kol-link",Object.assign({},t)))},this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return n(i,null,n("nav",{"aria-label":this.state._label},n("ul",null,0===this.state._links.length&&n("li",null,n("kol-icon",{_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(t,n,e=!1){e||l(this.state._label),o(this,t),a(t),s(this.state._label)}validateLinks(t){r("KolBreadcrumb",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){l(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};h.style={default:d};export{h as kol_breadcrumb};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolBreadcrumb","this","renderLink","link","index","lastIndex","state","_links","length","h","key","_label","_icons","_hideLabel","Fragment","Object","assign","render","Host","map","validateLabel","value","_oldValue","initial","removeNavLabel","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\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\tkol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\tkol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, BreadcrumbLinkProps, States } from './types';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements API {\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 && <kol-icon _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<kol-icon _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<kol-link {...link}></kol-link>\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>\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<kol-icon _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: States = {\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\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":";;;4VAAA,MAAMA,EAAkB,+xG,MCiBXC,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,IAAKN,GACPA,IAAU,GAAKK,EAAA,YAAUE,OAAO,GAAGC,OAAO,kCAC1CR,IAAUC,EACVI,EAAA,YACEN,EAAKU,WACLJ,EAAA,YAAUE,OAAQR,EAAKQ,OAAQC,cAAeT,EAAKS,SAAW,SAAWT,EAAKS,OAAS,iCAEvFH,EAAAK,EAAA,KAAGX,EAAKQ,SAIVF,EAAA,WAAAM,OAAAC,OAAA,GAAcb,IAEX,E,uDA+ByB,CAC/BQ,OAAQ,IACRJ,OAAQ,G,CA7BF,MAAAU,GACN,OACCR,EAACS,EAAI,KACJT,EAAA,oBAAiBR,KAAKK,MAAMK,QAC3BF,EAAA,UACER,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,UACCA,EAAA,YAAUE,OAAO,GAAGC,OAAO,yBAAyB,KAGrDX,KAAKK,MAAMC,OAAOY,IAAIlB,KAAKC,c,CAuB1B,aAAAkB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAevB,KAAKK,MAAMK,O,CAE3BS,EAAcnB,KAAMoB,GACpBI,EAA0BJ,GAC1BK,EAAYzB,KAAKK,MAAMK,O,CAIjB,aAAAgB,CAAcN,GACpBO,EAAc,gBAAiB3B,KAAMoB,E,CAG/B,iBAAAQ,GACN5B,KAAKmB,cAAcnB,KAAKU,OAAQmB,UAAW,MAC3C7B,KAAK0B,cAAc1B,KAAKM,O,CAGlB,oBAAAwB,GACNP,EAAevB,KAAKK,MAAMK,O"}
+{"version":3,"names":["defaultStyleCss","KolBreadcrumb","this","renderLink","link","index","lastIndex","state","_links","length","h","key","_label","_icons","_hideLabel","Fragment","Object","assign","render","Host","map","validateLabel","value","_oldValue","initial","removeNavLabel","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\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\tkol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\tkol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, BreadcrumbLinkProps, States } from './types';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements API {\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 && <kol-icon _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<kol-icon _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<kol-link {...link}></kol-link>\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>\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<kol-icon _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: States = {\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\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":";;;4VAAA,MAAMA,EAAkB,4mG,MCiBXC,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,IAAKN,GACPA,IAAU,GAAKK,EAAA,YAAUE,OAAO,GAAGC,OAAO,kCAC1CR,IAAUC,EACVI,EAAA,YACEN,EAAKU,WACLJ,EAAA,YAAUE,OAAQR,EAAKQ,OAAQC,cAAeT,EAAKS,SAAW,SAAWT,EAAKS,OAAS,iCAEvFH,EAAAK,EAAA,KAAGX,EAAKQ,SAIVF,EAAA,WAAAM,OAAAC,OAAA,GAAcb,IAEX,E,uDA+ByB,CAC/BQ,OAAQ,IACRJ,OAAQ,G,CA7BF,MAAAU,GACN,OACCR,EAACS,EAAI,KACJT,EAAA,oBAAiBR,KAAKK,MAAMK,QAC3BF,EAAA,UACER,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,UACCA,EAAA,YAAUE,OAAO,GAAGC,OAAO,yBAAyB,KAGrDX,KAAKK,MAAMC,OAAOY,IAAIlB,KAAKC,c,CAuB1B,aAAAkB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAevB,KAAKK,MAAMK,O,CAE3BS,EAAcnB,KAAMoB,GACpBI,EAA0BJ,GAC1BK,EAAYzB,KAAKK,MAAMK,O,CAIjB,aAAAgB,CAAcN,GACpBO,EAAc,gBAAiB3B,KAAMoB,E,CAG/B,iBAAAQ,GACN5B,KAAKmB,cAAcnB,KAAKU,OAAQmB,UAAW,MAC3C7B,KAAK0B,cAAc1B,KAAKM,O,CAGlB,oBAAAwB,GACNP,EAAevB,KAAKK,MAAMK,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r,h as s,H as t}from"./index-9c30809b.js";const o=class{constructor(s){r(this,s),this.state={}}render(){return s(t,null,s("slot",null))}};export{o as kol_button_group_wc};
+import{r,h as s,H as t}from"./index-0bc40dc4.js";const o=class{constructor(s){r(this,s),this.state={}}render(){return s(t,null,s("slot",null))}};export{o as kol_button_group_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-9c30809b.js";const i="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n",o=class{constructor(n){t(this,n)}render(){return n(e,null,n("kol-button-group-wc",null,n("slot",null)))}};o.style={default:i};export{o as kol_button_group};
+import{r as t,h as n,H as e}from"./index-0bc40dc4.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n",o=class{constructor(n){t(this,n)}render(){return n(e,null,n("kol-button-group-wc",null,n("slot",null)))}};o.style={default:i};export{o as kol_button_group};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonGroup","render","h","Host"],"sources":["src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","src/components/button-group/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host > kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,4gG,MCWXC,EAAc,M,yBACnB,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,2BACCA,EAAA,c"}
+{"version":3,"names":["defaultStyleCss","KolButtonGroup","render","h","Host"],"sources":["src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","src/components/button-group/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host > kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,y1F,MCWXC,EAAc,M,yBACnB,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,2BACCA,EAAA,c"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as s,H as e}from"./index-9c30809b.js";const i=class{constructor(n){t(this,n),this.button=t=>s("kol-button-wc",Object.assign({},t)),this.link=t=>s("kol-link-wc",Object.assign({_label:t._href},t)),this.text=t=>s("kol-span-wc",Object.assign({},t)),this._link=void 0}render(){return s(e,null,this.renderContent())}renderContent(){if(this._link._on){const t=this._link;return this.button(t)}if(this._link._href){const t=this._link;return this.link(t)}{const t=this._link;return this.text(t)}}};export{i as kol_button_link_text_switch};
+import{r as t,h as s,H as e}from"./index-0bc40dc4.js";const i=class{constructor(n){t(this,n),this.button=t=>s("kol-button-wc",Object.assign({},t)),this.link=t=>s("kol-link-wc",Object.assign({_label:t._href},t)),this.text=t=>s("kol-span-wc",Object.assign({},t)),this._link=void 0}render(){return s(e,null,this.renderContent())}renderContent(){if(this._link._on){const t=this._link;return this.button(t)}if(this._link._href){const t=this._link;return this.link(t)}{const t=this._link;return this.text(t)}}};export{i as kol_button_link_text_switch};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e,g as i}from"./index-9c30809b.js";import{a as s}from"./reuse-b3566e4c.js";const o="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\t:is(a, button) {\n\t\talign-items: baseline;\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: left;\n\t\ttext-decoration-line: underline;\n\t}\n\n\t:is(a, button):is(:focus, :hover) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t.skip {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\t.skip:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tpadding: 1em;\n\t\tposition: unset;\n\t}\n\n\tkol-icon.external-link-icon {\n\t\tdisplay: inline-flex;\n\t}\n}\n\n",l=class{constructor(n){t(this,n),this.catchRef=t=>{s(this.host,t)},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}render(){return n(e,null,n("kol-button-wc",{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},n("slot",{name:"expert",slot:"expert"})))}get host(){return i(this)}};l.style={default:o};export{l as kol_button_link};
+import{r as t,h as n,H as e,g as i}from"./index-0bc40dc4.js";import{a as s}from"./reuse-b3566e4c.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\t:is(a, button) {\n\t\talign-items: baseline;\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: left;\n\t\ttext-decoration-line: underline;\n\t}\n\n\t:is(a, button):is(:focus, :hover) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t.skip {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\t.skip:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tpadding: 1em;\n\t\tposition: unset;\n\t}\n\n\tkol-icon.external-link-icon {\n\t\tdisplay: inline-flex;\n\t}\n}\n\n",l=class{constructor(n){t(this,n),this.catchRef=t=>{s(this.host,t)},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}render(){return n(e,null,n("kol-button-wc",{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},n("slot",{name:"expert",slot:"expert"})))}get host(){return i(this)}};l.style={default:o};export{l as kol_button_link};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonLink","this","catchRef","ref","propagateFocus","host","render","h","Host","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_id","_label","_name","_on","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/component.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { ButtonTypePropType } from '../../types/props/button-type';\nimport { IconsPropType } from '../../types/props/icons';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { propagateFocus } from '../../utils/reuse';\nimport { Props } from './types';\nimport { AccessKeyPropType } from '../../types/props/access-key';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Props {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\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</kol-button-wc>\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":";;;qGAAA,MAAMA,EAAkB,imH,MCwBXC,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,gIA0DM,M,gBAOC,M,4MA8CgB,M,WAKV,S,sBAjHrC,MAAAG,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,WAAYR,KAAKQ,WACjBC,cAAeT,KAAKS,cACpBC,cAAeV,KAAKU,cACpBC,cAAeX,KAAKW,cACpBC,UAAWZ,KAAKY,UAChBC,OAAQb,KAAKa,OACbC,WAAYd,KAAKc,WACjBC,IAAKf,KAAKe,IACVC,OAAQhB,KAAKgB,OACbC,MAAOjB,KAAKiB,MACZC,IAAKlB,KAAKkB,IACVC,MAAM,OACNC,qBAAsBpB,KAAKoB,qBAC3BC,UAAWrB,KAAKqB,UAChBC,cAAetB,KAAKsB,cACpBC,MAAOvB,KAAKuB,MACZC,OAAQxB,KAAKwB,QAEblB,EAAA,QAAMmB,KAAK,SAASC,KAAK,Y"}
+{"version":3,"names":["defaultStyleCss","KolButtonLink","this","catchRef","ref","propagateFocus","host","render","h","Host","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_id","_label","_name","_on","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/component.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { ButtonTypePropType } from '../../types/props/button-type';\nimport { IconsPropType } from '../../types/props/icons';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { propagateFocus } from '../../utils/reuse';\nimport { Props } from './types';\nimport { AccessKeyPropType } from '../../types/props/access-key';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Props {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\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</kol-button-wc>\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":";;;qGAAA,MAAMA,EAAkB,86G,MCwBXC,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,gIA0DM,M,gBAOC,M,4MA8CgB,M,WAKV,S,sBAjHrC,MAAAG,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,WAAYR,KAAKQ,WACjBC,cAAeT,KAAKS,cACpBC,cAAeV,KAAKU,cACpBC,cAAeX,KAAKW,cACpBC,UAAWZ,KAAKY,UAChBC,OAAQb,KAAKa,OACbC,WAAYd,KAAKc,WACjBC,IAAKf,KAAKe,IACVC,OAAQhB,KAAKgB,OACbC,MAAOjB,KAAKiB,MACZC,IAAKlB,KAAKkB,IACVC,MAAM,OACNC,qBAAsBpB,KAAKoB,qBAC3BC,UAAWrB,KAAKqB,UAChBC,cAAetB,KAAKsB,cACpBC,MAAOvB,KAAKuB,MACZC,OAAQxB,KAAKwB,QAEblB,EAAA,QAAMmB,KAAK,SAASC,KAAK,Y"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as e,g as n}from"./index-9c30809b.js";import{v as s}from"./alternative-button-link-role-6e40ea00.js";import{d as a,a as o,w as l,i as h,j as r,f as d,s as c}from"./prop.validators-b0d023a4.js";import{v as f}from"./custom-class-4f50e79f.js";import{v as p}from"./hide-label-29f1b0eb.js";import{v as u}from"./icons-7806a223.js";import{a as m,v}from"./label-2cb169c2.js";import{v as b}from"./tooltip-align-f2f68cbf.js";import{e as y}from"./a11y.tipps-ce35f0ba.js";import{s as g,t as x}from"./events-2bb1065b.js";import{a as _,s as w,p as k}from"./reuse-b3566e4c.js";import{v as j}from"./tab-index-9201352c.js";import{p as A,a as S}from"./controller-5fe68410.js";import{A as T}from"./associated.controller-6fc585ca.js";import{v as z}from"./access-key-8240737c.js";import{c as C,b as K,o as L,f as I,s as V,a as $}from"./floating-ui.dom.esm-e435ab9f.js";import{a as B}from"./alignment-e4b01638.js";import{b as O,n as E}from"./dev.utils-34544843.js";const D=(t,e)=>{a(t,"_ariaControls",e)},H=(t,e)=>{o(t,"_ariaExpanded",e)},W=(t,e)=>{l(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),e)},q=["button","reset","submit"],M=(t,e)=>{l(t,"_type",(t=>"string"==typeof t&&q.includes(t)),new Set([`KoliBriButtonType {${q.join(", ")}`]),e)},N=["primary","secondary","normal","tertiary","danger","ghost","custom"],R=(t,e)=>{l(t,"_variant",(t=>"string"==typeof t&&N.includes(t)),new Set([`KoliBriButtonVariant {${N.join(", ")}`]),e,{defaultValue:"normal"})},P=(t,e)=>{o(t,"_disabled",e)},F=(t,e)=>{o(t,"_ariaSelected",e)},G=class{render(){const e=w(this.state._label);return t(i,null,t("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-expanded":h(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":r(this.state._ariaSelected),class:{button:!0,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._hideLabel,"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("kol-span-wc",{class:"button-inner",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:e?"":this.state._label},t("slot",{name:"expert",slot:"expert"}))),t("kol-tooltip-wc",{"aria-hidden":"true",hidden:e||!this.state._hideLabel,_accessKey:this._accessKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,_(this.host,this.ref)},this.onClick=t=>{var e,i;"submit"===this.state._type?A({form:this.host,ref:this.ref}):"reset"===this.state._type?S({form:this.host,ref:this.ref}):(g(t),x("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)&&(d(t,this.ref),null===(i=this.state._on)||void 0===i||i.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 T(this,"button",this.host)}validateAccessKey(t){z(this,t)}validateAriaControls(t){D(this,t)}validateAriaExpanded(t){H(this,t)}validateAriaSelected(t){F(this,t)}validateCustomClass(t){f(this,t)}validateDisabled(t){P(this,t),!0===t&&y()}validateHideLabel(t){p(this,t)}validateIcons(t){u(this,t)}validateId(t){a(this,"_id",t)}validateLabel(t){m(this,t)}validateName(t){this.controller.validateName(t)}validateOn(t){W(this,t)}validateRole(t){s(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){j(this,t)}validateTooltipAlign(t){b(this,t)}validateType(t){M(this,t)}validateValue(t){c(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){R(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 n(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"]}}},J=(t,e)=>{a(t,"_id",e)},Q=new Set;function U(t){Q.forEach((t=>{t.style.setProperty("z-index","999")})),Q.add(t),t.style.setProperty("z-index","1000")}function X(t){if(Q.delete(t),Q.size>0){const t=Array.from(Q).pop();t&&t.style.setProperty("z-index","1000")}}const Y="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-tooltip-wc .tooltip-floating {\n\t\tanimation-duration: 0.5s;\n\t\tanimation-iteration-count: 1;\n\t\tanimation-name: fadeInOpacity;\n\t\tanimation-timing-function: ease-in;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\t\t/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tmax-width: 90vw;\n\t\tmax-height: 90vh;\n\t}\n\n\t/* Shared between content and arrow */\n\tkol-tooltip-wc .tooltip-area {\n\t\tbackground-color: #fff;\n\t\tcolor: #000;\n\t}\n\n\tkol-tooltip-wc .tooltip-arrow {\n\t\theight: 10px;\n\t\tposition: absolute;\n\t\ttransform: rotate(45deg);\n\t\twidth: 10px;\n\t\tz-index: 999;\n\t}\n\n\tkol-tooltip-wc .tooltip-content {\n\t\tposition: relative;\n\t\tz-index: 1000;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n",Z=class{constructor(t){e(this,t),this.alignTooltip=()=>{var t;if("test"!==k&&this.previousSibling&&this.tooltipElement){const e=this.previousSibling,i=this.tooltipElement,s=this.arrowElement,n=[L(null!==(t=null==s?void 0:s.offsetHeight)&&void 0!==t?t:10),I(),V()];s&&n.push($({element:s})),C(e,i,{placement:this.state._align,middleware:n}).then((({x:t,y:e,middlewareData:n,placement:a})=>{var o,l;Object.assign(i.style,{left:`${t}px`,top:`${e}px`,visibility:"visible"}),s&&((null===(o=n.arrow)||void 0===o?void 0:o.x)?Object.assign(s.style,{left:`${n.arrow.x}px`,top:"bottom"===a?-s.offsetHeight/2+"px":"",bottom:"top"===a?-s.offsetHeight/2+"px":""}):(null===(l=n.arrow)||void 0===l?void 0:l.y)&&Object.assign(s.style,{left:"right"===a?-s.offsetWidth/2+"px":"",right:"left"===a?-s.offsetWidth/2+"px":"",top:`${n.arrow.y}px`}))}))}},this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){U(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),O().body.addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=K(t,e,this.alignTooltip)}},this.hideTooltip=()=>{this.tooltipElement&&(X(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(O().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("focusin",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount),t.addEventListener("focusout",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("focusin",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount),t.addEventListener("focusout",this.decrementOverFocusCount)},this.resyncListeners=(t,e,i=!1)=>{t&&this.removeListeners(t),e&&(i&&(this.previousSibling=e),this.addListeners(e))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._accessKey=void 0,this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:E(),_label:"…"}}render(){return t(i,null,""!==this.state._label&&t("div",{class:"tooltip-floating",ref:this.catchTooltipElement},t("div",{class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),t("kol-span-wc",{class:"tooltip-area tooltip-content",id:this.state._id,_accessKey:this._accessKey,_label:this.state._label})))}validateAccessKey(t){z(this,t)}validateAlign(t){B(this,t)}validateId(t){J(this,t)}validateLabel(t){v(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t;this.resyncListeners(this.previousSibling,null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t;this.previousSibling=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,this.handleEventListeners()}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return n(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};Z.style=Y;export{G as kol_button_wc,Z as kol_tooltip_wc};
+import{h as t,H as i,r as e,g as n}from"./index-0bc40dc4.js";import{v as s}from"./alternative-button-link-role-71624d2c.js";import{d as a,a as o,w as l,i as h,j as r,f as d,s as c}from"./prop.validators-4ca765d6.js";import{v as u}from"./custom-class-88b26aed.js";import{v as f}from"./hide-label-77f04b95.js";import{v as p}from"./icons-b8a4d706.js";import{a as m,v as b}from"./label-8090b77e.js";import{v}from"./tooltip-align-9cb0b18e.js";import{e as y}from"./a11y.tipps-db7fb79f.js";import{s as g,t as _}from"./events-2bb1065b.js";import{a as w,s as x}from"./reuse-b3566e4c.js";import{v as k}from"./tab-index-675a3daa.js";import{p as A,a as j}from"./controller-18ea7b97.js";import{A as S}from"./associated.controller-262c54a1.js";import{v as T}from"./access-key-878199ab.js";import{b as z,a as C}from"./align-floating-elements-ebf0712d.js";import{a as K}from"./alignment-40e15b6f.js";import{b as I,n as L}from"./dev.utils-0ab1db26.js";const E=(t,e)=>{a(t,"_ariaControls",e)},V=(t,e)=>{o(t,"_ariaExpanded",e)},B=(t,e)=>{l(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),e)},D=["button","reset","submit"],O=(t,e)=>{l(t,"_type",(t=>"string"==typeof t&&D.includes(t)),new Set([`KoliBriButtonType {${D.join(", ")}`]),e)},W=["primary","secondary","normal","tertiary","danger","ghost","custom"],q=(t,e)=>{l(t,"_variant",(t=>"string"==typeof t&&W.includes(t)),new Set([`KoliBriButtonVariant {${W.join(", ")}`]),e,{defaultValue:"normal"})},H=(t,e)=>{o(t,"_disabled",e)},R=(t,e)=>{o(t,"_ariaSelected",e)},M=class{render(){const e=x(this.state._label);return t(i,null,t("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-expanded":h(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":r(this.state._ariaSelected),class:{button:!0,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._hideLabel,"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("kol-span-wc",{class:"button-inner",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:e?"":this.state._label},t("slot",{name:"expert",slot:"expert"}))),t("kol-tooltip-wc",{"aria-hidden":"true",hidden:e||!this.state._hideLabel,_accessKey:this._accessKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,w(this.host,this.ref)},this.onClick=t=>{var e,i;"submit"===this.state._type?A({form:this.host,ref:this.ref}):"reset"===this.state._type?j({form:this.host,ref:this.ref}):(g(t),_("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)&&(d(t,this.ref),null===(i=this.state._on)||void 0===i||i.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 S(this,"button",this.host)}validateAccessKey(t){T(this,t)}validateAriaControls(t){E(this,t)}validateAriaExpanded(t){V(this,t)}validateAriaSelected(t){R(this,t)}validateCustomClass(t){u(this,t)}validateDisabled(t){H(this,t),!0===t&&y()}validateHideLabel(t){f(this,t)}validateIcons(t){p(this,t)}validateId(t){a(this,"_id",t)}validateLabel(t){m(this,t)}validateName(t){this.controller.validateName(t)}validateOn(t){B(this,t)}validateRole(t){s(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){k(this,t)}validateTooltipAlign(t){v(this,t)}validateType(t){O(this,t)}validateValue(t){c(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){q(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 n(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"]}}},N=(t,e)=>{a(t,"_id",e)},P=new Set;function $(t){P.forEach((t=>{t.style.setProperty("z-index","999")})),P.add(t),t.style.setProperty("z-index","1000")}function F(t){if(P.delete(t),P.size>0){const t=Array.from(P).pop();t&&t.style.setProperty("z-index","1000")}}const G="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-tooltip-wc .tooltip-floating {\n\t\tanimation-duration: 0.5s;\n\t\tanimation-iteration-count: 1;\n\t\tanimation-name: fadeInOpacity;\n\t\tanimation-timing-function: ease-in;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\t\t/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tmax-width: 90vw;\n\t\tmax-height: 90vh;\n\t}\n\n\t/* Shared between content and arrow */\n\tkol-tooltip-wc .tooltip-area {\n\t\tbackground-color: #fff;\n\t\tcolor: #000;\n\t}\n\n\tkol-tooltip-wc .tooltip-arrow {\n\t\theight: 10px;\n\t\tposition: absolute;\n\t\ttransform: rotate(45deg);\n\t\twidth: 10px;\n\t\tz-index: 999;\n\t}\n\n\tkol-tooltip-wc .tooltip-content {\n\t\tposition: relative;\n\t\tz-index: 1000;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n",J=class{constructor(t){e(this,t),this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){$(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),I().body.addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=z(t,e,(()=>{this.alignTooltip()}))}},this.hideTooltip=()=>{this.tooltipElement&&(F(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(I().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("focusin",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount),t.addEventListener("focusout",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("focusin",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount),t.addEventListener("focusout",this.decrementOverFocusCount)},this.resyncListeners=(t,e,i=!1)=>{t&&this.removeListeners(t),e&&(i&&(this.previousSibling=e),this.addListeners(e))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._accessKey=void 0,this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:L(),_label:"…"}}async alignTooltip(){this.tooltipElement&&this.previousSibling&&await C({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}render(){return t(i,null,""!==this.state._label&&t("div",{class:"tooltip-floating",ref:this.catchTooltipElement},t("div",{class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),t("kol-span-wc",{class:"tooltip-area tooltip-content",id:this.state._id,_accessKey:this._accessKey,_label:this.state._label})))}validateAccessKey(t){T(this,t)}validateAlign(t){K(this,t)}validateId(t){N(this,t)}validateLabel(t){b(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t;this.resyncListeners(this.previousSibling,null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t;this.previousSibling=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,this.handleEventListeners()}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return n(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};J.style=G;export{M as kol_button_wc,J as kol_tooltip_wc};