@public-ui/components 1.7.2 → 2.0.0-rc.0

package/dist/components/kol-abbr.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{n as nonce}from"./prop.validators.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>abbr{cursor:help}",KolAbbr$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this._label=void 0,this._tooltipAlign="top",this._title=void 0,this.state={_label:"…",_tooltipAlign:"top"}}render(){return h(Host,null,h("abbr",{"aria-labelledby":this.nonce,role:"definition",tabindex:"0",title:this.state._label},h("span",{title:""},h("slot",null))),h("kol-tooltip-wc",{_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label}))}validateLabel(t){validateLabel(this,t)}validateTitle(t){this.validateLabel(t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}componentWillLoad(){this.validateLabel(this._label||this._title),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_label:["validateLabel"],_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-abbr",{_label:[1],_tooltipAlign:[1,"_tooltip-align"],_title:[1],state:[32]},void 0,{_label:["validateLabel"],_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-abbr","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-abbr":customElements.get(t)||customElements.define(t,KolAbbr$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolAbbr=KolAbbr$1,defineCustomElement=defineCustomElement$1;export{KolAbbr,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{n as nonce}from"./prop.validators.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>abbr{cursor:help}",KolAbbr$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this._label=void 0,this._tooltipAlign="top",this.state={_label:"…",_tooltipAlign:"top"}}render(){return h(Host,null,h("abbr",{"aria-labelledby":this.nonce,role:"definition",tabindex:"0",title:this.state._label},h("span",{title:""},h("slot",null))),h("kol-tooltip-wc",{_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label}))}validateLabel(t){validateLabel(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}componentWillLoad(){this.validateLabel(this._label),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_label:["validateLabel"],_tooltipAlign:["validateTooltipAlign"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-abbr",{_label:[1],_tooltipAlign:[1,"_tooltip-align"],state:[32]},void 0,{_label:["validateLabel"],_tooltipAlign:["validateTooltipAlign"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-abbr","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-abbr":customElements.get(t)||customElements.define(t,KolAbbr$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolAbbr=KolAbbr$1,defineCustomElement=defineCustomElement$1;export{KolAbbr,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-abbr.js","mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,iuBAAiuB;;MCiB5uBA,SAAO;;;;;IACF,UAAK,GAAG,KAAK,EAAE,CAAC;;yBAwBqB,KAAK;;iBAc3B;MAC/B,MAAM,EAAE,GAAG;MACX,aAAa,EAAE,KAAK;KACpB;;EAvCM,MAAM;IACZ,QACC,EAAC,IAAI,QAEJ,+BAAuB,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IACzF,YAAM,KAAK,EAAC,EAAE,IACb,eAAQ,CACF,CACD,EACP,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,CACzG,EACN;GACF;EAsCM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAc;IAClC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,oBAAoB,CAAC,KAA4B;IACvD,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAClC;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAbbr"],"sources":["src/components/abbr/style.css?tag=kol-abbr&mode=default&encapsulation=shadow","src/components/abbr/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host > abbr {\n\tcursor: help;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { TooltipAlignPropType, validateTooltipAlign } from '../../types/props/tooltip-align';\nimport { nonce } from '../../utils/dev.utils';\nimport { API, States } from './types';\n\n/**\n * @slot - Der Begriff, der erläutert werden soll.\n */\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" tabindex=\"0\" title={this.state._label}>\n\t\t\t\t\t<span title=\"\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t</abbr>\n\t\t\t\t<kol-tooltip-wc _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._label}></kol-tooltip-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines 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 * Deprecated: Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _title?: string;\n\n\t/**\n\t * Die State-Parameter repräsentieren den inneren State\n\t * einer Komponente.\n\t *\n\t * @see: https://stenciljs.com/docs/state\n\t */\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_tooltipAlign: 'top',\n\t};\n\n\t/**\n\t * Die Watch-Methoden dienen der Möglichkeit zur\n\t * Validierung der Werte eines Properties und\n\t * dem Mapping dessen auf einen anderen internen\n\t * State-Typ.\n\t *\n\t * @see: https://stenciljs.com/docs/properties#prop-validation\n\t */\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_title')\n\tpublic validateTitle(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._title);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"version":3}
+{"file":"kol-abbr.js","mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,iuBAAiuB;;MCiB5uBA,SAAO;;;;;IACF,UAAK,GAAG,KAAK,EAAE,CAAC;;yBAwBqB,KAAK;iBAQ3B;MAC/B,MAAM,EAAE,GAAG;MACX,aAAa,EAAE,KAAK;KACpB;;EAjCM,MAAM;IACZ,QACC,EAAC,IAAI,QAEJ,+BAAuB,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IACzF,YAAM,KAAK,EAAC,EAAE,IACb,eAAQ,CACF,CACD,EACP,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,CACzG,EACN;GACF;EAgCM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,oBAAoB,CAAC,KAA4B;IACvD,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAClC;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAbbr"],"sources":["src/components/abbr/style.css?tag=kol-abbr&mode=default&encapsulation=shadow","src/components/abbr/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host > abbr {\n\tcursor: help;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { TooltipAlignPropType, validateTooltipAlign } from '../../types/props/tooltip-align';\nimport { nonce } from '../../utils/dev.utils';\nimport { API, States } from './types';\n\n/**\n * @slot - Der Begriff, der erläutert werden soll.\n */\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" tabindex=\"0\" title={this.state._label}>\n\t\t\t\t\t<span title=\"\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t</abbr>\n\t\t\t\t<kol-tooltip-wc _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._label}></kol-tooltip-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines 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 * Die State-Parameter repräsentieren den inneren State\n\t * einer Komponente.\n\t *\n\t * @see: https://stenciljs.com/docs/state\n\t */\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_tooltipAlign: 'top',\n\t};\n\n\t/**\n\t * Die Watch-Methoden dienen der Möglichkeit zur\n\t * Validierung der Werte eines Properties und\n\t * dem Mapping dessen auf einen anderen internen\n\t * State-Typ.\n\t *\n\t * @see: https://stenciljs.com/docs/properties#prop-validation\n\t */\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"version":3}

package/dist/components/kol-accordion.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";import{q as featureHint,n as nonce,t as setState}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.wrapper{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows 0.3s}.accordion.open .wrapper{grid-template-rows:1fr}.animation-wrapper{min-height:0;transition:visibility 0.3s;visibility:hidden}.accordion.open .animation-wrapper{visibility:visible}@media (prefers-reduced-motion){.animation-wrapper,.wrapper{transition-duration:0s}}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}";featureHint("[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"),featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this.onClick=e=>{this._open=!this._open,setTimeout((()=>{var t;"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&this.state._on.onClick(e,!0===this._open)}))},this._heading=void 0,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"…",_level:1}}render(){return h(Host,null,h("div",{class:{accordion:!0,open:!0===this.state._open}},h("kol-heading-wc",{_label:"",_level:this.state._level},h("kol-button-wc",{_ariaControls:this.nonce,_ariaExpanded:this.state._open,_icons:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._label,_on:{onClick:this.onClick}})),h("div",{class:"header"},h("slot",{name:"header"})),h("div",{class:"wrapper"},h("div",{class:"animation-wrapper"},h("div",{"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},h("slot",{name:"content"})," ",h("slot",null))))))}validateHeading(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&setState(this,"_on",e)}validateOpen(e){validateOpen(this,e)}componentWillLoad(){this.validateLabel(this._label||this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-accordion",{_heading:[1],_label:[1],_level:[2],_on:[16],_open:[1540],state:[32]},void 0,{_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-accordion","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-accordion":customElements.get(e)||customElements.define(e,KolAccordion$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolAccordion=KolAccordion$1,defineCustomElement=defineCustomElement$1;export{KolAccordion,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";import{q as featureHint,n as nonce,t as setState}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.wrapper{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows 0.3s}.accordion.open .wrapper{grid-template-rows:1fr}.animation-wrapper{min-height:0;transition:visibility 0.3s;visibility:hidden}.accordion.open .animation-wrapper{visibility:visible}@media (prefers-reduced-motion){.animation-wrapper,.wrapper{transition-duration:0s}}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}";featureHint("[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"),featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this.onClick=e=>{this._open=!this._open,setTimeout((()=>{var t;"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&this.state._on.onClick(e,!0===this._open)}))},this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"…",_level:1}}render(){return h(Host,null,h("div",{class:{accordion:!0,open:!0===this.state._open}},h("kol-heading-wc",{_label:"",_level:this.state._level},h("kol-button-wc",{_ariaControls:this.nonce,_ariaExpanded:this.state._open,_icons:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._label,_on:{onClick:this.onClick}})),h("div",{class:"wrapper"},h("div",{class:"animation-wrapper"},h("div",{"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},h("slot",null))))))}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&setState(this,"_on",e)}validateOpen(e){validateOpen(this,e)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-accordion",{_label:[1],_level:[2],_on:[16],_open:[1540],state:[32]},void 0,{_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-accordion","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-accordion":customElements.get(e)||customElements.define(e,KolAccordion$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolAccordion=KolAccordion$1,defineCustomElement=defineCustomElement$1;export{KolAccordion,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-accordion.js","mappings":"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","names":["KolAccordion"],"sources":["src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","src/components/accordion/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n.wrapper {\n\tdisplay: grid;\n\tgrid-template-rows: 0fr;\n\toverflow: hidden;\n\ttransition: grid-template-rows 0.3s;\n}\n.accordion.open .wrapper {\n\tgrid-template-rows: 1fr;\n}\n.animation-wrapper {\n\tmin-height: 0;\n\ttransition: visibility 0.3s;\n\t/* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n\tvisibility: hidden;\n}\n.accordion.open .animation-wrapper {\n\tvisibility: visible;\n}\n@media (prefers-reduced-motion) {\n\t.animation-wrapper,\n\t.wrapper {\n\t\ttransition-duration: 0s;\n\t}\n} /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\tjustify-items: start;\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { OpenPropType, validateOpen } from '../../types/props/open';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriAccordionCallbacks, States } from './types';\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 * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n */\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-heading-wc _label=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icons={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}\n\t\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"wrapper\">\n\t\t\t\t\t\t<div class=\"animation-wrapper\">\n\t\t\t\t\t\t\t<div aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" id={this.nonce}>\n\t\t\t\t\t\t\t\t<slot name=\"content\"></slot> {/* Deprecated for version 2 */}\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _heading?: 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\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen an.\n\t */\n\t@Prop() public _on?: KoliBriAccordionCallbacks;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\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: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(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\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\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.validateLabel(this._label || this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tprivate onClick = (event: Event) => {\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\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"version":3}
+{"file":"kol-accordion.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,opCAAopC;;ACa5qC,WAAW,CAAC;;;;yCAI6B,CAAC,CAAC;AAC3C,WAAW,CAAC,iEAAiE,CAAC,CAAC;MAalEA,cAAY;;;;;IACP,UAAK,GAAG,KAAK,EAAE,CAAC;IAwFzB,YAAO,GAAG,CAAC,KAAY;MAC9B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;MAQzB,UAAU,CAAC;;QACV,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;UAClD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC;SACnD;OACD,CAAC,CAAC;KACH,CAAC;;kBA7DqC,CAAC;;iBAWyB,KAAK;iBAEtC;MAC/B,MAAM,EAAE,GAAG;MACX,MAAM,EAAE,CAAC;KACT;;EAvDM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,WACC,KAAK,EAAE;QACN,SAAS,EAAE,IAAI;QACf,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI;OAC/B,IAED,sBAAgB,MAAM,EAAC,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAClD,qBAEC,aAAa,EAAE,IAAI,CAAC,KAAK,EACzB,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAC/B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,wBAAwB,GAAG,qBAAqB,EAC3E,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GACd,CACD,EACjB,WAAK,KAAK,EAAC,SAAS,IACnB,WAAK,KAAK,EAAC,mBAAmB,IAC7B,0BAAkB,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,EAAE,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,KAAK,IAChG,eAAQ,CACH,CACD,CACD,CACD,CACA,EACN;GACF;EA6BM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,UAAU,CAAC,KAAiC;IAClD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,UAAU,EAAE;MACvF,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;KAC7B;GACD;EAGM,YAAY,CAAC,KAAoB;IACvC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC1B;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAccordion"],"sources":["src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","src/components/accordion/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n.wrapper {\n\tdisplay: grid;\n\tgrid-template-rows: 0fr;\n\toverflow: hidden;\n\ttransition: grid-template-rows 0.3s;\n}\n.accordion.open .wrapper {\n\tgrid-template-rows: 1fr;\n}\n.animation-wrapper {\n\tmin-height: 0;\n\ttransition: visibility 0.3s;\n\t/* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n\tvisibility: hidden;\n}\n.accordion.open .animation-wrapper {\n\tvisibility: visible;\n}\n@media (prefers-reduced-motion) {\n\t.animation-wrapper,\n\t.wrapper {\n\t\ttransition-duration: 0s;\n\t}\n} /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\tjustify-items: start;\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { OpenPropType, validateOpen } from '../../types/props/open';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriAccordionCallbacks, States } from './types';\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.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-heading-wc _label=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icons={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}\n\t\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"wrapper\">\n\t\t\t\t\t\t<div class=\"animation-wrapper\">\n\t\t\t\t\t\t\t<div aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" id={this.nonce}>\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: 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 = 1;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen an.\n\t */\n\t@Prop() public _on?: KoliBriAccordionCallbacks;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\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: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_level: 1,\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\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\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.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\tprivate onClick = (event: Event) => {\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\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"version":3}

package/dist/components/kol-breadcrumb.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Fragment,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{G as a11yHintLabelingLandmarks}from"./prop.validators.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$6}from"./component.js";import{d as defineCustomElement$5}from"./shadow2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}li,ul{margin:0;padding:0;list-style:none;display:flex;gap:0.5em;flex-wrap:wrap;place-items:center}kol-icon::part(separator){font-weight:900;font-size:0.7em}kol-icon::part(separator):before{content:'\\f054';font-family:'Font Awesome 6 Free'}",KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.renderLink=(e,t)=>{const a=this.state._links.length-1,n=e._iconOnly||e._hideLabel;return h("li",{key:t},0!==t&&h("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),t===a?h("span",null,n?h("kol-icon",{_label:e._label,_icons:"string"==typeof e._icon?e._icon:"codicon codicon-symbol-event"}):h(Fragment,null,e._label)):h("kol-link",Object.assign({},e)))},this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return h(Host,null,h("nav",{"aria-label":this.state._label},h("ul",null,0===this.state._links.length&&h("li",null,h("kol-icon",{_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateAriaLabel(e){this.validateLabel(e)}validateLabel(e,t,a=!1){a||removeNavLabel(this.state._label),validateLabel(this,e),a11yHintLabelingLandmarks(e),addNavLabel(this.state._label)}validateLinks(e){watchNavLinks("KolBreadcrumb",this,e)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-breadcrumb",{_ariaLabel:[1,"_aria-label"],_label:[1],_links:[1],state:[32]},void 0,{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-breadcrumb":customElements.get(e)||customElements.define(e,KolBreadcrumb$1);break;case"kol-icon":customElements.get(e)||defineCustomElement$6();break;case"kol-link":customElements.get(e)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Fragment,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{G as a11yHintLabelingLandmarks}from"./prop.validators.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$6}from"./component.js";import{d as defineCustomElement$5}from"./shadow2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}li,ul{margin:0;padding:0;list-style:none;display:flex;gap:0.5em;flex-wrap:wrap;place-items:center}kol-icon::part(separator){font-weight:900;font-size:0.7em}kol-icon::part(separator):before{content:'\\f054';font-family:'Font Awesome 6 Free'}",KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.renderLink=(e,t)=>{const n=this.state._links.length-1;return h("li",{key:t},0!==t&&h("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),t===n?h("span",null,e._hideLabel?h("kol-icon",{_label:e._label,_icons:"string"==typeof e._icons?e._icons:"codicon codicon-symbol-event"}):h(Fragment,null,e._label)):h("kol-link",Object.assign({},e)))},this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return h(Host,null,h("nav",{"aria-label":this.state._label},h("ul",null,0===this.state._links.length&&h("li",null,h("kol-icon",{_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(e,t,n=!1){n||removeNavLabel(this.state._label),validateLabel(this,e),a11yHintLabelingLandmarks(e),addNavLabel(this.state._label)}validateLinks(e){watchNavLinks("KolBreadcrumb",this,e)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-breadcrumb",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-breadcrumb":customElements.get(e)||customElements.define(e,KolBreadcrumb$1);break;case"kol-icon":customElements.get(e)||defineCustomElement$6();break;case"kol-link":customElements.get(e)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-breadcrumb.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,07BAA07B;;MCiBr8BA,eAAa;;;;;IACR,eAAU,GAAG,CAAC,IAAyB,EAAE,KAAa;MACtE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;MAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC;MACpD,QACC,UAAI,GAAG,EAAE,KAAK,IACZ,KAAK,KAAK,CAAC,IAAI,gBAAU,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,+BAA+B,GAAG,EAC5E,KAAK,KAAK,SAAS,IACnB,gBACE,SAAS,IACT,gBAAU,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,8BAA8B,GAAI,KAEvH,EAAC,QAAQ,QAAE,IAAI,CAAC,MAAM,CAAY,CAClC,CACK,KAEP,gCAAc,IAAI,EAAa,CAC/B,CACG,EACJ;KACF,CAAC;;;;iBAoC8B;MAC/B,MAAM,EAAE,GAAG;MACX,MAAM,EAAE,EAAE;KACV;;EArCM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,yBAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjC,cACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,KAC9B,cACC,gBAAU,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,sBAAsB,GAAG,WAChD,CACL,EACA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CACnC,CACA,CACA,EACN;GACF;EA4BM,iBAAiB,CAAC,KAAc;IACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;IACrF,IAAI,CAAC,OAAO,EAAE;MACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;IACD,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3B,yBAAyB,CAAC,KAAK,CAAC,CAAC;IACjC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;GAC/B;EAGM,aAAa,CAAC,KAAgC;IACpD,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;GAC5C;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IACpE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;EAEM,oBAAoB;IAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;GAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolBreadcrumb"],"sources":["src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/component.tsx"],"sourcesContent":["@import url(../style.css);\nli,\nul {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: flex;\n\tgap: 0.5em;\n\tflex-wrap: wrap;\n\tplace-items: center;\n}\nkol-icon::part(separator) {\n\tfont-weight: 900;\n\tfont-size: 0.7em;\n}\nkol-icon::part(separator):before {\n\tcontent: '\\f054';\n\tfont-family: 'Font Awesome 6 Free';\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, BreadcrumbLinkProps, States } from './types';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements API {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\tconst hideLabel = link._iconOnly || link._hideLabel;\n\t\treturn (\n\t\t\t<li key={index}>\n\t\t\t\t{index !== 0 && <kol-icon _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{hideLabel ? (\n\t\t\t\t\t\t\t<kol-icon _label={link._label} _icons={typeof link._icon === 'string' ? link._icon : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<kol-link {...link}></kol-link>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: 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?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._ariaLabel, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}
+{"file":"kol-breadcrumb.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,07BAA07B;;MCiBr8BA,eAAa;;;;;IACR,eAAU,GAAG,CAAC,IAAyB,EAAE,KAAa;MACtE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;MAC/C,QACC,UAAI,GAAG,EAAE,KAAK,IACZ,KAAK,KAAK,CAAC,IAAI,gBAAU,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,+BAA+B,GAAG,EAC5E,KAAK,KAAK,SAAS,IACnB,gBACE,IAAI,CAAC,UAAU,IACf,gBAAU,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAI,KAEzH,EAAC,QAAQ,QAAE,IAAI,CAAC,MAAM,CAAY,CAClC,CACK,KAEP,gCAAc,IAAI,EAAa,CAC/B,CACG,EACJ;KACF,CAAC;;;iBA6B8B;MAC/B,MAAM,EAAE,GAAG;MACX,MAAM,EAAE,EAAE;KACV;;EA9BM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,yBAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjC,cACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,KAC9B,cACC,gBAAU,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,sBAAsB,GAAG,WAChD,CACL,EACA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CACnC,CACA,CACA,EACN;GACF;EAkBM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;IACrF,IAAI,CAAC,OAAO,EAAE;MACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;IACD,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3B,yBAAyB,CAAC,KAAK,CAAC,CAAC;IACjC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;GAC/B;EAGM,aAAa,CAAC,KAAgC;IACpD,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;GAC5C;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;EAEM,oBAAoB;IAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;GAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolBreadcrumb"],"sources":["src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/component.tsx"],"sourcesContent":["@import url(../style.css);\nli,\nul {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: flex;\n\tgap: 0.5em;\n\tflex-wrap: wrap;\n\tplace-items: center;\n}\nkol-icon::part(separator) {\n\tfont-weight: 900;\n\tfont-size: 0.7em;\n}\nkol-icon::part(separator):before {\n\tcontent: '\\f054';\n\tfont-family: 'Font Awesome 6 Free';\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, BreadcrumbLinkProps, States } from './types';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements API {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<li key={index}>\n\t\t\t\t{index !== 0 && <kol-icon _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{link._hideLabel ? (\n\t\t\t\t\t\t\t<kol-icon _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<kol-link {...link}></kol-link>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{B as propagateFocus}from"./prop.validators.js";import{d as defineCustomElement$5}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){align-items:baseline;display:inline-flex;place-items:center;text-align:left;text-decoration-line:underline}:is(a,button):is(:focus,:hover){text-decoration-thickness:0.2em}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:#fff;left:unset;padding:1em;position:unset}kol-icon.external-link-icon{display:inline-flex}",KolButtonLink$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propagateFocus(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._icons=void 0,this._iconOnly=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}render(){return h(Host,null,h("kol-button-wc",{ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icons:this._icons||this._icon,_hideLabel:this._hideLabel||this._iconOnly,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:"link",_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},h("slot",{name:"expert",slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-button-link",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[4,"_aria-expanded"],_ariaLabel:[1025,"_aria-label"],_ariaSelected:[4,"_aria-selected"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icon:[1],_icons:[1],_iconOnly:[4,"_icon-only"],_id:[1],_label:[1],_name:[1],_on:[16],_role:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-link","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-button-link":customElements.get(e)||customElements.define(e,KolButtonLink$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolButtonLink=KolButtonLink$1,defineCustomElement=defineCustomElement$1;export{KolButtonLink,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{B as propagateFocus}from"./prop.validators.js";import{d as defineCustomElement$5}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){align-items:baseline;display:inline-flex;place-items:center;text-align:left;text-decoration-line:underline}:is(a,button):is(:focus,:hover){text-decoration-thickness:0.2em}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:#fff;left:unset;padding:1em;position:unset}kol-icon.external-link-icon{display:inline-flex}",KolButtonLink$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propagateFocus(this.host,this.ref)},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}render(){return h(Host,null,h("kol-button-wc",{ref:this.catchRef,_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:"link",_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},h("slot",{name:"expert",slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-button-link",{_ariaControls:[1,"_aria-controls"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_role:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-link","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-button-link":customElements.get(e)||customElements.define(e,KolButtonLink$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolButtonLink=KolButtonLink$1,defineCustomElement=defineCustomElement$1;export{KolButtonLink,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-button-link.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,mpCAAmpC;;MCwB9pCA,eAAa;;;;;IAIR,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;qBAyEmC,KAAK;sBAOJ,KAAK;;;;;;;;;;;yBAyDW,KAAK;iBAKf,QAAQ;;;EA5I7C,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EAC7C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,MAAM,EACZ,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC1B,CACV,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonLink"],"sources":["src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/component.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { AriaCurrentPropType } from '../../types/props/aria-current';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { ButtonTypePropType } from '../../types/props/button-type';\nimport { IconsPropType } from '../../types/props/icons';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { propagateFocus } from '../../utils/reuse';\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Props {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icons={this._icons || this._icon}\n\t\t\t\t\t_hideLabel={this._hideLabel || this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"link\"\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\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 * Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t *\n\t * @deprecated aria-current is not necessary for buttons. will be removed in version 2.\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrentPropType;\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 * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\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 * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: IconsPropType;\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 * Deprecated: Hides the label and shows the description in a Tooltip instead.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n}\n"],"version":3}
+{"file":"kol-button-link.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,mpCAAmpC;;MCuB9pCA,eAAa;;;;;IAIR,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;qBAmDmC,KAAK;sBAOJ,KAAK;;;;;;;;;yBA8CW,KAAK;iBAKf,QAAQ;;;EA3G7C,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,MAAM,EACZ,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC1B,CACV,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonLink"],"sources":["src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/component.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { ButtonTypePropType } from '../../types/props/button-type';\nimport { IconsPropType } from '../../types/props/icons';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { propagateFocus } from '../../utils/reuse';\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Props {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"link\"\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t * @TODO: Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n}\n"],"version":3}

package/dist/components/kol-card.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as validateHasCloser}from"./has-closer.js";import{e as watchBoolean,t as setState}from"./prop.validators.js";import{v as validateLabel}from"./label.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const validateHasFooter=(e,t)=>{watchBoolean(e,"_hasFooter",t)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>div.card{height:100%;position:relative}.close{position:absolute;top:0;right:0}",KolCard$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._on=void 0,this._hasCloser=!1,this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._label=void 0,this._level=1,this.state={_label:"…"}}render(){return h(Host,null,h("div",{class:"card"},h("div",{class:"header"},h("kol-heading-wc",{_label:this.state._label,_level:this.state._level}),h("slot",{name:"header"})),h("div",{class:"content"},h("slot",{name:"content"}),h("slot",null)),this.state._hasFooter&&h("div",{class:"footer"},h("slot",{name:"footer"})),this.state._hasCloser&&h("kol-button-wc",{class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:translate("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&setState(this,"_on",{onClose:e.onClose})}validateHasCloser(e){validateHasCloser(this,e)}validateHasFooter(e){validateHasFooter(this,e)}validateHeading(e){this.validateLabel(e)}validateHeadline(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateHasFooter(this._hasFooter),this.validateLabel(this._label||this._heading||this._headline),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_label:["validateLabel"],_level:["validateLevel"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-card",{_on:[16],_hasCloser:[4,"_has-closer"],_hasFooter:[4,"_has-footer"],_heading:[1],_headline:[1],_label:[1],_level:[2],state:[32]},void 0,{_on:["validateOn"],_hasCloser:["validateHasCloser"],_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_label:["validateLabel"],_level:["validateLevel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-card":customElements.get(e)||customElements.define(e,KolCard$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolCard=KolCard$1,defineCustomElement=defineCustomElement$1;export{KolCard,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as validateHasCloser}from"./has-closer.js";import{v as validateLabel}from"./label.js";import{t as setState}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>div.card{height:100%;position:relative}.close{position:absolute;top:0;right:0}",KolCard$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:"…"}}render(){return h(Host,null,h("div",{class:"card"},h("div",{class:"header"},h("kol-heading-wc",{_label:this.state._label,_level:this.state._level})),h("div",{class:"content"},h("slot",null)),this.state._hasCloser&&h("kol-button-wc",{class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:translate("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&setState(this,"_on",{onClose:e.onClose})}validateHasCloser(e){validateHasCloser(this,e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-card",{_on:[16],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2],state:[32]},void 0,{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-card":customElements.get(e)||customElements.define(e,KolCard$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolCard=KolCard$1,defineCustomElement=defineCustomElement$1;export{KolCard,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-card.js","mappings":"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","names":["KolCard"],"sources":["src/types/props/has-footer.ts","src/components/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n\nexport type HasFooterPropType = boolean;\n\n/**\n * Shows the slot=\"footer\".\n */\nexport type PropHasFooter = {\n\thasFooter: HasFooterPropType;\n};\n\n/* validator */\nexport const validateHasFooter = (component: Generic.Element.Component, value?: HasFooterPropType): void => {\n\twatchBoolean(component, '_hasFooter', value);\n};\n","@import url(../style.css);\n:host > div.card {\n\theight: 100%;\n\tposition: relative;\n}\n.close {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { HasCloserPropType, validateHasCloser } from '../../types/props/has-closer';\nimport { HasFooterPropType, validateHasFooter } from '../../types/props/has-footer';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { setState } from '../../utils/prop.validators';\nimport { KoliBriAlertEventCallbacks } from '../alert/types';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriCardEventCallbacks, States } from './types';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements API {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div class=\"card\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _label={this.state._label} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"content\"></slot>\n\t\t\t\t\t\t{/* Deprecated for version 2 */}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Shows the slot=\"footer\".\n\t * @TODO: Change type back to `HasFooterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasFooter?: boolean = false;\n\n\t/**\n\t * Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _heading?: string;\n\n\t/**\n\t * Deprecated: Gibt die Beschriftung der Komponente an.\n\t *\n\t * @deprecated Verwende stattdessen das Property _heading.\n\t */\n\t@Prop() public _headline?: 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?: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t@State() public state: States = {\n\t\t_label: '…', // '⚠'\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: HasFooterPropType): void {\n\t\tvalidateHasFooter(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateLabel(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\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateLabel(this._label || this._heading || this._headline);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"version":3}
+{"file":"kol-card.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,8xBAA8xB;;MCqBzyBA,SAAO;;;;;IACF,UAAK,GAAG;;MACxB,IAAI,CAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,MAAK,SAAS,EAAE;QACpC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;OACrC;KACD,CAAC;IAEe,OAAE,GAAG;MACrB,OAAO,EAAE,IAAI,CAAC,KAAK;KACnB,CAAC;IAwDM,oBAAe,GAAG,CAAC,KAAc,KACxC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAQ,KAAmC,CAAC,OAAO,KAAK,UAAU,CAAC;;sBAjB7E,KAAK;;kBAUJ,CAAC;iBAER;MAC/B,MAAM,EAAE,GAAG;KACX;;EApDM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,WAAK,KAAK,EAAC,MAAM,IAChB,WAAK,KAAK,EAAC,QAAQ,IAClB,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,CAClF,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,eAAQ,CACH,EACL,IAAI,CAAC,KAAK,CAAC,UAAU,KACrB,qBACC,KAAK,EAAC,OAAO,EACb,UAAU,QACV,MAAM,EAAE;QACP,IAAI,EAAE;UACL,IAAI,EAAE,uBAAuB;SAC7B;OACD,EACD,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,EAC9B,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,aAAa,EAAC,MAAM,GACJ,CACjB,CACI,CACA,EACN;GACF;EA+BM,UAAU,CAAC,KAAiC;IAClD,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;MAChC,QAAQ,CAA4B,IAAI,EAAE,KAAK,EAAE;QAChD,OAAO,EAAG,KAAoC,CAAC,OAAO;OACtD,CAAC,CAAC;KACH;GACD;EAGM,iBAAiB,CAAC,KAAyB;IACjD,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAEM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolCard"],"sources":["src/components/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host > div.card {\n\theight: 100%;\n\tposition: relative;\n}\n.close {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { HasCloserPropType, validateHasCloser } from '../../types/props/has-closer';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { setState } from '../../utils/prop.validators';\nimport { KoliBriAlertEventCallbacks } from '../alert/types';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriCardEventCallbacks, States } from './types';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements API {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div class=\"card\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _label={this.state._label} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t@State() public state: States = {\n\t\t_label: '…', // '⚠'\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"version":3}

package/dist/components/kol-details.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";import{t as tryToDispatchKoliBriEvent}from"./events.js";import{t as setState}from"./prop.validators.js";import{d as defineCustomElement$3}from"./component.js";import{d as defineCustomElement$2}from"./component12.js";class DetailsAnimationController{constructor(t,e,i){this.detailsElement=t,this.summaryElement=e,this.contentElement=i,this.isClosing=!1,this.isExpanding=!1,this.summaryElement.addEventListener("click",this.handleSummaryClick.bind(this))}handleSummaryClick(t){t.preventDefault(),this.detailsElement.style.overflow="hidden",this.isClosing||!this.detailsElement.open?this.open():(this.isExpanding||this.detailsElement.open)&&this.collapse()}open(){var t;this.detailsElement.style.height=`${null!==(t=this.detailsElement.offsetHeight)&&void 0!==t?t:0}px`,this.detailsElement.open=!0,window.requestAnimationFrame(this.expand.bind(this))}expand(){this.isExpanding=!0,this.animateDetailsHeight(this.summaryElement.offsetHeight+this.contentElement.offsetHeight,"expand")}collapse(){this.isClosing=!0,this.animateDetailsHeight(this.summaryElement.offsetHeight,"collapse")}animateDetailsHeight(t,e){const i=this.detailsElement.offsetHeight;this.animation&&this.animation.cancel(),this.animation=this.detailsElement.animate({height:[`${i}px`,`${t}px`]},{duration:matchMedia("(prefers-reduced-motion)").matches?0:250,easing:"ease-out"}),this.animation.addEventListener("finish",(()=>{this.onAnimationFinish()}),{once:!0}),this.animation.addEventListener("cancel",(()=>{"expand"===e?this.isExpanding=!1:this.isClosing=!1}),{once:!0})}onAnimationFinish(){this.detailsElement.open=this.isExpanding,this.animation=void 0,this.isClosing=!1,this.isExpanding=!1,this.detailsElement.style.removeProperty("height"),this.detailsElement.style.removeProperty("overview")}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}details{display:grid}details>summary{cursor:pointer;display:flex;place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid}details>summary:focus>span,details>summary:hover>span,details[open]>summary>span{border-bottom-color:#000}details>kol-indented-text{margin:0.25em 0 0 0.5em}",KolDetails$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.handleToggle=t=>{clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,i,n,s;Boolean(null===(e=this.detailsElement)||void 0===e?void 0:e.open)!==this.state._open&&(this._open=Boolean(null===(i=this.detailsElement)||void 0===i?void 0:i.open),tryToDispatchKoliBriEvent("toggle",this.host,this._open),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onToggle)&&(null===(s=this.state._on)||void 0===s||s.onToggle(t,this._open)))}),25)},this._label=void 0,this._on=void 0,this._open=!1,this._summary=void 0,this.state={_label:"…",_on:{}}}render(){return h(Host,null,h("details",{ref:t=>{this.detailsElement=t},onToggle:this.handleToggle},h("summary",{ref:t=>this.summaryElement=t},this.state._open?h("kol-icon",{_label:"",_icons:"codicon codicon-chevron-down"}):h("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),h("span",null,this.state._label)),h("div",{class:"content",ref:t=>this.contentElement=t},h("kol-indented-text",null,h("slot",null)))))}validateLabel(t){validateLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&"function"==typeof t.onToggle&&setState(this,"_on",t)}validateOpen(t){validateOpen(this,t)}validateSummary(t){this.validateLabel(t)}componentWillLoad(){this.validateLabel(this._label||this._summary),this.validateOn(this._on),this.validateOpen(this._open)}componentDidLoad(){if(this.detailsElement&&this.summaryElement&&this.contentElement){const t=new DetailsAnimationController(this.detailsElement,this.summaryElement,this.contentElement);this.state._open&&t.open()}}get host(){return this}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"],_summary:["validateSummary"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-details",{_label:[1],_on:[16],_open:[1540],_summary:[1],state:[32]},void 0,{_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"],_summary:["validateSummary"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-details","kol-icon","kol-indented-text"].forEach((t=>{switch(t){case"kol-details":customElements.get(t)||customElements.define(t,KolDetails$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$3();break;case"kol-indented-text":customElements.get(t)||defineCustomElement$2()}}))}const KolDetails=KolDetails$1,defineCustomElement=defineCustomElement$1;export{KolDetails,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";import{t as tryToDispatchKoliBriEvent}from"./events.js";import{t as setState}from"./prop.validators.js";import{d as defineCustomElement$3}from"./component.js";import{d as defineCustomElement$2}from"./component12.js";class DetailsAnimationController{constructor(t,e,i){this.detailsElement=t,this.summaryElement=e,this.contentElement=i,this.isClosing=!1,this.isExpanding=!1,this.summaryElement.addEventListener("click",this.handleSummaryClick.bind(this))}handleSummaryClick(t){t.preventDefault(),this.detailsElement.style.overflow="hidden",this.isClosing||!this.detailsElement.open?this.open():(this.isExpanding||this.detailsElement.open)&&this.collapse()}open(){var t;this.detailsElement.style.height=`${null!==(t=this.detailsElement.offsetHeight)&&void 0!==t?t:0}px`,this.detailsElement.open=!0,window.requestAnimationFrame(this.expand.bind(this))}expand(){this.isExpanding=!0,this.animateDetailsHeight(this.summaryElement.offsetHeight+this.contentElement.offsetHeight,"expand")}collapse(){this.isClosing=!0,this.animateDetailsHeight(this.summaryElement.offsetHeight,"collapse")}animateDetailsHeight(t,e){const i=this.detailsElement.offsetHeight;this.animation&&this.animation.cancel(),this.animation=this.detailsElement.animate({height:[`${i}px`,`${t}px`]},{duration:matchMedia("(prefers-reduced-motion)").matches?0:250,easing:"ease-out"}),this.animation.addEventListener("finish",(()=>{this.onAnimationFinish()}),{once:!0}),this.animation.addEventListener("cancel",(()=>{"expand"===e?this.isExpanding=!1:this.isClosing=!1}),{once:!0})}onAnimationFinish(){this.detailsElement.open=this.isExpanding,this.animation=void 0,this.isClosing=!1,this.isExpanding=!1,this.detailsElement.style.removeProperty("height"),this.detailsElement.style.removeProperty("overview")}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}details{display:grid}details>summary{cursor:pointer;display:flex;place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid}details>summary:focus>span,details>summary:hover>span,details[open]>summary>span{border-bottom-color:#000}details>kol-indented-text{margin:0.25em 0 0 0.5em}",KolDetails$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.handleToggle=t=>{clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,i,n,s;Boolean(null===(e=this.detailsElement)||void 0===e?void 0:e.open)!==this.state._open&&(this._open=Boolean(null===(i=this.detailsElement)||void 0===i?void 0:i.open),tryToDispatchKoliBriEvent("toggle",this.host,this._open),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onToggle)&&(null===(s=this.state._on)||void 0===s||s.onToggle(t,this._open)))}),25)},this._label=void 0,this._on=void 0,this._open=!1,this.state={_label:"…",_on:{}}}render(){return h(Host,null,h("details",{ref:t=>{this.detailsElement=t},onToggle:this.handleToggle},h("summary",{ref:t=>this.summaryElement=t},this.state._open?h("kol-icon",{_label:"",_icons:"codicon codicon-chevron-down"}):h("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),h("span",null,this.state._label)),h("div",{class:"content",ref:t=>this.contentElement=t},h("kol-indented-text",null,h("slot",null)))))}validateLabel(t){validateLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&"function"==typeof t.onToggle&&setState(this,"_on",t)}validateOpen(t){validateOpen(this,t)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateOpen(this._open)}componentDidLoad(){if(this.detailsElement&&this.summaryElement&&this.contentElement){const t=new DetailsAnimationController(this.detailsElement,this.summaryElement,this.contentElement);this.state._open&&t.open()}}get host(){return this}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-details",{_label:[1],_on:[16],_open:[1540],state:[32]},void 0,{_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-details","kol-icon","kol-indented-text"].forEach((t=>{switch(t){case"kol-details":customElements.get(t)||customElements.define(t,KolDetails$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$3();break;case"kol-indented-text":customElements.get(t)||defineCustomElement$2()}}))}const KolDetails=KolDetails$1,defineCustomElement=defineCustomElement$1;export{KolDetails,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-details.js","mappings":"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","names":["KolDetails"],"sources":["src/components/details/DetailsAnimationController.ts","src/components/details/style.css?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/component.tsx"],"sourcesContent":["/* Heavily inspired by: https://codepen.io/Mamboleoo/pen/QWEpLqm  */\n\nexport default class DetailsAnimationController {\n\tprivate animation?: Animation;\n\tprivate isClosing = false;\n\tprivate isExpanding = false;\n\n\tconstructor(private detailsElement: HTMLDetailsElement, private summaryElement: HTMLElement, private contentElement: HTMLElement) {\n\t\tthis.summaryElement.addEventListener('click', this.handleSummaryClick.bind(this));\n\t}\n\n\tprivate handleSummaryClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\n\t\tthis.detailsElement.style.overflow = 'hidden';\n\t\tif (this.isClosing || !this.detailsElement.open) {\n\t\t\tthis.open();\n\t\t} else if (this.isExpanding || this.detailsElement.open) {\n\t\t\tthis.collapse();\n\t\t}\n\t}\n\n\tpublic open() {\n\t\t/**\n\t\t * The Jest test framework does not support the `offsetHeight` property on the `details` element.\n\t\t * This is a workaround to make the tests pass (?? 0).\n\t\t */\n\t\tthis.detailsElement.style.height = `${this.detailsElement.offsetHeight ?? 0}px`;\n\t\tthis.detailsElement.open = true;\n\t\twindow.requestAnimationFrame(this.expand.bind(this));\n\t}\n\n\tprivate expand() {\n\t\tthis.isExpanding = true;\n\t\tthis.animateDetailsHeight(this.summaryElement.offsetHeight + this.contentElement.offsetHeight, 'expand');\n\t}\n\n\tprivate collapse() {\n\t\tthis.isClosing = true;\n\t\tthis.animateDetailsHeight(this.summaryElement.offsetHeight, 'collapse');\n\t}\n\n\tprivate animateDetailsHeight(endHeight: number, direction: 'expand' | 'collapse') {\n\t\tconst startHeight = this.detailsElement.offsetHeight;\n\n\t\tif (this.animation) {\n\t\t\tthis.animation.cancel();\n\t\t}\n\n\t\tthis.animation = this.detailsElement.animate(\n\t\t\t{\n\t\t\t\theight: [`${startHeight}px`, `${endHeight}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: matchMedia('(prefers-reduced-motion)').matches ? 0 : 250,\n\t\t\t\teasing: 'ease-out',\n\t\t\t}\n\t\t);\n\n\t\tthis.animation.addEventListener(\n\t\t\t'finish',\n\t\t\t() => {\n\t\t\t\tthis.onAnimationFinish();\n\t\t\t},\n\t\t\t{ once: true }\n\t\t);\n\t\tthis.animation.addEventListener(\n\t\t\t'cancel',\n\t\t\t() => {\n\t\t\t\tif (direction === 'expand') {\n\t\t\t\t\tthis.isExpanding = false;\n\t\t\t\t} else {\n\t\t\t\t\tthis.isClosing = false;\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ once: true }\n\t\t);\n\t}\n\n\tprivate onAnimationFinish() {\n\t\tthis.detailsElement.open = this.isExpanding;\n\t\tthis.animation = undefined;\n\t\tthis.isClosing = false;\n\t\tthis.isExpanding = false;\n\t\tthis.detailsElement.style.removeProperty('height');\n\t\tthis.detailsElement.style.removeProperty('overview');\n\t}\n}\n","@import url(../style.css);\n@import url(../host-display-block.css);\ndetails {\n\tdisplay: grid;\n}\ndetails > summary {\n\tcursor: pointer;\n\tdisplay: flex;\n\tplace-items: center;\n}\ndetails > summary > span {\n\tborder-bottom-color: grey;\n\tborder-bottom-style: solid;\n}\ndetails > summary:focus > span,\ndetails > summary:hover > span,\ndetails[open] > summary > span {\n\tborder-bottom-color: #000;\n}\ndetails > kol-indented-text {\n\tmargin: 0.25em 0 0 0.5em;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { validateOpen } from '../../types/props/open';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { setState } from '../../utils/prop.validators';\nimport DetailsAnimationController from './DetailsAnimationController';\nimport { API, EventCallbacks, States } from './types';\n\n/**\n * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements API {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate detailsElement?: HTMLDetailsElement;\n\tprivate summaryElement?: HTMLElement;\n\tprivate contentElement?: HTMLElement;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<details\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.detailsElement = el as HTMLDetailsElement;\n\t\t\t\t\t}}\n\t\t\t\t\tonToggle={this.handleToggle}\n\t\t\t\t>\n\t\t\t\t\t<summary ref={(element) => (this.summaryElement = element)}>\n\t\t\t\t\t\t{this.state._open ? <kol-icon _label=\"\" _icons=\"codicon codicon-chevron-down\" /> : <kol-icon _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div class=\"content\" ref={(element) => (this.contentElement = element)}>\n\t\t\t\t\t\t<kol-indented-text>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-indented-text>\n\t\t\t\t\t</div>\n\t\t\t\t</details>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines the callback functions for details.\n\t */\n\t@Prop() public _on?: EventCallbacks;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\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/**\n\t * Deprecated: Gibt die Zusammenfassung der Detailbeschreibung an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _summary?: string;\n\n\t@State() public state: States = {\n\t\t_label: '…', // '⚠'\n\t\t_on: {},\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: EventCallbacks) {\n\t\tif (typeof on === 'object' && on !== null && typeof on.onToggle === 'function') {\n\t\t\tsetState<EventCallbacks>(this, '_on', on);\n\t\t}\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_summary')\n\tpublic validateSummary(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._summary);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tpublic componentDidLoad() {\n\t\tif (this.detailsElement && this.summaryElement && this.contentElement) {\n\t\t\tconst animationController = new DetailsAnimationController(this.detailsElement, this.summaryElement, this.contentElement);\n\t\t\tif (this.state._open) {\n\t\t\t\tanimationController.open();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleToggle = (event: Event) => {\n\t\tclearTimeout(this.toggleTimeout);\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\tconst open = Boolean(this.detailsElement?.open);\n\t\t\tif (open !== this.state._open) {\n\t\t\t\t// Update state\n\t\t\t\tthis._open = Boolean(this.detailsElement?.open);\n\n\t\t\t\t// Event handling\n\t\t\t\ttryToDispatchKoliBriEvent('toggle', this.host, this._open);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onToggle === 'function') {\n\t\t\t\t\tthis.state._on?.onToggle(event, this._open);\n\t\t\t\t}\n\t\t\t}\n\t\t}, 25);\n\t};\n}\n"],"version":3}
+{"file":"kol-details.js","mappings":"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","names":["KolDetails"],"sources":["src/components/details/DetailsAnimationController.ts","src/components/details/style.css?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/component.tsx"],"sourcesContent":["/* Heavily inspired by: https://codepen.io/Mamboleoo/pen/QWEpLqm  */\n\nexport default class DetailsAnimationController {\n\tprivate animation?: Animation;\n\tprivate isClosing = false;\n\tprivate isExpanding = false;\n\n\tconstructor(private detailsElement: HTMLDetailsElement, private summaryElement: HTMLElement, private contentElement: HTMLElement) {\n\t\tthis.summaryElement.addEventListener('click', this.handleSummaryClick.bind(this));\n\t}\n\n\tprivate handleSummaryClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\n\t\tthis.detailsElement.style.overflow = 'hidden';\n\t\tif (this.isClosing || !this.detailsElement.open) {\n\t\t\tthis.open();\n\t\t} else if (this.isExpanding || this.detailsElement.open) {\n\t\t\tthis.collapse();\n\t\t}\n\t}\n\n\tpublic open() {\n\t\t/**\n\t\t * The Jest test framework does not support the `offsetHeight` property on the `details` element.\n\t\t * This is a workaround to make the tests pass (?? 0).\n\t\t */\n\t\tthis.detailsElement.style.height = `${this.detailsElement.offsetHeight ?? 0}px`;\n\t\tthis.detailsElement.open = true;\n\t\twindow.requestAnimationFrame(this.expand.bind(this));\n\t}\n\n\tprivate expand() {\n\t\tthis.isExpanding = true;\n\t\tthis.animateDetailsHeight(this.summaryElement.offsetHeight + this.contentElement.offsetHeight, 'expand');\n\t}\n\n\tprivate collapse() {\n\t\tthis.isClosing = true;\n\t\tthis.animateDetailsHeight(this.summaryElement.offsetHeight, 'collapse');\n\t}\n\n\tprivate animateDetailsHeight(endHeight: number, direction: 'expand' | 'collapse') {\n\t\tconst startHeight = this.detailsElement.offsetHeight;\n\n\t\tif (this.animation) {\n\t\t\tthis.animation.cancel();\n\t\t}\n\n\t\tthis.animation = this.detailsElement.animate(\n\t\t\t{\n\t\t\t\theight: [`${startHeight}px`, `${endHeight}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: matchMedia('(prefers-reduced-motion)').matches ? 0 : 250,\n\t\t\t\teasing: 'ease-out',\n\t\t\t}\n\t\t);\n\n\t\tthis.animation.addEventListener(\n\t\t\t'finish',\n\t\t\t() => {\n\t\t\t\tthis.onAnimationFinish();\n\t\t\t},\n\t\t\t{ once: true }\n\t\t);\n\t\tthis.animation.addEventListener(\n\t\t\t'cancel',\n\t\t\t() => {\n\t\t\t\tif (direction === 'expand') {\n\t\t\t\t\tthis.isExpanding = false;\n\t\t\t\t} else {\n\t\t\t\t\tthis.isClosing = false;\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ once: true }\n\t\t);\n\t}\n\n\tprivate onAnimationFinish() {\n\t\tthis.detailsElement.open = this.isExpanding;\n\t\tthis.animation = undefined;\n\t\tthis.isClosing = false;\n\t\tthis.isExpanding = false;\n\t\tthis.detailsElement.style.removeProperty('height');\n\t\tthis.detailsElement.style.removeProperty('overview');\n\t}\n}\n","@import url(../style.css);\n@import url(../host-display-block.css);\ndetails {\n\tdisplay: grid;\n}\ndetails > summary {\n\tcursor: pointer;\n\tdisplay: flex;\n\tplace-items: center;\n}\ndetails > summary > span {\n\tborder-bottom-color: grey;\n\tborder-bottom-style: solid;\n}\ndetails > summary:focus > span,\ndetails > summary:hover > span,\ndetails[open] > summary > span {\n\tborder-bottom-color: #000;\n}\ndetails > kol-indented-text {\n\tmargin: 0.25em 0 0 0.5em;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { validateOpen } from '../../types/props/open';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { setState } from '../../utils/prop.validators';\nimport DetailsAnimationController from './DetailsAnimationController';\nimport { API, EventCallbacks, States } from './types';\n\n/**\n * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements API {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate detailsElement?: HTMLDetailsElement;\n\tprivate summaryElement?: HTMLElement;\n\tprivate contentElement?: HTMLElement;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<details\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.detailsElement = el as HTMLDetailsElement;\n\t\t\t\t\t}}\n\t\t\t\t\tonToggle={this.handleToggle}\n\t\t\t\t>\n\t\t\t\t\t<summary ref={(element) => (this.summaryElement = element)}>\n\t\t\t\t\t\t{this.state._open ? <kol-icon _label=\"\" _icons=\"codicon codicon-chevron-down\" /> : <kol-icon _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div class=\"content\" ref={(element) => (this.contentElement = element)}>\n\t\t\t\t\t\t<kol-indented-text>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-indented-text>\n\t\t\t\t\t</div>\n\t\t\t\t</details>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the callback functions for details.\n\t */\n\t@Prop() public _on?: EventCallbacks;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\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: States = {\n\t\t_label: '…', // '⚠'\n\t\t_on: {},\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: EventCallbacks) {\n\t\tif (typeof on === 'object' && on !== null && typeof on.onToggle === 'function') {\n\t\t\tsetState<EventCallbacks>(this, '_on', on);\n\t\t}\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tpublic componentDidLoad() {\n\t\tif (this.detailsElement && this.summaryElement && this.contentElement) {\n\t\t\tconst animationController = new DetailsAnimationController(this.detailsElement, this.summaryElement, this.contentElement);\n\t\t\tif (this.state._open) {\n\t\t\t\tanimationController.open();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleToggle = (event: Event) => {\n\t\tclearTimeout(this.toggleTimeout);\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\tconst open = Boolean(this.detailsElement?.open);\n\t\t\tif (open !== this.state._open) {\n\t\t\t\t// Update state\n\t\t\t\tthis._open = Boolean(this.detailsElement?.open);\n\n\t\t\t\t// Event handling\n\t\t\t\ttryToDispatchKoliBriEvent('toggle', this.host, this._open);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onToggle === 'function') {\n\t\t\t\t\tthis.state._on?.onToggle(event, this._open);\n\t\t\t\t}\n\t\t\t}\n\t\t}, 25);\n\t};\n}\n"],"version":3}

package/dist/components/kol-input-checkbox.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{e as watchBoolean,w as watchValidator,i as isString,d as devHint,t as setState,a as a11yHint,B as propagateFocus,n as nonce,l as showExpertSlot}from"./prop.validators.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events.js";import{v as validateHideError,g as getRenderStates}from"./controller.js";import{I as InputCheckboxRadioController}from"./controller2.js";import{d as defineCustomElement$9}from"./shadow.js";import{d as defineCustomElement$8}from"./component6.js";import{d as defineCustomElement$7}from"./component5.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component.js";import{d as defineCustomElement$4}from"./component13.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const validateChecked=(e,t)=>{watchBoolean(e,"_checked",t)},validateIndeterminate=(e,t)=>{watchBoolean(e,"_indeterminate",t)};class InputCheckboxController extends InputCheckboxRadioController{constructor(e,t,i){super(e,t,i),this.setFormAssociatedCheckboxValue=e=>{this.component._checked?this.setFormAssociatedValue(e):this.setFormAssociatedValue(null)},this.component=e}validateChecked(e){validateChecked(this.component,e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateHideError(e){validateHideError(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideError&&a11yHint("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateIcon(e){this.validateIcons(e)}validateIcons(e){watchValidator(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&(isString(e.checked,1)||isString(e.indeterminate,1)||isString(e.unchecked,1))),new Set(["InputCheckboxIcons"]),e,{hooks:{beforePatch:(e,t,i)=>{t.set("_icons",Object.assign(Object.assign({},i.state._icons),e))}}})}validateIndeterminate(e){validateIndeterminate(this.component,e)}validateType(e){devHint('The "_type" prop is deprecated. Use "_variant" instead.'),this.validateVariant(e)}validateValue(e){setState(this.component,"_value",e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateVariant(e){"checkbox"===e&&(devHint("[KolCheckbox] The \"_variant\" value 'checkbox' is deprecated. Use the new value 'default' instead."),e="default"),watchValidator(this.component,"_variant",(e=>"string"==typeof e&&("button"===e||"default"===e||"switch"===e)),new Set(["String {button, default, switch}"]),e)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateHideError(this.component._hideError),this.validateIcons(this.component._icons||this.component._icon),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant||this.component._type)}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}label{cursor:pointer}kol-input{align-items:center;display:grid;justify-items:left}kol-input.default,kol-input.switch{grid-template-columns:auto 1fr}kol-input .input{align-items:center;display:grid;order:1}kol-input .input div{display:inline-flex}kol-input .input input{margin:0}kol-input label{order:2}kol-input .hint,kol-input.error>kol-alert{grid-column:span 2}kol-input kol-alert.error{order:3}kol-input .hint{order:4}.error.hidden{display:none}input{border-style:solid;border-width:2px;line-height:24px}input[type='checkbox']{appearance:none;background-color:#fff;cursor:pointer;transition:0.5s}input[type='checkbox'].kol-disabled:before{cursor:not-allowed}input[type='checkbox']:before{content:'';cursor:pointer}.default kol-icon{display:none}kol-input.required .tooltip-content .span-label::after{content:'*'}.button{display:grid;grid-template-columns:var(--a11y-min-size) auto;grid-template-areas:'error error' 'input label' 'hint hint'}.button[tabindex]:focus{cursor:inherit}.button input{display:none}.button>.error{grid-area:error}.button>label{grid-area:label}.button>.input{grid-area:input}.button>.hint{grid-area:hint}.button .icon{display:flex;align-items:center;justify-content:center;width:var(--a11y-min-size);height:var(--a11y-min-size)}.default input[type='checkbox']{height:1.5em;width:1.5em}.default input[type='checkbox']:before{display:block;height:1.5em;position:relative;width:1.5em}.default input[type='checkbox']:checked:before{border-radius:1px;border-style:solid;border-width:0 3px 3px 0;height:0.75em;left:calc(0.375em - 2px);transform:rotate(40deg) translate(-50%, -50%);top:calc(0.7125em - 2px);width:0.375em}.default input[type='checkbox']:indeterminate:before{background-color:#000;height:0.2em;left:0.24em;top:0.575em;width:0.8em}.switch .input{position:relative}.switch input[type='checkbox']{display:inline-block;height:1.7em;min-width:3.2em;position:relative;width:3.2em}.switch input[type='checkbox']::before{background-color:#000;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);position:absolute;transition:0.5s;width:1.2em}.switch input[type='checkbox']:checked::before{transform:translateX(1.5em)}.switch input[type='checkbox']:indeterminate::before{transform:translateX(0.75em)}.switch .icon{cursor:pointer;display:flex;align-items:center;justify-content:center;width:1.2em;height:1.2em;position:absolute;z-index:1;top:50%;left:4px;transform:translate(0, -50%);transition:0.5s;color:#000}.switch:has(input:checked) .icon{transform:translate(1.5em, -50%)}.switch:has(input:indeterminate) .icon{transform:translate(0.75em, -50%)}",KolInputCheckbox$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDescribedBy:e}=getRenderStates(this.state),t=showExpertSlot(this.state._label);return h(Host,null,h("kol-input",{class:{checkbox:!0,[this.state._variant]:!0,"hide-label":!!this.state._hideLabel,checked:this.state._checked},"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{slot:"label"},t?h("slot",null):this.state._label),h("div",{slot:"input"},h("kol-icon",{class:"icon",onClick:this.handleIconClick.bind(this),_icons:this.state._indeterminate?this.state._icons.indeterminate:this.state._checked?this.state._icons.checked:this.state._icons.unchecked,_label:""}),h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,checked:this.state._checked,disabled:this.state._disabled,id:this.state._id,indeterminate:this.state._indeterminate,name:this.state._name,required:this.state._required,tabIndex:this.state._tabIndex,type:"checkbox"},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propagateFocus(this.host,this.ref)},this.onChange=e=>{var t;this._checked=!this._checked,this._indeterminate=!1;const i=this._checked?this.state._value:null;stopPropagation(e),tryToDispatchKoliBriEvent("change",this.host,i),this.controller.setFormAssociatedValue(i),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,i)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._hideError=!1,this._disabled=!1,this._error=void 0,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._indeterminate=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type=void 0,this._value=!0,this._variant=void 0,this.state={_checked:!1,_hideError:!1,_icons:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-add"},_id:`id-${nonce()}`,_indeterminate:!1,_label:"",_value:!0,_variant:"default"},this.controller=new InputCheckboxController(this,"input-checkbox",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateChecked(e){this.controller.validateChecked(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcon(e){this.validateIcons(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateIndeterminate(e){this.controller.validateIndeterminate(e)}validateLabel(e){this.controller.validateLabel(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){this.controller.validateValue(e)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}handleIconClick(e){this.state._disabled||this.onChange(e)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-checkbox",{_accessKey:[1,"_access-key"],_alert:[1540],_checked:[1540],_hideError:[1540,"_hide-error"],_disabled:[4],_error:[1],_hideLabel:[4,"_hide-label"],_hint:[1],_icon:[1],_icons:[1],_id:[1],_indeterminate:[1540],_label:[1],_name:[1],_on:[16],_required:[4],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_type:[1],_value:[8],_variant:[1],state:[32]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-checkbox","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-input-checkbox":customElements.get(e)||customElements.define(e,KolInputCheckbox$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$9();break;case"kol-alert-wc":customElements.get(e)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-icon":customElements.get(e)||defineCustomElement$5();break;case"kol-input":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolInputCheckbox=KolInputCheckbox$1,defineCustomElement=defineCustomElement$1;export{KolInputCheckbox,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{e as watchBoolean,w as watchValidator,i as isString,t as setState,a as a11yHint,B as propagateFocus,n as nonce,l as showExpertSlot}from"./prop.validators.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events.js";import{v as validateHideError,g as getRenderStates}from"./controller.js";import{I as InputCheckboxRadioController}from"./controller2.js";import{d as defineCustomElement$9}from"./shadow.js";import{d as defineCustomElement$8}from"./component6.js";import{d as defineCustomElement$7}from"./component5.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component.js";import{d as defineCustomElement$4}from"./component13.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const validateChecked=(e,t)=>{watchBoolean(e,"_checked",t)},validateIndeterminate=(e,t)=>{watchBoolean(e,"_indeterminate",t)};class InputCheckboxController extends InputCheckboxRadioController{constructor(e,t,i){super(e,t,i),this.setFormAssociatedCheckboxValue=e=>{this.component._checked?this.setFormAssociatedValue(e):this.setFormAssociatedValue(null)},this.component=e}validateChecked(e){validateChecked(this.component,e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateHideError(e){validateHideError(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideError&&a11yHint("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateIcons(e){watchValidator(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&(isString(e.checked,1)||isString(e.indeterminate,1)||isString(e.unchecked,1))),new Set(["InputCheckboxIcons"]),e,{hooks:{beforePatch:(e,t,i)=>{t.set("_icons",Object.assign(Object.assign({},i.state._icons),e))}}})}validateIndeterminate(e){validateIndeterminate(this.component,e)}validateValue(e){setState(this.component,"_value",e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateVariant(e){watchValidator(this.component,"_variant",(e=>"string"==typeof e&&("button"===e||"default"===e||"switch"===e)),new Set(["String {button, default, switch}"]),e)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateHideError(this.component._hideError),this.validateIcons(this.component._icons),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}label{cursor:pointer}kol-input{align-items:center;display:grid;justify-items:left}kol-input.default,kol-input.switch{grid-template-columns:auto 1fr}kol-input .input{align-items:center;display:grid;order:1}kol-input .input div{display:inline-flex}kol-input .input input{margin:0}kol-input label{order:2}kol-input .hint,kol-input.error>kol-alert{grid-column:span 2}kol-input kol-alert.error{order:3}kol-input .hint{order:4}.error.hidden{display:none}input{border-style:solid;border-width:2px;line-height:24px}input[type='checkbox']{appearance:none;background-color:#fff;cursor:pointer;transition:0.5s}input[type='checkbox'].kol-disabled:before{cursor:not-allowed}input[type='checkbox']:before{content:'';cursor:pointer}.default kol-icon{display:none}kol-input.required .tooltip-content .span-label::after{content:'*'}.button{display:grid;grid-template-columns:var(--a11y-min-size) auto;grid-template-areas:'error error' 'input label' 'hint hint'}.button[tabindex]:focus{cursor:inherit}.button input{display:none}.button>.error{grid-area:error}.button>label{grid-area:label}.button>.input{grid-area:input}.button>.hint{grid-area:hint}.button .icon{display:flex;align-items:center;justify-content:center;width:var(--a11y-min-size);height:var(--a11y-min-size)}.default input[type='checkbox']{height:1.5em;width:1.5em}.default input[type='checkbox']:before{display:block;height:1.5em;position:relative;width:1.5em}.default input[type='checkbox']:checked:before{border-radius:1px;border-style:solid;border-width:0 3px 3px 0;height:0.75em;left:calc(0.375em - 2px);transform:rotate(40deg) translate(-50%, -50%);top:calc(0.7125em - 2px);width:0.375em}.default input[type='checkbox']:indeterminate:before{background-color:#000;height:0.2em;left:0.24em;top:0.575em;width:0.8em}.switch .input{position:relative}.switch input[type='checkbox']{display:inline-block;height:1.7em;min-width:3.2em;position:relative;width:3.2em}.switch input[type='checkbox']::before{background-color:#000;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);position:absolute;transition:0.5s;width:1.2em}.switch input[type='checkbox']:checked::before{transform:translateX(1.5em)}.switch input[type='checkbox']:indeterminate::before{transform:translateX(0.75em)}.switch .icon{cursor:pointer;display:flex;align-items:center;justify-content:center;width:1.2em;height:1.2em;position:absolute;z-index:1;top:50%;left:4px;transform:translate(0, -50%);transition:0.5s;color:#000}.switch:has(input:checked) .icon{transform:translate(1.5em, -50%)}.switch:has(input:indeterminate) .icon{transform:translate(0.75em, -50%)}",KolInputCheckbox$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDescribedBy:e}=getRenderStates(this.state),t=showExpertSlot(this.state._label);return h(Host,null,h("kol-input",{class:{checkbox:!0,[this.state._variant]:!0,"hide-label":!!this.state._hideLabel,checked:this.state._checked},"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{slot:"label"},t?h("slot",{name:"expert"}):this.state._label),h("div",{slot:"input"},h("kol-icon",{class:"icon",onClick:this.handleIconClick.bind(this),_icons:this.state._indeterminate?this.state._icons.indeterminate:this.state._checked?this.state._icons.checked:this.state._icons.unchecked,_label:""}),h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,checked:this.state._checked,disabled:this.state._disabled,id:this.state._id,indeterminate:this.state._indeterminate,name:this.state._name,required:this.state._required,tabIndex:this.state._tabIndex,type:"checkbox"},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propagateFocus(this.host,this.ref)},this.onChange=e=>{var t;this._checked=!this._checked,this._indeterminate=!1;const i=this._checked?this.state._value:null;stopPropagation(e),tryToDispatchKoliBriEvent("change",this.host,i),this.controller.setFormAssociatedValue(i),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,i)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._hideError=!1,this._disabled=!1,this._error=void 0,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._indeterminate=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=!0,this._variant="default",this.state={_checked:!1,_hideError:!1,_icons:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-add"},_id:`id-${nonce()}`,_indeterminate:!1,_label:"",_value:!0,_variant:"default"},this.controller=new InputCheckboxController(this,"input-checkbox",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateChecked(e){this.controller.validateChecked(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateIndeterminate(e){this.controller.validateIndeterminate(e)}validateLabel(e){this.controller.validateLabel(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}handleIconClick(e){this.state._disabled||this.onChange(e)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-checkbox",{_accessKey:[1,"_access-key"],_alert:[1540],_checked:[1540],_hideError:[1540,"_hide-error"],_disabled:[4],_error:[1],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_indeterminate:[1540],_label:[1],_name:[1],_on:[16],_required:[4],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[8],_variant:[1],state:[32]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-checkbox","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-input-checkbox":customElements.get(e)||customElements.define(e,KolInputCheckbox$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$9();break;case"kol-alert-wc":customElements.get(e)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-icon":customElements.get(e)||defineCustomElement$5();break;case"kol-input":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolInputCheckbox=KolInputCheckbox$1,defineCustomElement=defineCustomElement$1;export{KolInputCheckbox,defineCustomElement};