@public-ui/components 3.0.1-rc.0 → 3.0.1

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

@@ -1 +1 @@
-{"version":3,"names":["validateAccordionCallbacks","component","value","watchValidator","Set","defaultStyleCss","KolAccordionDefaultStyle0","featureHint","KolAccordion","this","nonce","catchRef","ref","buttonWcRef","handleOnClick","event","_open","setTimeout","_b","_a","state","_on","onClick","call","host","dispatchDomEvent","KolEvent","click","_label","_level","kolFocus","render","_disabled","rootClass","props","id","label","open","disabled","level","class","HeadingProps","HeadingButtonProps","ContentProps","wrapperClass","animationClass","h","KolCollapsibleFc","Object","assign","key","validateDisabled","validateLabel","required","validateLevel","watchHeadingLevel","validateOn","on","validateOpen","componentWillLoad"],"sources":["src/schema/props/accordion-callbacks.ts","src/components/accordion/style.scss?tag=kol-accordion&mode=default&encapsulation=shadow","src/components/accordion/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventValueOrEventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type AccordionCallbacksPropType<T> = {\n\t[Callback.onClick]?: EventValueOrEventCallback<MouseEvent, T>;\n};\n\n/**\n * Defines the callback functions for accordion events.\n */\nexport type PropAccordionCallbacks<T> = {\n\ton: AccordionCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateAccordionCallbacks = (component: Generic.Element.Component, value?: AccordionCallbacksPropType<boolean>): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['AccordionCallbacksPropType {Events.onClick}']), value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n@use '../../functional-components/Collapsible/collapsible' as *;\n\n@layer kol-component {\n\t.kol-accordion {\n\t\tfont-size: rem(16);\n\t}\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport type { JSX } from '@stencil/core';\nimport type {\n\tAccordionAPI,\n\tAccordionStates,\n\tAccordionCallbacksPropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHeadingLevel,\n\tLabelPropType,\n\tOpenPropType,\n} from '../../schema';\nimport { featureHint, validateAccordionCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport { nonce } from '../../utils/dev.utils';\nimport { watchHeadingLevel } from '../heading/validation';\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\n/**\n *\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n */\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements AccordionAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolAccordionElement;\n\n\tprivate readonly nonce = nonce();\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\tthis.state._on?.onClick?.(event, this._open === true);\n\t\t\tif (this.host) {\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.click, this._open === true);\n\t\t\t}\n\t\t});\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled, _level } = this.state;\n\t\tconst rootClass = 'kol-accordion';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.nonce,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.catchRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t<slot />\n\t\t\t</KolCollapsibleFc>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * 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\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen an.\n\t */\n\t@Prop() public _on?: AccordionCallbacksPropType<boolean>;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: AccordionStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 0,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: AccordionCallbacksPropType<boolean>): void {\n\t\tvalidateAccordionCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"],"mappings":";;;qhBAkBO,MAAMA,EAA6B,CAACC,EAAsCC,KAChFC,EAAeF,EAAW,OAAQC,UAAiBA,IAAU,UAAYA,IAAU,MAAM,IAAIE,IAAI,CAAC,gDAAiDF,EAAM,ECnB1J,MAAMG,EAAkB,2yLACxB,MAAAC,EAAeD,ECkBfE,EAAY,+OAKZA,EAAY,mE,MAaCC,EAAY,M,yBAGPC,KAAAC,MAAQA,IAGRD,KAAAE,SAAYC,IAC5BH,KAAKI,YAAcD,CAAG,EAQfH,KAAAK,cAAiBC,IACxBN,KAAKO,OAASP,KAAKO,MAQnBC,YAAW,K,SACVC,GAAAC,EAAAV,KAAKW,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEG,WAAO,MAAAJ,SAAA,SAAAA,EAAAK,KAAAJ,EAAGJ,EAAON,KAAKO,QAAU,MAChD,GAAIP,KAAKe,KAAM,CACdC,EAAiBhB,KAAKe,KAAME,EAASC,MAAOlB,KAAKO,QAAU,K,IAE3D,E,eAqCkC,M,kCAUE,E,8BAW0B,M,WAExB,CACxCY,OAAQ,GACRC,OAAQ,EACRR,IAAK,G,CAjFC,cAAMS,G,aACNX,EAAAV,KAAKI,eAAW,MAAAM,SAAA,SAAAA,EAAEW,W,CAoBlB,MAAAC,GACN,MAAMf,MAAEA,EAAKY,OAAEA,EAAMI,UAAEA,EAASH,OAAEA,GAAWpB,KAAKW,MAClD,MAAMa,EAAY,gBAElB,MAAMC,EAA0B,CAC/BC,GAAI1B,KAAKC,MACT0B,MAAOR,EACPS,KAAMrB,EACNsB,SAAUN,EACVO,MAAOV,EACPP,QAASb,KAAKK,cACd0B,MAAOP,EACPQ,aAAc,CAAED,MAAO,GAAGP,cAC1BS,mBAAoB,CACnB9B,IAAKH,KAAKE,SACV6B,MAAO,GAAGP,qBAEXU,aAAc,CACbH,MAAO,GAAGP,aACVW,aAAc,GAAGX,aACjBY,eAAgB,GAAGZ,yBAIrB,OACCa,EAACC,EAAgBC,OAAAC,OAAA,CAAAC,IAAA,4CAAKhB,GACrBY,EAAA,QAAAI,IAAA,6C,CAsCI,gBAAAC,CAAiBjD,GACvBiD,EAAiB1C,KAAMP,E,CAIjB,aAAAkD,CAAclD,GACpBkD,EAAc3C,KAAMP,EAAO,CAC1BmD,SAAU,M,CAKL,aAAAC,CAAcpD,GACpBqD,EAAkB9C,KAAMP,E,CAIlB,UAAAsD,CAAWC,GACjBzD,EAA2BS,KAAMgD,E,CAI3B,YAAAC,CAAaxD,GACnBwD,EAAajD,KAAMP,E,CAGb,iBAAAyD,GACNlD,KAAK0C,iBAAiB1C,KAAKuB,WAC3BvB,KAAK2C,cAAc3C,KAAKmB,QACxBnB,KAAK6C,cAAc7C,KAAKoB,QACxBpB,KAAK+C,WAAW/C,KAAKY,KACrBZ,KAAKiD,aAAajD,KAAKO,M","ignoreList":[]}
+{"version":3,"names":["validateAccordionCallbacks","component","value","watchValidator","Set","defaultStyleCss","KolAccordionDefaultStyle0","featureHint","KolAccordion","this","nonce","catchRef","ref","buttonWcRef","handleOnClick","event","_open","setTimeout","_b","_a","state","_on","onClick","call","host","dispatchDomEvent","KolEvent","click","_label","_level","kolFocus","render","_disabled","rootClass","props","id","label","open","disabled","level","class","HeadingProps","HeadingButtonProps","ContentProps","wrapperClass","animationClass","h","KolCollapsibleFc","Object","assign","key","validateDisabled","validateLabel","required","validateLevel","watchHeadingLevel","validateOn","on","validateOpen","componentWillLoad"],"sources":["src/schema/props/accordion-callbacks.ts","src/components/accordion/style.scss?tag=kol-accordion&mode=default&encapsulation=shadow","src/components/accordion/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventValueOrEventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type AccordionCallbacksPropType<T> = {\n\t[Callback.onClick]?: EventValueOrEventCallback<MouseEvent, T>;\n};\n\n/**\n * Defines the callback functions for accordion events.\n */\nexport type PropAccordionCallbacks<T> = {\n\ton: AccordionCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateAccordionCallbacks = (component: Generic.Element.Component, value?: AccordionCallbacksPropType<boolean>): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['AccordionCallbacksPropType {Events.onClick}']), value);\n};\n","@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n@use '../../functional-components/Collapsible/collapsible' as *;\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport type { JSX } from '@stencil/core';\nimport type {\n\tAccordionAPI,\n\tAccordionStates,\n\tAccordionCallbacksPropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHeadingLevel,\n\tLabelPropType,\n\tOpenPropType,\n} from '../../schema';\nimport { featureHint, validateAccordionCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport { nonce } from '../../utils/dev.utils';\nimport { watchHeadingLevel } from '../heading/validation';\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\n/**\n *\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n */\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements AccordionAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolAccordionElement;\n\n\tprivate readonly nonce = nonce();\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\tthis.state._on?.onClick?.(event, this._open === true);\n\t\t\tif (this.host) {\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.click, this._open === true);\n\t\t\t}\n\t\t});\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled, _level } = this.state;\n\t\tconst rootClass = 'kol-accordion';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.nonce,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.catchRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t<slot />\n\t\t\t</KolCollapsibleFc>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * 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\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen an.\n\t */\n\t@Prop() public _on?: AccordionCallbacksPropType<boolean>;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: AccordionStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 0,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: AccordionCallbacksPropType<boolean>): void {\n\t\tvalidateAccordionCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"],"mappings":";;;qhBAkBO,MAAMA,EAA6B,CAACC,EAAsCC,KAChFC,EAAeF,EAAW,OAAQC,UAAiBA,IAAU,UAAYA,IAAU,MAAM,IAAIE,IAAI,CAAC,gDAAiDF,EAAM,ECnB1J,MAAMG,EAAkB,+oLACxB,MAAAC,EAAeD,ECkBfE,EAAY,+OAKZA,EAAY,mE,MAaCC,EAAY,M,yBAGPC,KAAAC,MAAQA,IAGRD,KAAAE,SAAYC,IAC5BH,KAAKI,YAAcD,CAAG,EAQfH,KAAAK,cAAiBC,IACxBN,KAAKO,OAASP,KAAKO,MAQnBC,YAAW,K,SACVC,GAAAC,EAAAV,KAAKW,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEG,WAAO,MAAAJ,SAAA,SAAAA,EAAAK,KAAAJ,EAAGJ,EAAON,KAAKO,QAAU,MAChD,GAAIP,KAAKe,KAAM,CACdC,EAAiBhB,KAAKe,KAAME,EAASC,MAAOlB,KAAKO,QAAU,K,IAE3D,E,eAqCkC,M,kCAUE,E,8BAW0B,M,WAExB,CACxCY,OAAQ,GACRC,OAAQ,EACRR,IAAK,G,CAjFC,cAAMS,G,aACNX,EAAAV,KAAKI,eAAW,MAAAM,SAAA,SAAAA,EAAEW,W,CAoBlB,MAAAC,GACN,MAAMf,MAAEA,EAAKY,OAAEA,EAAMI,UAAEA,EAASH,OAAEA,GAAWpB,KAAKW,MAClD,MAAMa,EAAY,gBAElB,MAAMC,EAA0B,CAC/BC,GAAI1B,KAAKC,MACT0B,MAAOR,EACPS,KAAMrB,EACNsB,SAAUN,EACVO,MAAOV,EACPP,QAASb,KAAKK,cACd0B,MAAOP,EACPQ,aAAc,CAAED,MAAO,GAAGP,cAC1BS,mBAAoB,CACnB9B,IAAKH,KAAKE,SACV6B,MAAO,GAAGP,qBAEXU,aAAc,CACbH,MAAO,GAAGP,aACVW,aAAc,GAAGX,aACjBY,eAAgB,GAAGZ,yBAIrB,OACCa,EAACC,EAAgBC,OAAAC,OAAA,CAAAC,IAAA,4CAAKhB,GACrBY,EAAA,QAAAI,IAAA,6C,CAsCI,gBAAAC,CAAiBjD,GACvBiD,EAAiB1C,KAAMP,E,CAIjB,aAAAkD,CAAclD,GACpBkD,EAAc3C,KAAMP,EAAO,CAC1BmD,SAAU,M,CAKL,aAAAC,CAAcpD,GACpBqD,EAAkB9C,KAAMP,E,CAIlB,UAAAsD,CAAWC,GACjBzD,EAA2BS,KAAMgD,E,CAI3B,YAAAC,CAAaxD,GACnBwD,EAAajD,KAAMP,E,CAGb,iBAAAyD,GACNlD,KAAK0C,iBAAiB1C,KAAKuB,WAC3BvB,KAAK2C,cAAc3C,KAAKmB,QACxBnB,KAAK6C,cAAc7C,KAAKoB,QACxBpB,KAAK+C,WAAW/C,KAAKY,KACrBZ,KAAKiD,aAAajD,KAAKO,M","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,g as s}from"./index-831675d2.js";import{h as i,k as a,w as l}from"./index-88dea7b1.js";import{w as r}from"./validation-66c33ff5.js";import{K as o}from"./Alert-363bad74.js";import{d as n,K as h}from"./events-5886c68b.js";import{v as d}from"./has-closer-ca9bcd36.js";import{v as c}from"./label-5982d241.js";import"./tslib.es6-1173d062.js";import"./clsx-09a06a12.js";import"./component-names-799e91e2.js";import"./i18n-01abf777.js";import"./i18n-45224cc3.js";import"./bem-e4c3a2e6.js";import"./browser-f629a56a.js";import"./Heading-9bb68e2c.js";const v=["default","info","success","warning","error"],f=["card","msg"],m=class{constructor(e){t(this,e),this.close=()=>{var t,e;null===(e=null===(t=this._on)||void 0===t?void 0:t.onClose)||void 0===e||e.call(t,new Event("Close")),this.host&&n(this.host,h.close)},this.handleAlertTimeout=()=>{this.validateAlert(!1)},this.validateOnValue=t=>"object"==typeof t&&null!==t&&"function"==typeof t.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=0,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:0}}render(){const{_alert:t,_hasCloser:a,_label:s,_level:i,_type:l,_variant:r}=this.state,n={alert:t,hasCloser:a,label:s,level:i,type:l,variant:r,onCloserClick:this.close,onAlertTimeout:this.handleAlertTimeout};return e(o,Object.assign({key:"9038051f21b86a9c83c8ac5619e723dff5ebcbeb"},n),e("slot",{key:"cfd116176ab783db5232d9d5520f8ae890ca44db"}))}validateAlert(t){i(this,"_alert",t)}validateHasCloser(t){d(this,t)}validateLabel(t){c(this,t)}validateLevel(t){r(this,t)}validateOn(t){this.validateOnValue(t)&&a(this,"_on",{onClose:t.onClose})}validateType(t){l(this,"_type",(t=>"string"==typeof t&&v.includes(t)),new Set(`String {${v.join(", ")}`),t)}validateVariant(t){l(this,"_variant",(t=>"string"==typeof t&&f.includes(t)),new Set(`AlertVariant {${f.join(", ")}`),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}get host(){return s(this)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};export{m as kol_alert_wc};
+import{r as t,h as e,g as s}from"./index-1ed13705.js";import{i,l as a,w as l}from"./index-ebe5a881.js";import{w as r}from"./validation-152ea092.js";import{K as o}from"./Alert-112aec59.js";import{d as n,K as h}from"./events-bad0a075.js";import{v as d}from"./has-closer-798e8f4d.js";import{v}from"./label-bf9966d0.js";import"./tslib.es6-1173d062.js";import"./clsx-09a06a12.js";import"./component-names-7924d82a.js";import"./i18n-260f0fe9.js";import"./i18n-45224cc3.js";import"./bem-e4c3a2e6.js";import"./browser-f629a56a.js";import"./Heading-733c8dda.js";const c=["default","info","success","warning","error"],f=["card","msg"],m=class{constructor(e){t(this,e),this.close=()=>{var e,t;null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e,new Event("Close")),this.host&&n(this.host,h.close)},this.handleAlertTimeout=()=>{this.validateAlert(!1)},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=0,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:0}}render(){const{_alert:t,_hasCloser:a,_label:s,_level:i,_type:l,_variant:r}=this.state,n={alert:t,hasCloser:a,label:s,level:i,type:l,variant:r,onCloserClick:this.close,onAlertTimeout:this.handleAlertTimeout};return e(o,Object.assign({key:"9038051f21b86a9c83c8ac5619e723dff5ebcbeb"},n),e("slot",{key:"cfd116176ab783db5232d9d5520f8ae890ca44db"}))}validateAlert(e){i(this,"_alert",e)}validateHasCloser(e){d(this,e)}validateLabel(e){v(this,e)}validateLevel(e){r(this,e)}validateOn(e){this.validateOnValue(e)&&a(this,"_on",{onClose:e.onClose})}validateType(e){l(this,"_type",(e=>"string"==typeof e&&c.includes(e)),new Set(`String {${c.join(", ")}`),e)}validateVariant(e){l(this,"_variant",(e=>"string"==typeof e&&f.includes(e)),new Set(`AlertVariant {${f.join(", ")}`),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}get host(){return s(this)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};export{m as kol_alert_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["alertTypeOptions","alertVariantOptions","KolAlertWc","this","close","_b","_a","_on","onClose","call","Event","host","dispatchDomEvent","KolEvent","handleAlertTimeout","validateAlert","validateOnValue","value","_level","render","_alert","_hasCloser","_label","_type","_variant","state","props","alert","hasCloser","label","level","type","variant","onCloserClick","onAlertTimeout","h","KolAlertFc","Object","assign","key","watchBoolean","validateHasCloser","validateLabel","validateLevel","watchHeadingLevel","validateOn","setState","validateType","watchValidator","includes","Set","join","validateVariant","componentWillLoad"],"sources":["src/schema/components/alert.ts","src/components/alert/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { HeadingLevel, PropAlert, PropHasCloser, PropLabel } from '../props';\nimport type { EventCallback } from '../types';\n\nexport const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'] as const;\nexport type AlertType = (typeof alertTypeOptions)[number];\n\nexport const alertVariantOptions = ['card', 'msg'] as const;\nexport type AlertVariant = (typeof alertVariantOptions)[number];\n\nexport type KoliBriAlertEventCallbacks = {\n\tonClose?: EventCallback<Event>;\n};\n\ntype RequiredAlertProps = NonNullable<unknown>;\ntype OptionalAlertProps = {\n\tlevel: HeadingLevel;\n\ton: KoliBriAlertEventCallbacks;\n\ttype: AlertType;\n\tvariant: AlertVariant;\n} & PropLabel &\n\tPropAlert &\n\tPropHasCloser;\n\ntype RequiredAlertStates = RequiredAlertProps;\ntype OptionalAlertStates = OptionalAlertProps;\n\nexport type InternalAlertProps = RequiredAlertProps & OptionalAlertProps;\n\nexport type AlertProps = Generic.Element.Members<RequiredAlertProps, OptionalAlertProps>;\nexport type AlertStates = Generic.Element.Members<RequiredAlertStates, OptionalAlertStates>;\nexport type AlertAPI = Generic.Element.ComponentApi<RequiredAlertProps, OptionalAlertProps, RequiredAlertStates, OptionalAlertStates>;\n","import type { JSX } from '@stencil/core';\nimport { alertTypeOptions, alertVariantOptions, setState, validateHasCloser, validateLabel, watchBoolean, watchValidator } from '../../schema';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { watchHeadingLevel } from '../heading/validation';\nimport type { AlertAPI, AlertStates, AlertType, AlertVariant, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nimport KolAlertFc, { type KolAlertFcProps } from '../../functional-components/Alert';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @internal\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert-wc',\n\tshadow: false,\n})\nexport class KolAlertWc implements AlertAPI {\n\t@Element() private readonly host?: HTMLKolAlertWcElement;\n\n\tprivate readonly close = () => {\n\t\tthis._on?.onClose?.(new Event('Close'));\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t};\n\n\tprivate readonly handleAlertTimeout = () => {\n\t\tthis.validateAlert(false);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _alert, _hasCloser, _label, _level, _type, _variant } = this.state;\n\n\t\tconst props: KolAlertFcProps = {\n\t\t\talert: _alert,\n\t\t\thasCloser: _hasCloser,\n\t\t\tlabel: _label,\n\t\t\tlevel: _level,\n\t\t\ttype: _type,\n\t\t\tvariant: _variant,\n\t\t\tonCloserClick: this.close,\n\t\t\tonAlertTimeout: this.handleAlertTimeout,\n\t\t};\n\n\t\treturn (\n\t\t\t<KolAlertFc {...props}>\n\t\t\t\t<slot />\n\t\t\t</KolAlertFc>\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 = 0;\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: AlertStates = {\n\t\t_level: 0,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t},\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value?) => typeof value === 'string' && alertTypeOptions.includes(value),\n\t\t\tnew Set(`String {${alertTypeOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value?) => typeof value === 'string' && alertVariantOptions.includes(value),\n\t\t\tnew Set(`AlertVariant {${alertVariantOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":";;;mjBAKO,MAAMA,EAAmB,CAAC,UAAW,OAAQ,UAAW,UAAW,SAGnE,MAAMC,EAAsB,CAAC,OAAQ,O,MCQ/BC,EAAU,M,yBAGLC,KAAAC,MAAQ,K,SACxBC,GAAAC,EAAAH,KAAKI,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAO,MAAAH,SAAA,SAAAA,EAAAI,KAAAH,EAAG,IAAII,MAAM,UAC9B,GAAIP,KAAKQ,KAAM,CACdC,EAAiBT,KAAKQ,KAAME,EAAST,M,GAItBD,KAAAW,mBAAqB,KACrCX,KAAKY,cAAc,MAAM,EAoFlBZ,KAAAa,gBAAmBC,UACnBA,IAAU,UAAYA,IAAU,aAAgBA,EAAqCT,UAAY,W,YA1DvE,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAEJ,CACpCU,OAAQ,E,CA1DF,MAAAC,GACN,MAAMC,OAAEA,EAAMC,WAAEA,EAAUC,OAAEA,EAAMJ,OAAEA,EAAMK,MAAEA,EAAKC,SAAEA,GAAarB,KAAKsB,MAErE,MAAMC,EAAyB,CAC9BC,MAAOP,EACPQ,UAAWP,EACXQ,MAAOP,EACPQ,MAAOZ,EACPa,KAAMR,EACNS,QAASR,EACTS,cAAe9B,KAAKC,MACpB8B,eAAgB/B,KAAKW,oBAGtB,OACCqB,EAACC,EAAUC,OAAAC,OAAA,CAAAC,IAAA,4CAAKb,GACfS,EAAA,QAAAI,IAAA,6C,CA8CI,aAAAxB,CAAcE,GACpBuB,EAAarC,KAAM,SAAUc,E,CAIvB,iBAAAwB,CAAkBxB,GACxBwB,EAAkBtC,KAAMc,E,CAIlB,aAAAyB,CAAczB,GACpByB,EAAcvC,KAAMc,E,CAId,aAAA0B,CAAc1B,GACpB2B,EAAkBzC,KAAMc,E,CAOlB,UAAA4B,CAAW5B,GACjB,GAAId,KAAKa,gBAAgBC,GAAQ,CAChC6B,EACC3C,KACA,MACA,CACCK,QAAUS,EAAqCT,S,EAkB5C,YAAAuC,CAAa9B,GACnB+B,EACC7C,KACA,SACCc,UAAkBA,IAAU,UAAYjB,EAAiBiD,SAAShC,IACnE,IAAIiC,IAAI,WAAWlD,EAAiBmD,KAAK,SACzClC,E,CAKK,eAAAmC,CAAgBnC,GACtB+B,EACC7C,KACA,YACCc,UAAkBA,IAAU,UAAYhB,EAAoBgD,SAAShC,IACtE,IAAIiC,IAAI,iBAAiBjD,EAAoBkD,KAAK,SAClDlC,E,CAIK,iBAAAoC,GACNlD,KAAKY,cAAcZ,KAAKiB,QACxBjB,KAAKsC,kBAAkBtC,KAAKkB,YAC5BlB,KAAKuC,cAAcvC,KAAKmB,QACxBnB,KAAKwC,cAAcxC,KAAKe,QACxBf,KAAK0C,WAAW1C,KAAKI,KACrBJ,KAAK4C,aAAa5C,KAAKoB,OACvBpB,KAAKiD,gBAAgBjD,KAAKqB,S","ignoreList":[]}
+{"version":3,"names":["alertTypeOptions","alertVariantOptions","KolAlertWc","this","close","_b","_a","_on","onClose","call","Event","host","dispatchDomEvent","KolEvent","handleAlertTimeout","validateAlert","validateOnValue","value","_level","render","_alert","_hasCloser","_label","_type","_variant","state","props","alert","hasCloser","label","level","type","variant","onCloserClick","onAlertTimeout","h","KolAlertFc","Object","assign","key","watchBoolean","validateHasCloser","validateLabel","validateLevel","watchHeadingLevel","validateOn","setState","validateType","watchValidator","includes","Set","join","validateVariant","componentWillLoad"],"sources":["src/schema/components/alert.ts","src/components/alert/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { HeadingLevel, PropAlert, PropHasCloser, PropLabel } from '../props';\nimport type { EventCallback } from '../types';\n\nexport const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'] as const;\nexport type AlertType = (typeof alertTypeOptions)[number];\n\nexport const alertVariantOptions = ['card', 'msg'] as const;\nexport type AlertVariant = (typeof alertVariantOptions)[number];\n\nexport type KoliBriAlertEventCallbacks = {\n\tonClose?: EventCallback<Event>;\n};\n\ntype RequiredAlertProps = NonNullable<unknown>;\ntype OptionalAlertProps = {\n\tlevel: HeadingLevel;\n\ton: KoliBriAlertEventCallbacks;\n\ttype: AlertType;\n\tvariant: AlertVariant;\n} & PropLabel &\n\tPropAlert &\n\tPropHasCloser;\n\ntype RequiredAlertStates = RequiredAlertProps;\ntype OptionalAlertStates = OptionalAlertProps;\n\nexport type InternalAlertProps = RequiredAlertProps & OptionalAlertProps;\n\nexport type AlertProps = Generic.Element.Members<RequiredAlertProps, OptionalAlertProps>;\nexport type AlertStates = Generic.Element.Members<RequiredAlertStates, OptionalAlertStates>;\nexport type AlertAPI = Generic.Element.ComponentApi<RequiredAlertProps, OptionalAlertProps, RequiredAlertStates, OptionalAlertStates>;\n","import type { JSX } from '@stencil/core';\nimport { alertTypeOptions, alertVariantOptions, setState, validateHasCloser, validateLabel, watchBoolean, watchValidator } from '../../schema';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { watchHeadingLevel } from '../heading/validation';\nimport type { AlertAPI, AlertStates, AlertType, AlertVariant, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nimport KolAlertFc, { type KolAlertFcProps } from '../../functional-components/Alert';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @internal\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert-wc',\n\tshadow: false,\n})\nexport class KolAlertWc implements AlertAPI {\n\t@Element() private readonly host?: HTMLKolAlertWcElement;\n\n\tprivate readonly close = () => {\n\t\tthis._on?.onClose?.(new Event('Close'));\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t};\n\n\tprivate readonly handleAlertTimeout = () => {\n\t\tthis.validateAlert(false);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _alert, _hasCloser, _label, _level, _type, _variant } = this.state;\n\n\t\tconst props: KolAlertFcProps = {\n\t\t\talert: _alert,\n\t\t\thasCloser: _hasCloser,\n\t\t\tlabel: _label,\n\t\t\tlevel: _level,\n\t\t\ttype: _type,\n\t\t\tvariant: _variant,\n\t\t\tonCloserClick: this.close,\n\t\t\tonAlertTimeout: this.handleAlertTimeout,\n\t\t};\n\n\t\treturn (\n\t\t\t<KolAlertFc {...props}>\n\t\t\t\t<slot />\n\t\t\t</KolAlertFc>\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 = 0;\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: AlertStates = {\n\t\t_level: 0,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t},\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value?) => typeof value === 'string' && alertTypeOptions.includes(value),\n\t\t\tnew Set(`String {${alertTypeOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value?) => typeof value === 'string' && alertVariantOptions.includes(value),\n\t\t\tnew Set(`AlertVariant {${alertVariantOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":";;;yiBAKO,MAAMA,EAAmB,CAAC,UAAW,OAAQ,UAAW,UAAW,SAGnE,MAAMC,EAAsB,CAAC,OAAQ,O,MCQ/BC,EAAU,M,yBAGLC,KAAAC,MAAQ,K,SACxBC,GAAAC,EAAAH,KAAKI,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAO,MAAAH,SAAA,SAAAA,EAAAI,KAAAH,EAAG,IAAII,MAAM,UAC9B,GAAIP,KAAKQ,KAAM,CACdC,EAAiBT,KAAKQ,KAAME,EAAST,M,GAItBD,KAAAW,mBAAqB,KACrCX,KAAKY,cAAc,MAAM,EAoFlBZ,KAAAa,gBAAmBC,UACnBA,IAAU,UAAYA,IAAU,aAAgBA,EAAqCT,UAAY,W,YA1DvE,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAEJ,CACpCU,OAAQ,E,CA1DF,MAAAC,GACN,MAAMC,OAAEA,EAAMC,WAAEA,EAAUC,OAAEA,EAAMJ,OAAEA,EAAMK,MAAEA,EAAKC,SAAEA,GAAarB,KAAKsB,MAErE,MAAMC,EAAyB,CAC9BC,MAAOP,EACPQ,UAAWP,EACXQ,MAAOP,EACPQ,MAAOZ,EACPa,KAAMR,EACNS,QAASR,EACTS,cAAe9B,KAAKC,MACpB8B,eAAgB/B,KAAKW,oBAGtB,OACCqB,EAACC,EAAUC,OAAAC,OAAA,CAAAC,IAAA,4CAAKb,GACfS,EAAA,QAAAI,IAAA,6C,CA8CI,aAAAxB,CAAcE,GACpBuB,EAAarC,KAAM,SAAUc,E,CAIvB,iBAAAwB,CAAkBxB,GACxBwB,EAAkBtC,KAAMc,E,CAIlB,aAAAyB,CAAczB,GACpByB,EAAcvC,KAAMc,E,CAId,aAAA0B,CAAc1B,GACpB2B,EAAkBzC,KAAMc,E,CAOlB,UAAA4B,CAAW5B,GACjB,GAAId,KAAKa,gBAAgBC,GAAQ,CAChC6B,EACC3C,KACA,MACA,CACCK,QAAUS,EAAqCT,S,EAkB5C,YAAAuC,CAAa9B,GACnB+B,EACC7C,KACA,SACCc,UAAkBA,IAAU,UAAYjB,EAAiBiD,SAAShC,IACnE,IAAIiC,IAAI,WAAWlD,EAAiBmD,KAAK,SACzClC,E,CAKK,eAAAmC,CAAgBnC,GACtB+B,EACC7C,KACA,YACCc,UAAkBA,IAAU,UAAYhB,EAAoBgD,SAAShC,IACtE,IAAIiC,IAAI,iBAAiBjD,EAAoBkD,KAAK,SAClDlC,E,CAIK,iBAAAoC,GACNlD,KAAKY,cAAcZ,KAAKiB,QACxBjB,KAAKsC,kBAAkBtC,KAAKkB,YAC5BlB,KAAKuC,cAAcvC,KAAKmB,QACxBnB,KAAKwC,cAAcxC,KAAKe,QACxBf,KAAK0C,WAAW1C,KAAKI,KACrBJ,KAAK4C,aAAa5C,KAAKoB,OACvBpB,KAAKiD,gBAAgBjD,KAAKqB,S","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-831675d2.js";import{b as t}from"./component-names-799e91e2.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",i=o,a=class{constructor(e){n(this,e),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=0,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:0}}render(){return e(t,{key:"2864ce68b908fefb6e43f8ab8d255b67060d5999",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},e("slot",{key:"d6ac5ace725340adf1202221172d0f9200bd8bd9"}))}};a.style={default:i};export{a as kol_alert};
+import{r as n,h as e}from"./index-1ed13705.js";import{c as t}from"./component-names-7924d82a.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}",i=o,a=class{constructor(e){n(this,e),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=0,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:0}}render(){return e(t,{key:"2864ce68b908fefb6e43f8ab8d255b67060d5999",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},e("slot",{key:"d6ac5ace725340adf1202221172d0f9200bd8bd9"}))}};a.style={default:i};export{a as kol_alert};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolAlertDefaultStyle0","KolAlert","_level","render","h","KolAlertWcTag","key","_alert","this","_hasCloser","_label","_on","_type","_variant"],"sources":["src/components/alert/style.scss?tag=kol-alert&mode=default&encapsulation=shadow","src/components/alert/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-alert;\n\n@layer kol-component {\n\t.kol-alert {\n\t\tfont-size: rem(16);\n\t}\n}\n","import type { AlertProps, AlertStates, AlertType, AlertVariant, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop, State } from '@stencil/core';\nimport { KolAlertWcTag } from '../../core/component-names';\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements AlertProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertWcTag\n\t\t\t\t_alert={this._alert}\n\t\t\t\t_hasCloser={this._hasCloser}\n\t\t\t\t_label={this._label}\n\t\t\t\t_level={this._level}\n\t\t\t\t_on={this._on}\n\t\t\t\t_type={this._type}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolAlertWcTag>\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 = 0;\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: AlertStates = {\n\t\t_level: 0,\n\t};\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,q2LACxB,MAAAC,EAAeD,E,MCcFE,EAAQ,M,qCAoBc,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAEJ,CACpCC,OAAQ,E,CArDF,MAAAC,GACN,OACCC,EAACC,EAAa,CAAAC,IAAA,2CACbC,OAAQC,KAAKD,OACbE,WAAYD,KAAKC,WACjBC,OAAQF,KAAKE,OACbR,OAAQM,KAAKN,OACbS,IAAKH,KAAKG,IACVC,MAAOJ,KAAKI,MACZC,SAAUL,KAAKK,UAEfT,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolAlertDefaultStyle0","KolAlert","_level","render","h","KolAlertWcTag","key","_alert","this","_hasCloser","_label","_on","_type","_variant"],"sources":["src/components/alert/style.scss?tag=kol-alert&mode=default&encapsulation=shadow","src/components/alert/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n\n@include kol-alert;\n","import type { AlertProps, AlertStates, AlertType, AlertVariant, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop, State } from '@stencil/core';\nimport { KolAlertWcTag } from '../../core/component-names';\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements AlertProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertWcTag\n\t\t\t\t_alert={this._alert}\n\t\t\t\t_hasCloser={this._hasCloser}\n\t\t\t\t_label={this._label}\n\t\t\t\t_level={this._level}\n\t\t\t\t_on={this._on}\n\t\t\t\t_type={this._type}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolAlertWcTag>\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 = 0;\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: AlertStates = {\n\t\t_level: 0,\n\t};\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,+lLACxB,MAAAC,EAAeD,E,MCcFE,EAAQ,M,qCAoBc,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAEJ,CACpCC,OAAQ,E,CArDF,MAAAC,GACN,OACCC,EAACC,EAAa,CAAAC,IAAA,2CACbC,OAAQC,KAAKD,OACbE,WAAYD,KAAKC,WACjBC,OAAQF,KAAKE,OACbR,OAAQM,KAAKN,OACbS,IAAKH,KAAKG,IACVC,MAAOJ,KAAKI,MACZC,SAAUL,KAAKK,UAEfT,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as a,h as t}from"./index-831675d2.js";import"./index-88dea7b1.js";import{t as r}from"./i18n-01abf777.js";import{v as s}from"./image-source-00f34574.js";import{v as i}from"./label-5982d241.js";import"./i18n-45224cc3.js";const e=a=>0===a.length?"":a[0].toUpperCase(),l=a=>{const t=a.split(/\s+/),s=t.at(0),i=t.at(-1);return t.length>=2&&s&&i?`${e(s)}${e(i)}`:e(a)},o=class{constructor(t){a(this,t),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return t("div",{key:"b9ad63a1fb9190d47524deae8e59a00d2a14fa83","aria-label":r("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"kol-avatar",role:"img"},this.state._src?t("img",{alt:"","aria-hidden":"true",class:"kol-avatar__image",src:this.state._src}):t("span",{"aria-hidden":"true",class:"kol-avatar__initials"},l(this.state._label.trim())))}validateSrc(a){s(this,a)}validateLabel(a){i(this,a,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};export{o as kol_avatar_wc};
+import{r as a,h as t}from"./index-1ed13705.js";import"./index-ebe5a881.js";import{t as e}from"./i18n-260f0fe9.js";import{v as r}from"./image-source-8079f8a5.js";import{v as s}from"./label-bf9966d0.js";import"./i18n-45224cc3.js";const i=a=>0===a.length?"":a[0].toUpperCase(),l=a=>{const t=a.split(/\s+/),e=t[0],s=t[t.length-1];return t.length>=2&&e&&s?`${i(e)}${i(s)}`:i(a)},o=class{constructor(t){a(this,t),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return t("div",{key:"b9ad63a1fb9190d47524deae8e59a00d2a14fa83","aria-label":e("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"kol-avatar",role:"img"},this.state._src?t("img",{alt:"","aria-hidden":"true",class:"kol-avatar__image",src:this.state._src}):t("span",{"aria-hidden":"true",class:"kol-avatar__initials"},l(this.state._label.trim())))}validateSrc(a){r(this,a)}validateLabel(a){s(this,a,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};export{o as kol_avatar_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["formatNameAsInitial","name","length","toUpperCase","formatLabelAsInitials","label","names","split","first","at","last","KolAvatarWc","_src","_label","render","h","key","translate","placeholders","this","state","class","role","alt","src","trim","validateSrc","value","validateImageSource","validateLabel","required","componentWillLoad"],"sources":["src/components/avatar/controller.ts","src/components/avatar/component.tsx"],"sourcesContent":["const formatNameAsInitial = (name: string): string => {\n\tif (name.length === 0) {\n\t\treturn '';\n\t}\n\n\treturn name[0].toUpperCase();\n};\n\nexport const formatLabelAsInitials = (label: string): string => {\n\tconst names = label.split(/\\s+/); // split by any whitespace characters\n\tconst first = names.at(0);\n\tconst last = names.at(-1);\n\n\t// names might consist of only one word\n\tif (names.length >= 2 && first && last) {\n\t\treturn `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;\n\t}\n\n\treturn formatNameAsInitial(label);\n};\n","import type { JSX } from '@stencil/core';\nimport { validateImageSource, validateLabel } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { formatLabelAsInitials } from './controller';\n\nimport type { AvatarAPI, AvatarStates, ImageSourcePropType, LabelPropType } from '../../schema';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-avatar-wc',\n\tshadow: false,\n})\nexport class KolAvatarWc implements AvatarAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div aria-label={translate('kol-avatar-alt', { placeholders: { name: this.state._label } })} class=\"kol-avatar\" role=\"img\">\n\t\t\t\t{this.state._src ? (\n\t\t\t\t\t<img alt=\"\" aria-hidden=\"true\" class=\"kol-avatar__image\" src={this.state._src} />\n\t\t\t\t) : (\n\t\t\t\t\t<span aria-hidden=\"true\" class=\"kol-avatar__initials\">\n\t\t\t\t\t\t{formatLabelAsInitials(this.state._label.trim())}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: ImageSourcePropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: AvatarStates = {\n\t\t_src: '',\n\t\t_label: '', // ⚠ required\n\t};\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;oOAAA,MAAMA,EAAuBC,IAC5B,GAAIA,EAAKC,SAAW,EAAG,CACtB,MAAO,E,CAGR,OAAOD,EAAK,GAAGE,aAAa,EAGtB,MAAMC,EAAyBC,IACrC,MAAMC,EAAQD,EAAME,MAAM,OAC1B,MAAMC,EAAQF,EAAMG,GAAG,GACvB,MAAMC,EAAOJ,EAAMG,IAAI,GAGvB,GAAIH,EAAMJ,QAAU,GAAKM,GAASE,EAAM,CACvC,MAAO,GAAGV,EAAoBQ,KAASR,EAAoBU,I,CAG5D,OAAOV,EAAoBK,EAAM,E,MCFrBM,EAAW,M,8EAyBe,CACrCC,KAAM,GACNC,OAAQ,G,CA1BF,MAAAC,GACN,OACCC,EAAA,OAAAC,IAAA,wDAAiBC,EAAU,iBAAkB,CAAEC,aAAc,CAAEjB,KAAMkB,KAAKC,MAAMP,UAAaQ,MAAM,aAAaC,KAAK,OACnHH,KAAKC,MAAMR,KACXG,EAAA,OAAKQ,IAAI,GAAE,cAAa,OAAOF,MAAM,oBAAoBG,IAAKL,KAAKC,MAAMR,OAEzEG,EAAA,sBAAkB,OAAOM,MAAM,wBAC7BjB,EAAsBe,KAAKC,MAAMP,OAAOY,S,CAuBvC,WAAAC,CAAYC,GAClBC,EAAoBT,KAAMQ,E,CAIpB,aAAAE,CAAcF,GACpBE,EAAcV,KAAMQ,EAAO,CAC1BG,SAAU,M,CAIL,iBAAAC,GACNZ,KAAKO,YAAYP,KAAKP,MACtBO,KAAKU,cAAcV,KAAKN,O","ignoreList":[]}
+{"version":3,"names":["formatNameAsInitial","name","length","toUpperCase","formatLabelAsInitials","label","names","split","first","last","KolAvatarWc","_src","_label","render","h","key","translate","placeholders","this","state","class","role","alt","src","trim","validateSrc","value","validateImageSource","validateLabel","required","componentWillLoad"],"sources":["src/components/avatar/controller.ts","src/components/avatar/component.tsx"],"sourcesContent":["const formatNameAsInitial = (name: string): string => {\n\tif (name.length === 0) {\n\t\treturn '';\n\t}\n\n\treturn name[0].toUpperCase();\n};\n\nexport const formatLabelAsInitials = (label: string): string => {\n\tconst names = label.split(/\\s+/); // split by any whitespace characters\n\tconst first = names[0];\n\tconst last = names[names.length - 1];\n\n\t// names might consist of only one word\n\tif (names.length >= 2 && first && last) {\n\t\treturn `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;\n\t}\n\n\treturn formatNameAsInitial(label);\n};\n","import type { JSX } from '@stencil/core';\nimport { validateImageSource, validateLabel } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { formatLabelAsInitials } from './controller';\n\nimport type { AvatarAPI, AvatarStates, ImageSourcePropType, LabelPropType } from '../../schema';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-avatar-wc',\n\tshadow: false,\n})\nexport class KolAvatarWc implements AvatarAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div aria-label={translate('kol-avatar-alt', { placeholders: { name: this.state._label } })} class=\"kol-avatar\" role=\"img\">\n\t\t\t\t{this.state._src ? (\n\t\t\t\t\t<img alt=\"\" aria-hidden=\"true\" class=\"kol-avatar__image\" src={this.state._src} />\n\t\t\t\t) : (\n\t\t\t\t\t<span aria-hidden=\"true\" class=\"kol-avatar__initials\">\n\t\t\t\t\t\t{formatLabelAsInitials(this.state._label.trim())}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: ImageSourcePropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: AvatarStates = {\n\t\t_src: '',\n\t\t_label: '', // ⚠ required\n\t};\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;oOAAA,MAAMA,EAAuBC,IAC5B,GAAIA,EAAKC,SAAW,EAAG,CACtB,MAAO,E,CAGR,OAAOD,EAAK,GAAGE,aAAa,EAGtB,MAAMC,EAAyBC,IACrC,MAAMC,EAAQD,EAAME,MAAM,OAC1B,MAAMC,EAAQF,EAAM,GACpB,MAAMG,EAAOH,EAAMA,EAAMJ,OAAS,GAGlC,GAAII,EAAMJ,QAAU,GAAKM,GAASC,EAAM,CACvC,MAAO,GAAGT,EAAoBQ,KAASR,EAAoBS,I,CAG5D,OAAOT,EAAoBK,EAAM,E,MCFrBK,EAAW,M,8EAyBe,CACrCC,KAAM,GACNC,OAAQ,G,CA1BF,MAAAC,GACN,OACCC,EAAA,OAAAC,IAAA,wDAAiBC,EAAU,iBAAkB,CAAEC,aAAc,CAAEhB,KAAMiB,KAAKC,MAAMP,UAAaQ,MAAM,aAAaC,KAAK,OACnHH,KAAKC,MAAMR,KACXG,EAAA,OAAKQ,IAAI,GAAE,cAAa,OAAOF,MAAM,oBAAoBG,IAAKL,KAAKC,MAAMR,OAEzEG,EAAA,sBAAkB,OAAOM,MAAM,wBAC7BhB,EAAsBc,KAAKC,MAAMP,OAAOY,S,CAuBvC,WAAAC,CAAYC,GAClBC,EAAoBT,KAAMQ,E,CAIpB,aAAAE,CAAcF,GACpBE,EAAcV,KAAMQ,EAAO,CAC1BG,SAAU,M,CAIL,iBAAAC,GACNZ,KAAKO,YAAYP,KAAKP,MACtBO,KAAKU,cAAcV,KAAKN,O","ignoreList":[]}

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

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

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

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

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t}from"./index-831675d2.js";import{f as e,o,j as i,k as a}from"./index-88dea7b1.js";import{c as s}from"./clsx-09a06a12.js";import{a as r}from"./component-names-799e91e2.js";import"./i18n-01abf777.js";import"./bem-e4c3a2e6.js";import{K as l}from"./Span-c9064f6e.js";import{n as d}from"./dev.utils-f7f473b7.js";import{h as c,v as h}from"./color-066d384d.js";import{v as m}from"./icons-acf365fd.js";import"./i18n-45224cc3.js";import"./browser-f629a56a.js";import"./tslib.es6-1173d062.js";import"./Icon-23e91462.js";import"./markdown-f827f2ac.js";import"./InternalUnderlinedBadgeText-d345205c.js";import"./isArray-7a60fa7f.js";import"./isObject-ffcbbb76.js";const b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-badge {\n    display: inline-flex;\n    place-items: center;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge .kol-badge__smart-button .button {\n    color: inherit;\n  }\n}",f=b;e("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const p=class{constructor(t){n(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.id=d(),this.handleColorChange=n=>{const t=c(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_icons:{}}}renderSmartButton(n){return t(r,{class:"kol-badge__smart-button",_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_variant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return t("span",{key:"c04540b377e88484c6c982be4d411937ef3618ef",class:s("kol-badge",{"kol-badge--has-smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton}),style:{backgroundColor:this.bgColorStr,color:this.colorStr}},t(l,{key:"d01ea028555a90f21229d1584bfb93a5c2a00c25",class:"kol-badge__label",id:n?this.id:void 0,allowMarkdown:!0,icons:this.state._icons,label:this._label}),n&&this.renderSmartButton(this.state._smartButton))}validateIcons(n){m(this,n)}validateColor(n){h(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){o(n,(()=>{try{n=i(n)}catch(n){}a(this,"_smartButton",n)}))}componentWillLoad(){this.validateIcons(this._icons),this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}}};p.style={default:f};export{p as kol_badge};
+import{r as n,h as t}from"./index-1ed13705.js";import{f as e,o,k as i,l as a}from"./index-ebe5a881.js";import{c as s}from"./clsx-09a06a12.js";import{b as l}from"./component-names-7924d82a.js";import"./i18n-260f0fe9.js";import"./bem-e4c3a2e6.js";import{K as r}from"./Span-d15a3ea1.js";import{n as d}from"./dev.utils-cb61837d.js";import{h as c,v as h}from"./color-1228dab7.js";import{v as m}from"./icons-a9c52ed8.js";import"./i18n-45224cc3.js";import"./browser-f629a56a.js";import"./tslib.es6-1173d062.js";import"./Icon-446dff9e.js";import"./markdown-f827f2ac.js";import"./InternalUnderlinedBadgeText-781ef373.js";import"./isArray-7a60fa7f.js";import"./isObject-ffcbbb76.js";const b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-badge {\n    display: inline-flex;\n    place-items: center;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge .kol-badge__smart-button .button {\n    color: inherit;\n  }\n}",p=b;e("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const f=class{constructor(t){n(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.id=d(),this.handleColorChange=n=>{const t=c(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_icons:{}}}renderSmartButton(n){return t(l,{class:"kol-badge__smart-button",_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_buttonVariant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return t("span",{key:"5887c57c800757a960919276d5422054b6d7c17f",class:s("kol-badge",{"kol-badge--has-smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton}),style:{backgroundColor:this.bgColorStr,color:this.colorStr}},t(r,{key:"d6650fca7447ba669d77f8c81cfbc70a67622b0b",class:"kol-badge__label",id:n?this.id:void 0,allowMarkdown:!0,icons:this.state._icons,label:this._label}),n&&this.renderSmartButton(this.state._smartButton))}validateIcons(n){m(this,n)}validateColor(n){h(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){o(n,(()=>{try{n=i(n)}catch(n){}a(this,"_smartButton",n)}))}componentWillLoad(){this.validateIcons(this._icons),this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}}};f.style={default:p};export{f as kol_badge};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolBadgeDefaultStyle0","featureHint","KolBadge","this","bgColorStr","colorStr","id","nonce","handleColorChange","value","colorPair","backgroundColor","foregroundColor","_color","_icons","renderSmartButton","props","h","KolButtonWcTag","class","_ariaControls","_customClass","_disabled","_hideLabel","_id","_label","_on","_tooltipAlign","_variant","render","hasSmartButton","state","_smartButton","key","clsx","style","color","KolSpanFc","undefined","allowMarkdown","icons","label","validateIcons","validateColor","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["src/components/badge/style.scss?tag=kol-badge&mode=default&encapsulation=shadow","src/components/badge/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-badge {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid rem(1);\n\t\tfont-size: rem(16);\n\n\t\t.kol-badge__smart-button {\n\t\t\t.button {\n\t\t\t\tcolor: inherit;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { KolSpanFc } from '../../functional-components';\n\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport clsx from 'clsx';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tprivate renderSmartButton(props: ButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass=\"kol-badge__smart-button\"\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t\t_variant={props._variant}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclass={clsx('kol-badge', {\n\t\t\t\t\t'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<KolSpanFc class=\"kol-badge__label\" id={hasSmartButton ? this.id : undefined} allowMarkdown icons={this.state._icons} label={this._label} />\n\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}\n\t\t\t</span>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_icons: {},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor as string;\n\t};\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: KoliBriIconsProp): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"mappings":";;;iqBAAA,MAAMA,EAAkB,4rLACxB,MAAAC,EAAeD,ECSfE,EAAY,uE,MASCC,EAAQ,M,yBACZC,KAAAC,WAAa,OACbD,KAAAE,SAAW,OACFF,KAAAG,GAAKC,IAmEdJ,KAAAK,kBAAqBC,IAC5B,MAAMC,EAAYF,EAAkBC,GACpCN,KAAKC,WAAaM,EAAUC,gBAC5BR,KAAKE,SAAWK,EAAUE,eAAyB,E,YA5BH,O,mFAiBZ,CACpCC,OAAQ,CACPF,gBAAiB,OACjBC,gBAAiB,QAElBE,OAAQ,G,CA9DD,iBAAAC,CAAkBC,GACzB,OACCC,EAACC,EAAc,CACdC,MAAM,0BACNC,cAAejB,KAAKG,GACpBe,aAAcL,EAAMK,aACpBC,UAAWN,EAAMM,UACjBC,WAAY,KACZT,OAAQE,EAAMF,OACdU,IAAKR,EAAMQ,IACXC,OAAQT,EAAMS,OACdC,IAAKV,EAAMU,IACXC,cAAeX,EAAMW,cACrBC,SAAUZ,EAAMY,U,CAKZ,MAAAC,GACN,MAAMC,SAAwB3B,KAAK4B,MAAMC,eAAiB,UAAY7B,KAAK4B,MAAMC,eAAiB,KAElG,OACCf,EAAA,QAAAgB,IAAA,2CACCd,MAAOe,EAAK,YAAa,CACxB,qCAAsC/B,KAAK4B,MAAMC,eAAiB,UAAY7B,KAAK4B,MAAMC,eAAiB,OAE3GG,MAAO,CACNxB,gBAAiBR,KAAKC,WACtBgC,MAAOjC,KAAKE,WAGbY,EAACoB,EAAS,CAAAJ,IAAA,2CAACd,MAAM,mBAAmBb,GAAIwB,EAAiB3B,KAAKG,GAAKgC,UAAWC,cAAa,KAACC,MAAOrC,KAAK4B,MAAMjB,OAAQ2B,MAAOtC,KAAKsB,SACjIK,GAAkB3B,KAAKY,kBAAkBZ,KAAK4B,MAAMC,c,CAwCjD,aAAAU,CAAcjC,GACpBiC,EAAcvC,KAAMM,E,CAId,aAAAkC,CAAclC,GACpBkC,EAAcxC,KAAMM,EAAO,CAC1BmC,aAAc,OACdC,MAAO,CACNC,YAAa3C,KAAKK,oB,CAMd,mBAAAuC,CAAoBtC,GAC1BuC,EAAoBvC,GAAO,KAC1B,IACCA,EAAQwC,EAAuBxC,E,CAE9B,MAAOyC,G,CAGTC,EAAShD,KAAM,eAAgBM,EAAM,G,CAIhC,iBAAA2C,GACNjD,KAAKuC,cAAcvC,KAAKW,QACxBX,KAAKwC,cAAcxC,KAAKU,QACxBV,KAAK4C,oBAAoB5C,KAAK6B,a","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolBadgeDefaultStyle0","featureHint","KolBadge","this","bgColorStr","colorStr","id","nonce","handleColorChange","value","colorPair","backgroundColor","foregroundColor","_color","_icons","renderSmartButton","props","h","KolButtonWcTag","class","_ariaControls","_customClass","_disabled","_hideLabel","_id","_label","_on","_tooltipAlign","_buttonVariant","_variant","render","hasSmartButton","state","_smartButton","key","clsx","style","color","KolSpanFc","undefined","allowMarkdown","icons","label","validateIcons","validateColor","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["src/components/badge/style.scss?tag=kol-badge&mode=default&encapsulation=shadow","src/components/badge/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-badge {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid rem(1);\n\n\t\t.kol-badge__smart-button {\n\t\t\t.button {\n\t\t\t\tcolor: inherit;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { KolSpanFc } from '../../functional-components';\n\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport clsx from 'clsx';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tprivate renderSmartButton(props: ButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass=\"kol-badge__smart-button\"\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t\t_buttonVariant={props._variant}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclass={clsx('kol-badge', {\n\t\t\t\t\t'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<KolSpanFc class=\"kol-badge__label\" id={hasSmartButton ? this.id : undefined} allowMarkdown icons={this.state._icons} label={this._label} />\n\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}\n\t\t\t</span>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_icons: {},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor as string;\n\t};\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: KoliBriIconsProp): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"mappings":";;;iqBAAA,MAAMA,EAAkB,s+KACxB,MAAAC,EAAeD,ECSfE,EAAY,uE,MASCC,EAAQ,M,yBACZC,KAAAC,WAAa,OACbD,KAAAE,SAAW,OACFF,KAAAG,GAAKC,IAmEdJ,KAAAK,kBAAqBC,IAC5B,MAAMC,EAAYF,EAAkBC,GACpCN,KAAKC,WAAaM,EAAUC,gBAC5BR,KAAKE,SAAWK,EAAUE,eAAyB,E,YA5BH,O,mFAiBZ,CACpCC,OAAQ,CACPF,gBAAiB,OACjBC,gBAAiB,QAElBE,OAAQ,G,CA9DD,iBAAAC,CAAkBC,GACzB,OACCC,EAACC,EAAc,CACdC,MAAM,0BACNC,cAAejB,KAAKG,GACpBe,aAAcL,EAAMK,aACpBC,UAAWN,EAAMM,UACjBC,WAAY,KACZT,OAAQE,EAAMF,OACdU,IAAKR,EAAMQ,IACXC,OAAQT,EAAMS,OACdC,IAAKV,EAAMU,IACXC,cAAeX,EAAMW,cACrBC,eAAgBZ,EAAMa,U,CAKlB,MAAAC,GACN,MAAMC,SAAwB5B,KAAK6B,MAAMC,eAAiB,UAAY9B,KAAK6B,MAAMC,eAAiB,KAElG,OACChB,EAAA,QAAAiB,IAAA,2CACCf,MAAOgB,EAAK,YAAa,CACxB,qCAAsChC,KAAK6B,MAAMC,eAAiB,UAAY9B,KAAK6B,MAAMC,eAAiB,OAE3GG,MAAO,CACNzB,gBAAiBR,KAAKC,WACtBiC,MAAOlC,KAAKE,WAGbY,EAACqB,EAAS,CAAAJ,IAAA,2CAACf,MAAM,mBAAmBb,GAAIyB,EAAiB5B,KAAKG,GAAKiC,UAAWC,cAAa,KAACC,MAAOtC,KAAK6B,MAAMlB,OAAQ4B,MAAOvC,KAAKsB,SACjIM,GAAkB5B,KAAKY,kBAAkBZ,KAAK6B,MAAMC,c,CAwCjD,aAAAU,CAAclC,GACpBkC,EAAcxC,KAAMM,E,CAId,aAAAmC,CAAcnC,GACpBmC,EAAczC,KAAMM,EAAO,CAC1BoC,aAAc,OACdC,MAAO,CACNC,YAAa5C,KAAKK,oB,CAMd,mBAAAwC,CAAoBvC,GAC1BwC,EAAoBxC,GAAO,KAC1B,IACCA,EAAQyC,EAAuBzC,E,CAE9B,MAAO0C,G,CAGTC,EAASjD,KAAM,eAAgBM,EAAM,G,CAIhC,iBAAA4C,GACNlD,KAAKwC,cAAcxC,KAAKW,QACxBX,KAAKyC,cAAczC,KAAKU,QACxBV,KAAK6C,oBAAoB7C,KAAK8B,a","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,F as t}from"./index-831675d2.js";import{x as i}from"./index-88dea7b1.js";import{r as o,a}from"./unique-nav-labels-de957b96.js";import{w as l}from"./validation-7cc70d5a.js";import{d as r,e as s}from"./component-names-799e91e2.js";import{v as d}from"./label-5982d241.js";const c="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-breadcrumb {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-breadcrumb__icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-breadcrumb__icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",b=c,h=class{constructor(i){n(this,i),this.renderLink=(n,i)=>{const o=this.state._links.length-1;return e("li",{class:"kol-breadcrumb__list-element",key:i},0!==i&&e(r,{class:"kol-breadcrumb__icon",_label:"",_icons:"codicon codicon-chevron-right"}),i===o?e("span",{class:"kol-breadcrumb__list-element-span"},n._hideLabel?e(r,{class:"kol-breadcrumb__icon",_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):e(t,null,n._label)):e(s,Object.assign({class:"kol-breadcrumb__link"},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e("nav",{key:"ec5c76bf09d3c9feaaf2e54dea8849f3df35f8cf",class:"kol-breadcrumb","aria-label":this.state._label},e("ul",{key:"58258d0d211e35b1c10ea81d57ce664b5b365da1",class:"kol-breadcrumb__list"},0===this.state._links.length&&e("li",{key:"380473fa2c97a40a8f36042a7859edc30a13dcea"},e(r,{key:"6f9289fa4d708da3b9bfbb7da105db05807dce39",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(n,e,t=!1){t||o(this.state._label),d(this,n,{required:!0}),i(n),a(this.state._label)}validateLinks(n){l("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){o(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};h.style={default:b};export{h as kol_breadcrumb};
+import{r as n,h as e,F as t}from"./index-1ed13705.js";import{y as i}from"./index-ebe5a881.js";import{r as o,a}from"./unique-nav-labels-e20db0b7.js";import{w as l}from"./validation-9d549145.js";import{e as s,f as r}from"./component-names-7924d82a.js";import{v as d}from"./label-bf9966d0.js";const c="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-breadcrumb__icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-breadcrumb__icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",h=c,b=class{constructor(i){n(this,i),this.renderLink=(n,i)=>{const o=this.state._links.length-1;return e("li",{class:"kol-breadcrumb__list-element",key:i},0!==i&&e(s,{class:"kol-breadcrumb__icon",_label:"",_icons:"codicon codicon-chevron-right"}),i===o?e("span",{class:"kol-breadcrumb__list-element-span"},n._hideLabel?e(s,{class:"kol-breadcrumb__icon",_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):e(t,null,n._label)):e(r,Object.assign({class:"kol-breadcrumb__link",_linkVariant:"standalone"},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e("nav",{key:"9b691f50f72dd131c580746baf66bc7275ad01f4",class:"kol-breadcrumb","aria-label":this.state._label},e("ul",{key:"9dcc08ba1193c7d38e811db071d1adacc14aa7bc",class:"kol-breadcrumb__list"},0===this.state._links.length&&e("li",{key:"e50c3fc24b34212a270c76fc94d2002f27a699a2"},e(s,{key:"e60c9653a31176ec54e2ce9016caf274ecf7a7bc",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(n,e,t=!1){t||o(this.state._label),d(this,n,{required:!0}),i(n),a(this.state._label)}validateLinks(n){l("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){o(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};b.style={default:h};export{b as kol_breadcrumb};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolBreadcrumbDefaultStyle0","KolBreadcrumb","this","renderLink","link","index","lastIndex","state","_links","length","h","class","key","KolIconTag","_label","_icons","_hideLabel","Fragment","KolLinkWcTag","Object","assign","render","map","validateLabel","value","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/breadcrumb/style.scss?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../@shared/kol-link-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-link-styles('kol-link');\n\n@layer kol-component {\n\t.kol-breadcrumb {\n\t\tfont-size: rem(16);\n\n\t\t&__list,\n\t\t&__list-element {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t\tdisplay: flex;\n\t\t\tgap: 0.5em;\n\t\t\tflex-wrap: wrap;\n\t\t\tplace-items: center;\n\t\t}\n\n\t\t&__icon {\n\t\t\t&::part(separator) {\n\t\t\t\tfont-weight: 900;\n\t\t\t\tfont-size: 0.7em;\n\t\t\t}\n\n\t\t\t&::part(separator):before {\n\t\t\t\tcontent: '\\f054';\n\t\t\t\tfont-family: 'Font Awesome 6 Free';\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { BreadcrumbAPI, BreadcrumbLinkProps, BreadcrumbStates, LabelPropType, LinkProps, Stringified } from '../../schema';\nimport { a11yHintLabelingLandmarks, validateLabel } from '../../schema';\nimport { Component, Fragment, h, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolIconTag, KolLinkWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements BreadcrumbAPI {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<li class=\"kol-breadcrumb__list-element\" key={index}>\n\t\t\t\t{index !== 0 && <KolIconTag class=\"kol-breadcrumb__icon\" _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span class=\"kol-breadcrumb__list-element-span\">\n\t\t\t\t\t\t{link._hideLabel ? (\n\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\tclass=\"kol-breadcrumb__icon\"\n\t\t\t\t\t\t\t\t_label={link._label}\n\t\t\t\t\t\t\t\t_icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>{link._label}</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<KolLinkWcTag class=\"kol-breadcrumb__link\" {...link}></KolLinkWcTag>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-breadcrumb\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-breadcrumb__list\">\n\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<KolIconTag class=\"kol-breadcrumb_icon\" _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: BreadcrumbStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;kSAAA,MAAMA,EAAkB,++MACxB,MAAAC,EAAeD,E,MCgBFE,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,MAAM,+BAA+BC,IAAKP,GAC5CA,IAAU,GAAKK,EAACG,EAAU,CAACF,MAAM,uBAAuBG,OAAO,GAAGC,OAAO,kCACzEV,IAAUC,EACVI,EAAA,QAAMC,MAAM,qCACVP,EAAKY,WACLN,EAACG,EAAU,CACVF,MAAM,uBACNG,OAAQV,EAAKU,OACbC,cAAeX,EAAKW,SAAW,SAAWX,EAAKW,OAAS,iCAGzDL,EAAAO,EAAA,KAAGb,EAAKU,SAIVJ,EAACQ,EAAYC,OAAAC,OAAA,CAACT,MAAM,wBAA2BP,IAE5C,E,uDA6BmC,CACzCU,OAAQ,GACRN,OAAQ,G,CA3BF,MAAAa,GACN,OACCX,EAAA,OAAAE,IAAA,2CAAKD,MAAM,iBAAgB,aAAaT,KAAKK,MAAMO,QAClDJ,EAAA,MAAAE,IAAA,2CAAID,MAAM,wBACRT,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,MAAAE,IAAA,4CACCF,EAACG,EAAU,CAAAD,IAAA,2CAACD,MAAM,sBAAsBG,OAAO,GAAGC,OAAO,yBAAyB,KAGnFb,KAAKK,MAAMC,OAAOc,IAAIpB,KAAKC,a,CAsBzB,aAAAoB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAezB,KAAKK,MAAMO,O,CAE3BS,EAAcrB,KAAMsB,EAAO,CAC1BI,SAAU,OAEXC,EAA0BL,GAC1BM,EAAY5B,KAAKK,MAAMO,O,CAIjB,aAAAiB,CAAcP,GACpBQ,EAAc,gBAAiB9B,KAAMsB,E,CAG/B,iBAAAS,GACN/B,KAAKqB,cAAcrB,KAAKY,OAAQoB,UAAW,MAC3ChC,KAAK6B,cAAc7B,KAAKM,O,CAGlB,oBAAA2B,GACNR,EAAezB,KAAKK,MAAMO,O","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolBreadcrumbDefaultStyle0","KolBreadcrumb","this","renderLink","link","index","lastIndex","state","_links","length","h","class","key","KolIconTag","_label","_icons","_hideLabel","Fragment","KolLinkWcTag","Object","assign","_linkVariant","render","map","validateLabel","value","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/breadcrumb/style.scss?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../@shared/kol-link-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-link-styles('kol-link');\n\n@layer kol-component {\n\t.kol-breadcrumb {\n\t\t&__list,\n\t\t&__list-element {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t\tdisplay: flex;\n\t\t\tgap: 0.5em;\n\t\t\tflex-wrap: wrap;\n\t\t\tplace-items: center;\n\t\t}\n\n\t\t&__icon {\n\t\t\t&::part(separator) {\n\t\t\t\tfont-weight: 900;\n\t\t\t\tfont-size: 0.7em;\n\t\t\t}\n\n\t\t\t&::part(separator):before {\n\t\t\t\tcontent: '\\f054';\n\t\t\t\tfont-family: 'Font Awesome 6 Free';\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { BreadcrumbAPI, BreadcrumbLinkProps, BreadcrumbStates, LabelPropType, LinkProps, Stringified } from '../../schema';\nimport { a11yHintLabelingLandmarks, validateLabel } from '../../schema';\nimport { Component, Fragment, h, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolIconTag, KolLinkWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements BreadcrumbAPI {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<li class=\"kol-breadcrumb__list-element\" key={index}>\n\t\t\t\t{index !== 0 && <KolIconTag class=\"kol-breadcrumb__icon\" _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span class=\"kol-breadcrumb__list-element-span\">\n\t\t\t\t\t\t{link._hideLabel ? (\n\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\tclass=\"kol-breadcrumb__icon\"\n\t\t\t\t\t\t\t\t_label={link._label}\n\t\t\t\t\t\t\t\t_icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>{link._label}</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<KolLinkWcTag class=\"kol-breadcrumb__link\" _linkVariant=\"standalone\" {...link}></KolLinkWcTag>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-breadcrumb\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-breadcrumb__list\">\n\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<KolIconTag class=\"kol-breadcrumb_icon\" _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: BreadcrumbStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;kSAAA,MAAMA,EAAkB,2yMACxB,MAAAC,EAAeD,E,MCgBFE,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,MAAM,+BAA+BC,IAAKP,GAC5CA,IAAU,GAAKK,EAACG,EAAU,CAACF,MAAM,uBAAuBG,OAAO,GAAGC,OAAO,kCACzEV,IAAUC,EACVI,EAAA,QAAMC,MAAM,qCACVP,EAAKY,WACLN,EAACG,EAAU,CACVF,MAAM,uBACNG,OAAQV,EAAKU,OACbC,cAAeX,EAAKW,SAAW,SAAWX,EAAKW,OAAS,iCAGzDL,EAAAO,EAAA,KAAGb,EAAKU,SAIVJ,EAACQ,EAAYC,OAAAC,OAAA,CAACT,MAAM,uBAAuBU,aAAa,cAAiBjB,IAEtE,E,uDA6BmC,CACzCU,OAAQ,GACRN,OAAQ,G,CA3BF,MAAAc,GACN,OACCZ,EAAA,OAAAE,IAAA,2CAAKD,MAAM,iBAAgB,aAAaT,KAAKK,MAAMO,QAClDJ,EAAA,MAAAE,IAAA,2CAAID,MAAM,wBACRT,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,MAAAE,IAAA,4CACCF,EAACG,EAAU,CAAAD,IAAA,2CAACD,MAAM,sBAAsBG,OAAO,GAAGC,OAAO,yBAAyB,KAGnFb,KAAKK,MAAMC,OAAOe,IAAIrB,KAAKC,a,CAsBzB,aAAAqB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAe1B,KAAKK,MAAMO,O,CAE3BU,EAActB,KAAMuB,EAAO,CAC1BI,SAAU,OAEXC,EAA0BL,GAC1BM,EAAY7B,KAAKK,MAAMO,O,CAIjB,aAAAkB,CAAcP,GACpBQ,EAAc,gBAAiB/B,KAAMuB,E,CAG/B,iBAAAS,GACNhC,KAAKsB,cAActB,KAAKY,OAAQqB,UAAW,MAC3CjC,KAAK8B,cAAc9B,KAAKM,O,CAGlB,oBAAA4B,GACNR,EAAe1B,KAAKK,MAAMO,O","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-831675d2.js";import{a as t}from"./component-names-799e91e2.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-button__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-button__icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}",o=i,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"32a9e9a2d22219a957475781afe918d333ec4cf1",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:"link",_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},e("slot",{key:"cb0d62cc16d967e7c43dad73bd8292c3f65edcb1",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:o};export{a as kol_button_link};
+import{r as n,h as e}from"./index-1ed13705.js";import{b as t}from"./component-names-7924d82a.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-button--standalone {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .kol-button__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-button__icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}",o=i,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._variant="inline",this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"0e94fbffd57b2573adc5d340c2adb282402ebb81",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_linkVariant:this._variant,_name:this._name,_on:this._on,_role:"link",_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},e("slot",{key:"88da41760d6af22629adf4a8b02a5bfd935f2567",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:o};export{a as kol_button_link};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonLinkDefaultStyle0","KolButtonLink","this","catchRef","ref","buttonWcRef","getValue","_value","kolFocus","_a","render","h","KolButtonWcTag","key","_accessKey","_ariaControls","_ariaDescription","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_id","_label","_name","_on","_role","_shortKey","_syncValueBySelector","_tooltipAlign","_type","name","slot"],"sources":["src/components/button-link/style.scss?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../@shared/kol-link-mixin' as *;\n\n@include kol-link-styles('kol-button');\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonLinkProps,\n\tButtonTypePropType,\n\tFocusableElement,\n\tIconsPropType,\n\tIdPropType,\n\tLabelWithExpertSlotPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolButtonLink implements ButtonLinkProps, FocusableElement {\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.catchRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_role=\"link\"\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t * @TODO: Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,29LACxB,MAAAC,EAAeD,E,MC6BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BF,KAAKG,YAAcD,CAAG,E,gKAyEc,M,gBAOC,M,4MA8CgB,M,WAKV,S,sBA9HrC,cAAME,GACZ,OAAOJ,KAAKK,M,CAIN,cAAMC,G,aACNC,EAAAP,KAAKG,eAAW,MAAAI,SAAA,SAAAA,EAAED,W,CAGlB,MAAAE,GACN,OACCC,EAACC,EAAc,CAAAC,IAAA,2CACdT,IAAKF,KAAKC,SACVW,WAAYZ,KAAKY,WACjBC,cAAeb,KAAKa,cACpBC,iBAAkBd,KAAKc,iBACvBC,cAAef,KAAKe,cACpBC,cAAehB,KAAKgB,cACpBC,UAAWjB,KAAKiB,UAChBC,OAAQlB,KAAKkB,OACbC,WAAYnB,KAAKmB,WACjBC,IAAKpB,KAAKoB,IACVC,OAAQrB,KAAKqB,OACbC,MAAOtB,KAAKsB,MACZC,IAAKvB,KAAKuB,IACVC,MAAM,OACNC,UAAWzB,KAAKyB,UAChBC,qBAAsB1B,KAAK0B,qBAC3BC,cAAe3B,KAAK2B,cACpBC,MAAO5B,KAAK4B,MACZvB,OAAQL,KAAKK,QAEbI,EAAA,QAAAE,IAAA,2CAAMkB,KAAK,SAASC,KAAK,W","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolButtonLinkDefaultStyle0","KolButtonLink","this","catchRef","ref","buttonWcRef","getValue","_value","kolFocus","_a","render","h","KolButtonWcTag","key","_accessKey","_ariaControls","_ariaDescription","_ariaExpanded","_ariaSelected","_disabled","_hideLabel","_icons","_id","_label","_linkVariant","_variant","_name","_on","_role","_shortKey","_syncValueBySelector","_tooltipAlign","_type","name","slot"],"sources":["src/components/button-link/style.scss?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../@shared/kol-link-mixin' as *;\n\n@include kol-link-styles('kol-button');\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonLinkProps,\n\tButtonTypePropType,\n\tFocusableElement,\n\tIconsPropType,\n\tIdPropType,\n\tLabelWithExpertSlotPropType,\n\tLinkVariantPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolButtonLink implements ButtonLinkProps, FocusableElement {\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.catchRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_linkVariant={this._variant}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_role=\"link\"\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t * @TODO: Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: LinkVariantPropType = 'inline';\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,o3LACxB,MAAAC,EAAeD,E,MC8BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BF,KAAKG,YAAcD,CAAG,E,gKA0Ec,M,gBAOC,M,6EAoBU,S,6IA+BM,M,WAKV,S,sBApIrC,cAAME,GACZ,OAAOJ,KAAKK,M,CAIN,cAAMC,G,aACNC,EAAAP,KAAKG,eAAW,MAAAI,SAAA,SAAAA,EAAED,W,CAGlB,MAAAE,GACN,OACCC,EAACC,EAAc,CAAAC,IAAA,2CACdT,IAAKF,KAAKC,SACVW,WAAYZ,KAAKY,WACjBC,cAAeb,KAAKa,cACpBC,iBAAkBd,KAAKc,iBACvBC,cAAef,KAAKe,cACpBC,cAAehB,KAAKgB,cACpBC,UAAWjB,KAAKiB,UAChBC,WAAYlB,KAAKkB,WACjBC,OAAQnB,KAAKmB,OACbC,IAAKpB,KAAKoB,IACVC,OAAQrB,KAAKqB,OACbC,aAActB,KAAKuB,SACnBC,MAAOxB,KAAKwB,MACZC,IAAKzB,KAAKyB,IACVC,MAAM,OACNC,UAAW3B,KAAK2B,UAChBC,qBAAsB5B,KAAK4B,qBAC3BC,cAAe7B,KAAK6B,cACpBC,MAAO9B,KAAK8B,MACZzB,OAAQL,KAAKK,QAEbI,EAAA,QAAAE,IAAA,2CAAMoB,KAAK,SAASC,KAAK,W","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as s,g as a}from"./index-831675d2.js";import{A as e,h as o,w as d,O as h,P as l,I as n,k as r,l as c}from"./index-88dea7b1.js";import{d as f,K as b}from"./events-5886c68b.js";import{n as v}from"./dev.utils-f7f473b7.js";import{p as u,a as p}from"./controller-4227bd3b.js";import{A as m}from"./associated.controller-4efb16f5.js";import{f as _}from"./component-names-799e91e2.js";import{v as y,a as j,b as k,c as x}from"./access-and-short-key-753466cb.js";import{c as g}from"./clsx-09a06a12.js";import"./i18n-01abf777.js";import"./bem-e4c3a2e6.js";import{K as A}from"./Span-c9064f6e.js";import{v as S,a as C,b as I,c as T}from"./button-variant-d6a980cf.js";import{v as w}from"./custom-class-30e531d5.js";import{v as K}from"./disabled-e64a9155.js";import{v as B}from"./hide-label-418cc5c0.js";import{v as D}from"./icons-acf365fd.js";import{a as L}from"./label-5982d241.js";import{v as V}from"./tooltip-align-4c18152e.js";import"./bootstrap-874afb5b.js";import"./i18n-45224cc3.js";import"./browser-f629a56a.js";import"./tslib.es6-1173d062.js";import"./Icon-23e91462.js";import"./markdown-f827f2ac.js";import"./InternalUnderlinedBadgeText-d345205c.js";import"./isArray-7a60fa7f.js";import"./isObject-ffcbbb76.js";import"./align-a05c3d17.js";const E=(t,a)=>{e(t,"_ariaControls",a)},O=(t,a)=>{o(t,"_ariaSelected",a)},H=(t,a)=>{d(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},M=["button","reset","submit"],N=(t,a)=>{d(t,"_type",(t=>"string"==typeof t&&M.includes(t)),new Set([`KoliBriButtonType {${M.join(", ")}`]),a)},P=class{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){var a,s;const e=c(this.state._label),o=Boolean(null===(s=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===s?void 0:s.length),d=this.state._accessKey||this.state._shortKey;return t(i,{key:"d94296c447c53cca42b7528040a6e133f984e5ee"},t("button",{key:"06b70077d51672e90774f8342e383007252bafd4",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":o?this.internalDescriptionById:void 0,"aria-expanded":h(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":l(this.state._ariaSelected),class:g("kol-button",{"kol-button--disabled":!0===this.state._disabled,[`kol-button--${this.state._variant}`]:"custom"!==this.state._variant,"kol-button--hide-label":!0===this.state._hideLabel,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}),disabled:this.state._disabled,id:this.state._id,name:this.state._name,onClick:this.onClick,onMouseDown:this.onMouseDown,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type},t(A,{key:"730ec14988b2731caafdf350485e3da7164eb9a2",class:"kol-button__text",badgeText:d,icons:this.state._icons,hideLabel:this.state._hideLabel,label:e?"":this.state._label},t("slot",{key:"d4340b53b690ec8cbc8b0a7cafcbe614352432a0",name:"expert",slot:"expert"}))),t(_,{key:"b18fdaa2da5d12cab05f514ef719f7a08a2da0c8","aria-hidden":"true",hidden:e||!this.state._hideLabel,class:"kol-button__tooltip",_badgeText:d,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),o&&t("span",{key:"8ff3b675471a480a6a5cdb940cb79739af92e13d",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(t){s(this,t),this.internalDescriptionById=v(),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var a,i;"submit"===this.state._type?u({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?p({form:this.host,ref:this.buttonRef}):(this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(n(t,this.buttonRef),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value))),this.host&&f(this.host,b.click,this.state._value)},this.onMouseDown=t=>{var a,i,s;null===(s=null===(i=null===(a=this.state)||void 0===a?void 0:a._on)||void 0===i?void 0:i.onMouseDown)||void 0===s||s.call(i,t),this.host&&f(this.host,b.mousedown)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaHasPopup=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new m(this,"button",this.host)}validateAccessKey(t){y(this,t),j(t,this._shortKey)}validateAriaControls(t){E(this,t)}validateAriaDescription(t){S(this,t)}validateAriaExpanded(t){C(this,t)}validateAriaSelected(t){O(this,t)}validateCustomClass(t){w(this,t)}validateDisabled(t){K(this,t)}validateHideLabel(t){B(this,t)}validateIcons(t){D(this,t)}validateId(t){e(this,"_id",t)}validateLabel(t){L(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){H(this,t)}validateRole(t){I(this,t)}validateShortKey(t){k(this,t),j(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){x(this,t)}validateTooltipAlign(t){V(this,t)}validateType(t){N(this,t)}validateValue(t){r(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){T(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant),j(this._accessKey,this._shortKey)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};export{P as kol_button_wc};
+import{h as t,H as i,r as s,g as a}from"./index-1ed13705.js";import{B as e,i as o,w as d,O as n,P as h,I as l,l as r,m as c}from"./index-ebe5a881.js";import{d as f,K as v}from"./events-bad0a075.js";import{n as u}from"./dev.utils-cb61837d.js";import{p as b,a as p}from"./controller-91a4c3ba.js";import{A as m}from"./associated.controller-92af2554.js";import{a as _}from"./component-names-7924d82a.js";import{v as y,a as j,b as k,c as x}from"./access-and-short-key-f743a5c4.js";import{c as g}from"./clsx-09a06a12.js";import"./i18n-260f0fe9.js";import"./bem-e4c3a2e6.js";import{K as A}from"./Span-d15a3ea1.js";import{v as S,a as C,b as T,c as V,d as B}from"./link-variant-47605ebe.js";import{v as I}from"./custom-class-d73b81b1.js";import{v as w}from"./disabled-e1038f54.js";import{v as K}from"./hide-label-8b3a8709.js";import{v as L}from"./icons-a9c52ed8.js";import{a as D}from"./label-bf9966d0.js";import{v as E}from"./tooltip-align-465a8590.js";import"./bootstrap-93c7a706.js";import"./i18n-45224cc3.js";import"./browser-f629a56a.js";import"./tslib.es6-1173d062.js";import"./Icon-446dff9e.js";import"./markdown-f827f2ac.js";import"./InternalUnderlinedBadgeText-781ef373.js";import"./isArray-7a60fa7f.js";import"./isObject-ffcbbb76.js";import"./align-d2572387.js";const O=(t,a)=>{e(t,"_ariaControls",a)},H=(t,a)=>{o(t,"_ariaSelected",a)},$=(t,a)=>{d(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},M=["button","reset","submit"],N=(t,a)=>{d(t,"_type",(t=>"string"==typeof t&&M.includes(t)),new Set([`KoliBriButtonType {${M.join(", ")}`]),a)},P=class{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}async hideTooltip(){var t;null===(t=this.tooltipRef)||void 0===t||t.hideTooltip()}render(){var a,s;const e=c(this.state._label),o=Boolean(null===(s=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===s?void 0:s.length),l=this.state._accessKey||this.state._shortKey;return t(i,{key:"71641733bd8ba48dfd72bac7a0a07c273db013bc"},t("button",{key:"7407fd5674005c5550e8654b1a6f7a43796f1859",ref:t=>this.buttonRef=t,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":o?this.internalDescriptionById:void 0,"aria-expanded":n(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":h(this.state._ariaSelected),class:g("kol-button",{"kol-button--disabled":!0===this.state._disabled,[`kol-button--${this.state._buttonVariant}`]:"custom"!==this.state._buttonVariant,[`kol-button--${this.state._linkVariant}`]:this.state._linkVariant,"kol-button--hide-label":!0===this.state._hideLabel,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}),disabled:this.state._disabled,id:this.state._id,name:this.state._name,onClick:this.onClick,onMouseDown:this.onMouseDown,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type},t(A,{key:"24ed20138e32faf6dec0d14af16d5d59f614ca39",class:"kol-button__text",badgeText:l,icons:this.state._icons,hideLabel:this.state._hideLabel,label:e?"":this.state._label},t("slot",{key:"a226a7be8ef75dab02e8e111689df45b99cdbf38",name:"expert",slot:"expert"}))),t(_,{key:"4db92711d4a22180be5396921ef8773ed719f7e3",ref:t=>this.tooltipRef=t,"aria-hidden":"true",hidden:e||!this.state._hideLabel,class:"kol-button__tooltip",_badgeText:l,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),o&&t("span",{key:"f242311185e07dda62b486e4fff26dd7a5807a97",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(t){s(this,t),this.internalDescriptionById=u(),this.onClick=t=>{var a,i;"submit"===this.state._type?b({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?p({form:this.host,ref:this.buttonRef}):(this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(l(t,this.buttonRef),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value))),this.host&&f(this.host,v.click,this.state._value)},this.onMouseDown=t=>{var a,i,s;null===(s=null===(i=null===(a=this.state)||void 0===a?void 0:a._on)||void 0===i?void 0:i.onMouseDown)||void 0===s||s.call(i,t),this.host&&f(this.host,v.mousedown)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaHasPopup=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._linkVariant=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._buttonVariant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_buttonVariant:"normal"},this.controller=new m(this,"button",this.host)}validateAccessKey(t){y(this,t),j(t,this._shortKey)}validateAriaControls(t){O(this,t)}validateAriaDescription(t){S(this,t)}validateAriaExpanded(t){C(this,t)}validateAriaSelected(t){H(this,t)}validateCustomClass(t){I(this,t)}validateDisabled(t){w(this,t)}validateHideLabel(t){K(this,t)}validateIcons(t){L(this,t)}validateId(t){e(this,"_id",t)}validateLabel(t){D(this,t,{required:!0})}validateLinkVariant(t){T(this,t)}validateName(t){this.controller.validateName(t)}validateOn(t){$(this,t)}validateRole(t){V(this,t)}validateShortKey(t){k(this,t),j(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){x(this,t)}validateTooltipAlign(t){E(this,t)}validateType(t){N(this,t)}validateValue(t){r(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateButtonVariant(t){B(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateLinkVariant(this._linkVariant),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateButtonVariant(this._buttonVariant),j(this._accessKey,this._shortKey)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_linkVariant:["validateLinkVariant"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_buttonVariant:["validateButtonVariant"]}}};export{P as kol_button_wc};