@public-ui/components 1.7.11 → 1.7.13

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;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}:host>abbr{cursor:help}",KolAbbrDefaultStyle0=defaultStyleCss,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,{required:!0})}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:KolAbbrDefaultStyle0}}},[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;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host>abbr{cursor:help}",KolAbbrDefaultStyle0=defaultStyleCss,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,{key:"708351b62d4ddfaf9439718bf7051ed6e12b4486"},h("abbr",{key:"b371ff0646d639bd497ed6fe92717905ff211d39","aria-labelledby":this.nonce,role:"definition",tabindex:"0",title:this.state._label},h("span",{key:"e36ec17f92845711268b3bd960913dc6c56bce3e",title:""},h("slot",{key:"3278ea5174dd48858f631cb1c03bff4d761a211e"}))),h("kol-tooltip-wc",{key:"c1df9a9f393550710ccbd84a9e0545f6721079b0",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label}))}validateLabel(t){validateLabel(this,t,{required:!0})}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:KolAbbrDefaultStyle0}}},[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};

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

@@ -1 +1 @@
-{"file":"kol-abbr.js","mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,81BAA81B,CAAC;AACv3B,6BAAe,eAAe;;MCgBjBA,SAAO;;;;;QACF,UAAK,GAAG,KAAK,EAAE,CAAC;;6BAwBqB,KAAK;;qBAc3B;YAC/B,MAAM,EAAE,GAAG;YACX,aAAa,EAAE,KAAK;SACpB;;IAvCM,MAAM;QACZ,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;KACF;IAsCM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,oBAAoB,CAAC,KAA4B;QACvD,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAClC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\t\trequired: true,\n\t\t});\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,q4BAAq4B,CAAC;AAC95B,6BAAe,eAAe;;MCgBjBA,SAAO;;;;;QACF,UAAK,GAAG,KAAK,EAAE,CAAC;;6BAwBqB,KAAK;;qBAc3B;YAC/B,MAAM,EAAE,GAAG;YACX,aAAa,EAAE,KAAK;SACpB;;IAvCM,MAAM;QACZ,QACC,EAAC,IAAI,uDAEJ,gFAAuB,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IACzF,6DAAM,KAAK,EAAC,EAAE,IACb,8DAAQ,CACF,CACD,EACP,uEAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,CACzG,EACN;KACF;IAsCM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,oBAAoB,CAAC,KAA4B;QACvD,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAClC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\t\trequired: true,\n\t\t});\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}

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{m as featureHint,n as nonce,q as propagateFocus,r 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;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.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}}@media print{.accordion:not(.open) .animation-wrapper{display:none}}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}",KolAccordionDefaultStyle0=defaultStyleCss;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.catchRef=e=>{propagateFocus(this.host,e)},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",{ref:this.catchRef,_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,{required:!0})}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)}get host(){return this}static get watchers(){return{_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}static get style(){return{default:KolAccordionDefaultStyle0}}},[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{m as featureHint,n as nonce,q as propagateFocus,r 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;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}: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}}@media print{.accordion:not(.open) .animation-wrapper{display:none}}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}",KolAccordionDefaultStyle0=defaultStyleCss;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.catchRef=e=>{propagateFocus(this.host,e)},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,{key:"8c686a1ace1a5590acab87ea8f163256358ebf6d"},h("div",{key:"4f5503a545568c8f87fe2111c5136f9f16f490f4",class:{accordion:!0,open:!0===this.state._open}},h("kol-heading-wc",{key:"9691df7d0623bb39c06be4f8286c5658aecdcb4c",_label:"",_level:this.state._level},h("kol-button-wc",{key:"3410de38f55311a87821e571762d4683e2062fa8",ref:this.catchRef,_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",{key:"3da23d8ba623e5e529b2c2394a33e1870ebdd014",class:"header"},h("slot",{key:"b632cf66243ccb977959fddfb34db365ed38222d",name:"header"})),h("div",{key:"11da544ccaa00747092f677cc459e09d82b31012",class:"wrapper"},h("div",{key:"68c299ae9645bf16aa1fb1a1ede356b14b4f0aef",class:"animation-wrapper"},h("div",{key:"508dfb7024c87ec0200ec2e21be2fa7e14bb8e05","aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},h("slot",{key:"9d26e7477d5ce341ce43e68d023c4d5ea0d28d27",name:"content"})," ",h("slot",{key:"656c38a9e4f3aceceb5e859007b2982483c3f946"}))))))}validateHeading(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e,{required:!0})}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)}get host(){return this}static get watchers(){return{_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}static get style(){return{default:KolAccordionDefaultStyle0}}},[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};

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

@@ -1 +1 @@
-{"file":"kol-accordion.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,q1CAAq1C,CAAC;AAC92C,kCAAe,eAAe;;ACa9B,WAAW,CAAC;;;;yCAI6B,CAAC,CAAC;AAC3C,WAAW,CAAC,iEAAiE,CAAC,CAAC;MAelEA,cAAY;;;;;QAEP,UAAK,GAAG,KAAK,EAAE,CAAC;QAEhB,aAAQ,GAAG,CAAC,GAA4B;YACxD,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;SAC/B,CAAC;QA0GM,YAAO,GAAG,CAAC,KAAY;YAC9B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;YAQzB,UAAU,CAAC;;gBACV,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;oBAClD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC;iBACnD;aACD,CAAC,CAAC;SACH,CAAC;;;sBApEqC,CAAC;;qBAWyB,KAAK;qBAEtC;YAC/B,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,CAAC;SACT;;IAlEM,MAAM;QACZ,QACC,EAAC,IAAI,QACJ,WACC,KAAK,EAAE;gBACN,SAAS,EAAE,IAAI;gBACf,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI;aAC/B,IAED,sBAAgB,MAAM,EAAC,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAClD,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAElB,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,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,EACN,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,YAAM,IAAI,EAAC,SAAS,GAAQ,OAC5B,eAAQ,CACH,CACD,CACD,CACD,CACA,EACN;KACF;IAmCM,eAAe,CAAC,KAAc;QACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAoB;QACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC/B;IAGM,UAAU,CAAC,KAAiC;QAClD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,UAAU,EAAE;YACvF,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;SAC7B;KACD;IAGM,YAAY,CAAC,KAAoB;QACvC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC1B;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\n/* @see https://github.com/public-ui/kolibri/issues/5952 */\n@media print {\n\t.accordion:not(.open) .animation-wrapper {\n\t\tdisplay: none;\n\t}\n}\n\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, Element, 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 { propagateFocus } from '../../utils/reuse';\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\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<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\tref={this.catchRef}\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\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(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,43CAA43C,CAAC;AACr5C,kCAAe,eAAe;;ACa9B,WAAW,CAAC;;;;yCAI6B,CAAC,CAAC;AAC3C,WAAW,CAAC,iEAAiE,CAAC,CAAC;MAelEA,cAAY;;;;;QAEP,UAAK,GAAG,KAAK,EAAE,CAAC;QAEhB,aAAQ,GAAG,CAAC,GAA4B;YACxD,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;SAC/B,CAAC;QA0GM,YAAO,GAAG,CAAC,KAAY;YAC9B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;YAQzB,UAAU,CAAC;;gBACV,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;oBAClD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC;iBACnD;aACD,CAAC,CAAC;SACH,CAAC;;;sBApEqC,CAAC;;qBAWyB,KAAK;qBAEtC;YAC/B,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,CAAC;SACT;;IAlEM,MAAM;QACZ,QACC,EAAC,IAAI,uDACJ,4DACC,KAAK,EAAE;gBACN,SAAS,EAAE,IAAI;gBACf,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI;aAC/B,IAED,uEAAgB,MAAM,EAAC,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAClD,sEACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAElB,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,4DAAK,KAAK,EAAC,QAAQ,IAClB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,EACN,4DAAK,KAAK,EAAC,SAAS,IACnB,4DAAK,KAAK,EAAC,mBAAmB,IAC7B,2EAAkB,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,EAAE,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,KAAK,IAChG,6DAAM,IAAI,EAAC,SAAS,GAAQ,OAC5B,8DAAQ,CACH,CACD,CACD,CACD,CACA,EACN;KACF;IAmCM,eAAe,CAAC,KAAc;QACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAoB;QACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC/B;IAGM,UAAU,CAAC,KAAiC;QAClD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,UAAU,EAAE;YACvF,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;SAC7B;KACD;IAGM,YAAY,CAAC,KAAoB;QACvC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC1B;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\n/* @see https://github.com/public-ui/kolibri/issues/5952 */\n@media print {\n\t.accordion:not(.open) .animation-wrapper {\n\t\tdisplay: none;\n\t}\n}\n\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, Element, 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 { propagateFocus } from '../../utils/reuse';\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\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<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\tref={this.catchRef}\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\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(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}

package/dist/components/kol-avatar.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{d as defineCustomElement$2}from"./component7.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.container{border-radius:50%;overflow:hidden;width:100px;height:100px}.image{width:100%;height:100%}.initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#d3d3d3;font-size:2rem}",KolAvatarDefaultStyle0=defaultStyleCss,KolAvatar$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._src=void 0,this._label=void 0}render(){return h(Host,null,h("kol-avatar-wc",{_src:this._src,_label:this._label}))}static get style(){return{default:KolAvatarDefaultStyle0}}},[33,"kol-avatar",{_src:[1],_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar","kol-avatar-wc"].forEach((t=>{switch(t){case"kol-avatar":customElements.get(t)||customElements.define(t,KolAvatar$1);break;case"kol-avatar-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolAvatar=KolAvatar$1,defineCustomElement=defineCustomElement$1;export{KolAvatar,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{d as defineCustomElement$2}from"./component7.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host{display:block}.container{border-radius:50%;overflow:hidden;width:100px;height:100px}.image{width:100%;height:100%}.initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#d3d3d3;font-size:2rem}",KolAvatarDefaultStyle0=defaultStyleCss,KolAvatar$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._src=void 0,this._label=void 0}render(){return h(Host,{key:"5b96fc500d56c6996c034b7e847f4441a28fcae2"},h("kol-avatar-wc",{key:"a7a695f8d2a6ab665c891b6a558a0c23df3c3d06",_src:this._src,_label:this._label}))}static get style(){return{default:KolAvatarDefaultStyle0}}},[33,"kol-avatar",{_src:[1],_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar","kol-avatar-wc"].forEach((e=>{switch(e){case"kol-avatar":customElements.get(e)||customElements.define(e,KolAvatar$1);break;case"kol-avatar-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolAvatar=KolAvatar$1,defineCustomElement=defineCustomElement$1;export{KolAvatar,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-avatar.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,yjCAAyjC,CAAC;AACllC,+BAAe,eAAe;;MCUjBA,WAAS;;;;;;;;IACd,MAAM;QACZ,QACC,EAAC,IAAI,QACJ,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAkB,CAC/D,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAvatar"],"sources":["src/components/avatar/style.css?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n.container {\n\tborder-radius: 50%;\n\toverflow: hidden;\n\t/*theme?*/\n\twidth: 100px;\n\theight: 100px;\n}\n.image {\n\twidth: 100%;\n\theight: 100%;\n}\n.initials {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/*theme?*/\n\tbackground: #d3d3d3;\n\tfont-size: 2rem;\n}\n","import { Component, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-avatar-wc _src={this._src} _label={this._label}></kol-avatar-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"version":3}
+{"file":"kol-avatar.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,gmCAAgmC,CAAC;AACznC,+BAAe,eAAe;;MCUjBA,WAAS;;;;;;;;IACd,MAAM;QACZ,QACC,EAAC,IAAI,uDACJ,sEAAe,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAkB,CAC/D,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAvatar"],"sources":["src/components/avatar/style.css?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n.container {\n\tborder-radius: 50%;\n\toverflow: hidden;\n\t/*theme?*/\n\twidth: 100px;\n\theight: 100px;\n}\n.image {\n\twidth: 100%;\n\theight: 100%;\n}\n.initials {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/*theme?*/\n\tbackground: #d3d3d3;\n\tfont-size: 2rem;\n}\n","import { Component, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-avatar-wc _src={this._src} _label={this._label}></kol-avatar-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"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{E 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;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.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'}",KolBreadcrumbDefaultStyle0=defaultStyleCss,KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.renderLink=(e,t)=>{const a=this.state._links.length-1,l=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,l?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(){var e;return h(Host,null,h("nav",{"aria-label":null!==(e=this.state._label)&&void 0!==e?e:""},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,{defaultValue:"…"}),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:KolBreadcrumbDefaultStyle0}}},[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{E 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;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}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'}",KolBreadcrumbDefaultStyle0=defaultStyleCss,KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.renderLink=(e,t)=>{const a=this.state._links.length-1,i=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,i?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(){var e;return h(Host,{key:"82d914b48822aac7b981ed22d2e90d85e8644a3f"},h("nav",{key:"f5de4c29db727db5a3a41246450b9a22293d6483","aria-label":null!==(e=this.state._label)&&void 0!==e?e:""},h("ul",{key:"7f1dd301a992981f0878e6eea21c14dba15b5774"},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,{defaultValue:"…"}),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:KolBreadcrumbDefaultStyle0}}},[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};

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

@@ -1 +1 @@
-{"file":"kol-breadcrumb.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ujCAAujC,CAAC;AAChlC,mCAAe,eAAe;;MCgBjBA,eAAa;;;;;QACR,eAAU,GAAG,CAAC,IAAyB,EAAE,KAAa;YACtE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC;YACpD,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;SACF,CAAC;;;;qBAoC8B;YAC/B,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,EAAE;SACV;;IArCM,MAAM;;QACZ,QACC,EAAC,IAAI,QACJ,yBAAiB,MAAA,IAAI,CAAC,KAAK,CAAC,MAAM,mCAAI,EAAE,IACvC,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;KACF;IA4BM,iBAAiB,CAAC,KAAc;QACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAClC;QACD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,YAAY,EAAE,GAAG;SACjB,CAAC,CAAC;QACH,yBAAyB,CAAC,KAAK,CAAC,CAAC;QACjC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC/B;IAGM,aAAa,CAAC,KAAgC;QACpD,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KAC5C;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACpE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEM,oBAAoB;QAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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: '…',\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\t\tdefaultValue: '…',\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || 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,8lCAA8lC,CAAC;AACvnC,mCAAe,eAAe;;MCgBjBA,eAAa;;;;;QACR,eAAU,GAAG,CAAC,IAAyB,EAAE,KAAa;YACtE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC;YACpD,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;SACF,CAAC;;;;qBAoC8B;YAC/B,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,EAAE;SACV;;IArCM,MAAM;;QACZ,QACC,EAAC,IAAI,uDACJ,0EAAiB,MAAA,IAAI,CAAC,KAAK,CAAC,MAAM,mCAAI,EAAE,IACvC,6DACE,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;KACF;IA4BM,iBAAiB,CAAC,KAAc;QACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAGM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAClC;QACD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,YAAY,EAAE,GAAG;SACjB,CAAC,CAAC;QACH,yBAAyB,CAAC,KAAK,CAAC,CAAC;QACjC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC/B;IAGM,aAAa,CAAC,KAAgC;QACpD,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KAC5C;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACpE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEM,oBAAoB;QAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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: '…',\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\t\tdefaultValue: '…',\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || 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}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{d as defineCustomElement$2}from"./component10.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}:host>kol-button-group-wc{display:flex;flex-wrap:wrap}",KolButtonGroupDefaultStyle0=defaultStyleCss,KolButtonGroup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow()}render(){return h(Host,null,h("kol-button-group-wc",null,h("slot",null)))}static get style(){return{default:KolButtonGroupDefaultStyle0}}},[33,"kol-button-group"]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-group","kol-button-group-wc"].forEach((t=>{switch(t){case"kol-button-group":customElements.get(t)||customElements.define(t,KolButtonGroup$1);break;case"kol-button-group-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolButtonGroup=KolButtonGroup$1,defineCustomElement=defineCustomElement$1;export{KolButtonGroup,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{d as defineCustomElement$2}from"./component10.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host>kol-button-group-wc{display:flex;flex-wrap:wrap}",KolButtonGroupDefaultStyle0=defaultStyleCss,KolButtonGroup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow()}render(){return h(Host,{key:"138608450f886e6de9fd5f9e35b5d17c555abe95"},h("kol-button-group-wc",{key:"558bdfc37d4ec8bb44f60e75b57469d85c939b51"},h("slot",{key:"c702a187186d9e28ed132628719934efe8322905"})))}static get style(){return{default:KolButtonGroupDefaultStyle0}}},[33,"kol-button-group"]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-group","kol-button-group-wc"].forEach((t=>{switch(t){case"kol-button-group":customElements.get(t)||customElements.define(t,KolButtonGroup$1);break;case"kol-button-group-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolButtonGroup=KolButtonGroup$1,defineCustomElement=defineCustomElement$1;export{KolButtonGroup,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-button-group.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,63BAA63B,CAAC;AACt5B,oCAAe,eAAe;;MCUjBA,gBAAc;;;;;;IACnB,MAAM;QACZ,QACC,EAAC,IAAI,QACJ,+BACC,eAAQ,CACa,CAChB,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonGroup"],"sources":["src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","src/components/button-group/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n:host > kol-button-group-wc {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-button-group.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,o6BAAo6B,CAAC;AAC77B,oCAAe,eAAe;;MCUjBA,gBAAc;;;;;;IACnB,MAAM;QACZ,QACC,EAAC,IAAI,uDACJ,8EACC,8DAAQ,CACa,CAChB,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonGroup"],"sources":["src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","src/components/button-group/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n:host > kol-button-group-wc {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"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{q 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;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.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}",KolButtonLinkDefaultStyle0=defaultStyleCss,KolButtonLink$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{propagateFocus(this.host,e)},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:KolButtonLinkDefaultStyle0}}},[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{q 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;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}: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}.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}",KolButtonLinkDefaultStyle0=defaultStyleCss,KolButtonLink$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{propagateFocus(this.host,e)},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,{key:"45b774f3a699e10d33cc71b48e07137501ca191f"},h("kol-button-wc",{key:"cb5dbe3be87a23d23855879710c1b585f4cf8376",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",{key:"2da5eb21f97a0f00f3e80407c2436287ff419b54",name:"expert",slot:"expert"})))}get host(){return this}static get style(){return{default:KolButtonLinkDefaultStyle0}}},[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};

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

@@ -1 +1 @@
-{"file":"kol-button-link.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,gxCAAgxC,CAAC;AACzyC,mCAAe,eAAe;;MCuBjBA,eAAa;;;;;QAGR,aAAQ,GAAG,CAAC,GAA4B;YACxD,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;SAC/B,CAAC;;;;;;;yBAyEmC,KAAK;0BAOJ,KAAK;;;;;;;;;;;6BAyDW,KAAK;qBAKf,QAAQ;;;IA5I7C,MAAM;QACZ,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;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_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,gxCAAgxC,CAAC;AACzyC,mCAAe,eAAe;;MCuBjBA,eAAa;;;;;QAGR,aAAQ,GAAG,CAAC,GAA4B;YACxD,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;SAC/B,CAAC;;;;;;;yBAyEmC,KAAK;0BAOJ,KAAK;;;;;;;;;;;6BAyDW,KAAK;qBAKf,QAAQ;;;IA5I7C,MAAM;QACZ,QACC,EAAC,IAAI,uDACJ,sEACC,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,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC1B,CACV,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_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}

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{f as watchBoolean,r 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;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}:host>div.card{height:100%;position:relative}.close{position:absolute;top:0;right:0}",KolCardDefaultStyle0=defaultStyleCss,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,{defaultValue:"…"})}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:KolCardDefaultStyle0}}},[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{f as watchBoolean,r 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;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host>div.card{height:100%;position:relative}.close{position:absolute;top:0;right:0}",KolCardDefaultStyle0=defaultStyleCss,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,{key:"2b8c626fafb032b61ef3743f3a04102ede6488d6"},h("div",{key:"3ccc471fd5fda77531de9d062cbdb0daefac6b54",class:"card"},h("div",{key:"aa05b50858b4a628e0fb5708e4893f87888ce436",class:"header"},h("kol-heading-wc",{key:"1117ed09b7a7fb84f6fe6272f67e7742d975b1c2",_label:this.state._label,_level:this.state._level}),h("slot",{key:"bcd0bbaa9f0ae4eefae2b69c3322fe03ff703cd6",name:"header"})),h("div",{key:"e431e1fd02b10da6f924bbf8477830768617e812",class:"content"},h("slot",{key:"5936c807271e2a594c7fae849ff45b669f4823f9",name:"content"}),h("slot",{key:"6267e9a4d99c8be762e286cacd4611aa09f5e5d8"})),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,{defaultValue:"…"})}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:KolCardDefaultStyle0}}},[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};

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 type { Generic } from 'adopted-style-sheets';\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 * @deprecated Use _label.\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: '…', // ⚠ required\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: HasFooterPropType): void {\n\t\tvalidateHasFooter(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t/**\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\t\tdefaultValue: '…',\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.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":"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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 type { Generic } from 'adopted-style-sheets';\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 * @deprecated Use _label.\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: '…', // ⚠ required\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: HasFooterPropType): void {\n\t\tvalidateHasFooter(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t/**\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\t\tdefaultValue: '…',\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.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}

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{q as propagateFocus,r 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.isClosing||!this.detailsElement.open?this.open():(this.isExpanding||this.detailsElement.open)&&this.collapse()}open(){this.detailsElement.open=!0,window.requestAnimationFrame(this.expand.bind(this))}expand(){this.isExpanding=!0,this.animateContentHeight("expand")}collapse(){this.isClosing=!0,this.animateContentHeight("collapse")}animateContentHeight(t){let e="expand"===t?0:this.contentElement.offsetHeight,i="expand"===t?this.contentElement.offsetHeight:0;this.animation&&(e=this.contentElement.offsetHeight,this.animation.cancel(),"expand"===t&&(i=this.contentElement.offsetHeight)),this.animation=this.contentElement.animate({height:[`${e}px`,`${i}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"===t?this.isExpanding=!1:this.isClosing=!1}),{once:!0})}onAnimationFinish(){this.detailsElement.open=this.isExpanding,this.animation=void 0,this.isClosing=!1,this.isExpanding=!1}}const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.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}.content{overflow:hidden}details>kol-indented-text{margin:0.25em 0 0 0.5em}",KolDetailsDefaultStyle0=defaultStyleCss,KolDetails$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.summaryElement=t,propagateFocus(this.host,this.summaryElement)},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:this.catchRef},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",{"aria-hidden":!1===this.state._open?"true":void 0,class:"content",ref:t=>this.contentElement=t},h("kol-indented-text",null,h("slot",null)))))}validateLabel(t){validateLabel(this,t,{required:!0})}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:KolDetailsDefaultStyle0}}},[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{q as propagateFocus,r 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(e,t,i){this.detailsElement=e,this.summaryElement=t,this.contentElement=i,this.isClosing=!1,this.isExpanding=!1,this.summaryElement.addEventListener("click",this.handleSummaryClick.bind(this))}handleSummaryClick(e){e.preventDefault(),this.isClosing||!this.detailsElement.open?this.open():(this.isExpanding||this.detailsElement.open)&&this.collapse()}open(){this.detailsElement.open=!0,window.requestAnimationFrame(this.expand.bind(this))}expand(){this.isExpanding=!0,this.animateContentHeight("expand")}collapse(){this.isClosing=!0,this.animateContentHeight("collapse")}animateContentHeight(e){let t="expand"===e?0:this.contentElement.offsetHeight,i="expand"===e?this.contentElement.offsetHeight:0;this.animation&&(t=this.contentElement.offsetHeight,this.animation.cancel(),"expand"===e&&(i=this.contentElement.offsetHeight)),this.animation=this.contentElement.animate({height:[`${t}px`,`${i}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}}const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}: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}.content{overflow:hidden}details>kol-indented-text{margin:0.25em 0 0 0.5em}",KolDetailsDefaultStyle0=defaultStyleCss,KolDetails$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.summaryElement=e,propagateFocus(this.host,this.summaryElement)},this.handleToggle=e=>{clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var t,i,n,s;Boolean(null===(t=this.detailsElement)||void 0===t?void 0:t.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(e,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,{key:"a4b246a37223bdcf0d956b35d245aa4451e819e0"},h("details",{key:"80bae99a4b39285e81c32a3e85d9c558071b1032",ref:e=>{this.detailsElement=e},onToggle:this.handleToggle},h("summary",{key:"cac9c2810f0e782df5620788c104c0432a643744",ref:this.catchRef},this.state._open?h("kol-icon",{_label:"",_icons:"codicon codicon-chevron-down"}):h("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),h("span",{key:"185843eab9759cac6ce24a535b12d9b12faad9ed"},this.state._label)),h("div",{key:"027cd60a0956191b4465129e2170756483e72b08","aria-hidden":!1===this.state._open?"true":void 0,class:"content",ref:e=>this.contentElement=e},h("kol-indented-text",{key:"a6c79680210a15ccd08fba0d01ded42d360de0d7"},h("slot",{key:"ad55233de0422914a80e7bd3bd2456a84c2edc3f"})))))}validateLabel(e){validateLabel(this,e,{required:!0})}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onToggle&&setState(this,"_on",e)}validateOpen(e){validateOpen(this,e)}validateSummary(e){this.validateLabel(e)}componentWillLoad(){this.validateLabel(this._label||this._summary),this.validateOn(this._on),this.validateOpen(this._open)}componentDidLoad(){if(this.detailsElement&&this.summaryElement&&this.contentElement){const e=new DetailsAnimationController(this.detailsElement,this.summaryElement,this.contentElement);this.state._open&&e.open()}}get host(){return this}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"],_summary:["validateSummary"]}}static get style(){return{default:KolDetailsDefaultStyle0}}},[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((e=>{switch(e){case"kol-details":customElements.get(e)||customElements.define(e,KolDetails$1);break;case"kol-icon":customElements.get(e)||defineCustomElement$3();break;case"kol-indented-text":customElements.get(e)||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":";;;;;;;;;;;MAEqB,0BAA0B;IAK9C,YAAoB,cAAkC,EAAU,cAA2B,EAAU,cAA2B;QAA5G,mBAAc,GAAd,cAAc,CAAoB;QAAU,mBAAc,GAAd,cAAc,CAAa;QAAU,mBAAc,GAAd,cAAc,CAAa;QAHxH,cAAS,GAAG,KAAK,CAAC;QAClB,gBAAW,GAAG,KAAK,CAAC;QAG3B,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAClF;IAEO,kBAAkB,CAAC,KAAiB;QAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE;YAChD,IAAI,CAAC,IAAI,EAAE,CAAC;SACZ;aAAM,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE;YACxD,IAAI,CAAC,QAAQ,EAAE,CAAC;SAChB;KACD;IAEM,IAAI;QACV,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC;QAChC,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KACrD;IAEO,MAAM;QACb,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEO,QAAQ;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC;KACtC;IAEO,oBAAoB,CAAC,SAAgC;QAC5D,IAAI,WAAW,GAAG,SAAS,KAAK,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC;QAChF,IAAI,SAAS,GAAG,SAAS,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,GAAG,CAAC,CAAC;QAM9E,IAAI,IAAI,CAAC,SAAS,EAAE;YACnB,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC;YAC/C,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,SAAS,KAAK,QAAQ,EAAE;gBAC3B,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC;aAC7C;SACD;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAC3C;YACC,MAAM,EAAE,CAAC,GAAG,WAAW,IAAI,EAAE,GAAG,SAAS,IAAI,CAAC;SAC9C,EACD;YACC,QAAQ,EAAE,UAAU,CAAC,0BAA0B,CAAC,CAAC,OAAO,GAAG,CAAC,GAAG,GAAG;YAClE,MAAM,EAAE,UAAU;SAClB,CACD,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAC9B,QAAQ,EACR;YACC,IAAI,CAAC,iBAAiB,EAAE,CAAC;SACzB,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACd,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAC9B,QAAQ,EACR;YACC,IAAI,SAAS,KAAK,QAAQ,EAAE;gBAC3B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;aACzB;iBAAM;gBACN,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACvB;SACD,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACd,CAAC;KACF;IAEO,iBAAiB;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;QAC5C,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;KACzB;;;ACvFF,MAAM,eAAe,GAAG,4qCAA4qC,CAAC;AACrsC,gCAAe,eAAe;;MCmBjBA,YAAU;;;;;QAML,aAAQ,GAAG,CAAC,GAAiB;YAC7C,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;YAC1B,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;SAC/C,CAAC;QA6FM,iBAAY,GAAG,CAAC,KAAY;YACnC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC;;gBAC/B,MAAM,IAAI,GAAG,OAAO,CAAC,MAAA,IAAI,CAAC,cAAc,0CAAE,IAAI,CAAC,CAAC;gBAChD,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;oBAE9B,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,MAAA,IAAI,CAAC,cAAc,0CAAE,IAAI,CAAC,CAAC;oBAGhD,yBAAyB,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAG3D,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAA,KAAK,UAAU,EAAE;wBACnD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;qBAC5C;iBACD;aACD,EAAE,EAAE,CAAC,CAAC;SACP,CAAC;;;qBAvE+D,KAAK;;qBAQtC;YAC/B,MAAM,EAAE,GAAG;YACX,GAAG,EAAE,EAAE;SACP;;IAhDM,MAAM;QACZ,QACC,EAAC,IAAI,QACJ,eACC,GAAG,EAAE,CAAC,EAAE;gBACP,IAAI,CAAC,cAAc,GAAG,EAAwB,CAAC;aAC/C,EACD,QAAQ,EAAE,IAAI,CAAC,YAAY,IAE3B,eAAS,GAAG,EAAE,IAAI,CAAC,QAAQ,IACzB,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,gBAAU,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,8BAA8B,GAAG,GAAG,gBAAU,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,+BAA+B,GAAG,EAChJ,gBAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ,CACvB,EACV,0BAAkB,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,EAAE,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,IACnI,6BACC,eAAQ,CACW,CACf,CACG,CACJ,EACN;KACF;IA8BM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,UAAU,CAAC,EAAmB;QACpC,IAAI,OAAO,EAAE,KAAK,QAAQ,IAAI,EAAE,KAAK,IAAI,IAAI,OAAO,EAAE,CAAC,QAAQ,KAAK,UAAU,EAAE;YAC/E,QAAQ,CAAiB,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;SAC1C;KACD;IAGM,YAAY,CAAC,KAAe;QAClC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC1B;IAGM,eAAe,CAAC,KAAc;QACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC9B;IAEM,gBAAgB;QACtB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,EAAE;YACtE,MAAM,mBAAmB,GAAG,IAAI,0BAA0B,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YAC1H,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;gBACrB,mBAAmB,CAAC,IAAI,EAAE,CAAC;aAC3B;SACD;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\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\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.animateContentHeight('expand');\n\t}\n\n\tprivate collapse() {\n\t\tthis.isClosing = true;\n\t\tthis.animateContentHeight('collapse');\n\t}\n\n\tprivate animateContentHeight(direction: 'expand' | 'collapse') {\n\t\tlet startHeight = direction === 'expand' ? 0 : this.contentElement.offsetHeight;\n\t\tlet endHeight = direction === 'expand' ? this.contentElement.offsetHeight : 0;\n\n\t\t/**\n\t\t * Override start and end height, when an animation is ongoing. During the animation, offsetHeight reflects the actual current height as it's being animated.\n\t\t * After canceling the animation, it reverts to the full height of the content container.\n\t\t */\n\t\tif (this.animation) {\n\t\t\tstartHeight = this.contentElement.offsetHeight;\n\t\t\tthis.animation.cancel();\n\t\t\tif (direction === 'expand') {\n\t\t\t\tendHeight = this.contentElement.offsetHeight;\n\t\t\t}\n\t\t}\n\n\t\tthis.animation = this.contentElement.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}\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}\n.content {\n\toverflow: hidden;\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';\nimport { propagateFocus } from '../../utils/reuse';\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\tprivate readonly catchRef = (ref?: HTMLElement) => {\n\t\tthis.summaryElement = ref;\n\t\tpropagateFocus(this.host, this.summaryElement);\n\t};\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={this.catchRef}>\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 aria-hidden={this.state._open === false ? 'true' : undefined} 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: '…', // ⚠ required\n\t\t_on: {},\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_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":";;;;;;;;;;;MAEqB,0BAA0B;IAK9C,YAAoB,cAAkC,EAAU,cAA2B,EAAU,cAA2B;QAA5G,mBAAc,GAAd,cAAc,CAAoB;QAAU,mBAAc,GAAd,cAAc,CAAa;QAAU,mBAAc,GAAd,cAAc,CAAa;QAHxH,cAAS,GAAG,KAAK,CAAC;QAClB,gBAAW,GAAG,KAAK,CAAC;QAG3B,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAClF;IAEO,kBAAkB,CAAC,KAAiB;QAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE;YAChD,IAAI,CAAC,IAAI,EAAE,CAAC;SACZ;aAAM,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE;YACxD,IAAI,CAAC,QAAQ,EAAE,CAAC;SAChB;KACD;IAEM,IAAI;QACV,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC;QAChC,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KACrD;IAEO,MAAM;QACb,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEO,QAAQ;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC;KACtC;IAEO,oBAAoB,CAAC,SAAgC;QAC5D,IAAI,WAAW,GAAG,SAAS,KAAK,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC;QAChF,IAAI,SAAS,GAAG,SAAS,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,GAAG,CAAC,CAAC;QAM9E,IAAI,IAAI,CAAC,SAAS,EAAE;YACnB,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC;YAC/C,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,SAAS,KAAK,QAAQ,EAAE;gBAC3B,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC;aAC7C;SACD;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAC3C;YACC,MAAM,EAAE,CAAC,GAAG,WAAW,IAAI,EAAE,GAAG,SAAS,IAAI,CAAC;SAC9C,EACD;YACC,QAAQ,EAAE,UAAU,CAAC,0BAA0B,CAAC,CAAC,OAAO,GAAG,CAAC,GAAG,GAAG;YAClE,MAAM,EAAE,UAAU;SAClB,CACD,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAC9B,QAAQ,EACR;YACC,IAAI,CAAC,iBAAiB,EAAE,CAAC;SACzB,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACd,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAC9B,QAAQ,EACR;YACC,IAAI,SAAS,KAAK,QAAQ,EAAE;gBAC3B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;aACzB;iBAAM;gBACN,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACvB;SACD,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACd,CAAC;KACF;IAEO,iBAAiB;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;QAC5C,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;KACzB;;;ACvFF,MAAM,eAAe,GAAG,mtCAAmtC,CAAC;AAC5uC,gCAAe,eAAe;;MCmBjBA,YAAU;;;;;QAML,aAAQ,GAAG,CAAC,GAAiB;YAC7C,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;YAC1B,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;SAC/C,CAAC;QA6FM,iBAAY,GAAG,CAAC,KAAY;YACnC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC;;gBAC/B,MAAM,IAAI,GAAG,OAAO,CAAC,MAAA,IAAI,CAAC,cAAc,0CAAE,IAAI,CAAC,CAAC;gBAChD,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;oBAE9B,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,MAAA,IAAI,CAAC,cAAc,0CAAE,IAAI,CAAC,CAAC;oBAGhD,yBAAyB,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAG3D,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAA,KAAK,UAAU,EAAE;wBACnD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;qBAC5C;iBACD;aACD,EAAE,EAAE,CAAC,CAAC;SACP,CAAC;;;qBAvE+D,KAAK;;qBAQtC;YAC/B,MAAM,EAAE,GAAG;YACX,GAAG,EAAE,EAAE;SACP;;IAhDM,MAAM;QACZ,QACC,EAAC,IAAI,uDACJ,gEACC,GAAG,EAAE,CAAC,EAAE;gBACP,IAAI,CAAC,cAAc,GAAG,EAAwB,CAAC;aAC/C,EACD,QAAQ,EAAE,IAAI,CAAC,YAAY,IAE3B,gEAAS,GAAG,EAAE,IAAI,CAAC,QAAQ,IACzB,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,gBAAU,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,8BAA8B,GAAG,GAAG,gBAAU,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,+BAA+B,GAAG,EAChJ,+DAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ,CACvB,EACV,2EAAkB,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,EAAE,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,IACnI,4EACC,8DAAQ,CACW,CACf,CACG,CACJ,EACN;KACF;IA8BM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,UAAU,CAAC,EAAmB;QACpC,IAAI,OAAO,EAAE,KAAK,QAAQ,IAAI,EAAE,KAAK,IAAI,IAAI,OAAO,EAAE,CAAC,QAAQ,KAAK,UAAU,EAAE;YAC/E,QAAQ,CAAiB,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;SAC1C;KACD;IAGM,YAAY,CAAC,KAAe;QAClC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC1B;IAGM,eAAe,CAAC,KAAc;QACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC9B;IAEM,gBAAgB;QACtB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,EAAE;YACtE,MAAM,mBAAmB,GAAG,IAAI,0BAA0B,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YAC1H,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;gBACrB,mBAAmB,CAAC,IAAI,EAAE,CAAC;aAC3B;SACD;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\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\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.animateContentHeight('expand');\n\t}\n\n\tprivate collapse() {\n\t\tthis.isClosing = true;\n\t\tthis.animateContentHeight('collapse');\n\t}\n\n\tprivate animateContentHeight(direction: 'expand' | 'collapse') {\n\t\tlet startHeight = direction === 'expand' ? 0 : this.contentElement.offsetHeight;\n\t\tlet endHeight = direction === 'expand' ? this.contentElement.offsetHeight : 0;\n\n\t\t/**\n\t\t * Override start and end height, when an animation is ongoing. During the animation, offsetHeight reflects the actual current height as it's being animated.\n\t\t * After canceling the animation, it reverts to the full height of the content container.\n\t\t */\n\t\tif (this.animation) {\n\t\t\tstartHeight = this.contentElement.offsetHeight;\n\t\t\tthis.animation.cancel();\n\t\t\tif (direction === 'expand') {\n\t\t\t\tendHeight = this.contentElement.offsetHeight;\n\t\t\t}\n\t\t}\n\n\t\tthis.animation = this.contentElement.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}\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}\n.content {\n\toverflow: hidden;\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';\nimport { propagateFocus } from '../../utils/reuse';\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\tprivate readonly catchRef = (ref?: HTMLElement) => {\n\t\tthis.summaryElement = ref;\n\t\tpropagateFocus(this.host, this.summaryElement);\n\t};\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={this.catchRef}>\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 aria-hidden={this.state._open === false ? 'true' : undefined} 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: '…', // ⚠ required\n\t\t_on: {},\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_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}

package/dist/components/kol-form.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{w as watchValidator,f as watchBoolean,b as watchString}from"./prop.validators.js";import{d as defineCustomElement$b}from"./shadow.js";import{d as defineCustomElement$a}from"./component6.js";import{d as defineCustomElement$9}from"./component5.js";import{d as defineCustomElement$8}from"./component4.js";import{d as defineCustomElement$7}from"./component.js";import{d as defineCustomElement$6}from"./component12.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 validateErrorList=(e,t)=>{watchValidator(e,"errorList",(e=>"object"==typeof e),new Set(["Object"]),t)},KolForm$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onSubmit=e=>{var t,o;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(o=this.state._on)||void 0===o||o.onSubmit(e))},this.onReset=e=>{var t,o;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(o=this.state._on)||void 0===o||o.onReset(e))},this.handleLinkClick=e=>{var t;const o=null===(t=e.target)||void 0===t?void 0:t.href;if(o){const e=new URL(o),t=document.querySelector(e.hash);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())}},this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}render(){return console.log(this._errorList),h("form",{method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},this._errorList&&this._errorList.length>0&&h("kol-alert",{_type:"error"},translate("kol-error-list-message"),h("nav",{"aria-label":translate("kol-error-list")},h("ul",null,this._errorList.map(((e,t)=>h("li",{key:t},h("kol-link",{_href:e.selector,_label:e.message,_on:{onClick:this.handleLinkClick}}))))))),!0===this.state._requiredText?h("p",null,h("kol-indented-text",null,translate("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?h("p",null,h("kol-indented-text",null,this.state._requiredText)):null,h("slot",null))}validateOn(e){"object"==typeof e&&null!==e&&(this.state=Object.assign(Object.assign({},this.state),{_on:e}))}validateRequiredText(e){"boolean"==typeof e?watchBoolean(this,"_requiredText",e):watchString(this,"_requiredText",e)}validateErrorList(e){validateErrorList(this,e)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}},[1,"kol-form",{_on:[16],_requiredText:[8,"_required-text"],_errorList:[16],state:[32]},void 0,{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-form","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-indented-text","kol-link","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-form":customElements.get(e)||customElements.define(e,KolForm$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$b();break;case"kol-alert-wc":customElements.get(e)||defineCustomElement$a();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$9();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$8();break;case"kol-icon":customElements.get(e)||defineCustomElement$7();break;case"kol-indented-text":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 KolForm=KolForm$1,defineCustomElement=defineCustomElement$1;export{KolForm,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{w as watchValidator,f as watchBoolean,b as watchString}from"./prop.validators.js";import{d as defineCustomElement$b}from"./shadow.js";import{d as defineCustomElement$a}from"./component6.js";import{d as defineCustomElement$9}from"./component5.js";import{d as defineCustomElement$8}from"./component4.js";import{d as defineCustomElement$7}from"./component.js";import{d as defineCustomElement$6}from"./component12.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 validateErrorList=(e,t)=>{watchValidator(e,"errorList",(e=>"object"==typeof e),new Set(["Object"]),t)},KolForm$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onSubmit=e=>{var t,o;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(o=this.state._on)||void 0===o||o.onSubmit(e))},this.onReset=e=>{var t,o;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(o=this.state._on)||void 0===o||o.onReset(e))},this.handleLinkClick=e=>{var t;const o=null===(t=e.target)||void 0===t?void 0:t.href;if(o){const e=new URL(o),t=document.querySelector(e.hash);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())}},this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}render(){return h("form",{key:"5a362febb352a2cd5451a884122763c56093edac",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},this._errorList&&this._errorList.length>0&&h("kol-alert",{_type:"error"},translate("kol-error-list-message"),h("nav",{"aria-label":translate("kol-error-list")},h("ul",null,this._errorList.map(((e,t)=>h("li",{key:t},h("kol-link",{_href:e.selector,_label:e.message,_on:{onClick:this.handleLinkClick},ref:e=>{0===t&&(this.errorListElement=e)}}))))))),!0===this.state._requiredText?h("p",null,h("kol-indented-text",null,translate("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?h("p",null,h("kol-indented-text",null,this.state._requiredText)):null,h("slot",{key:"a9c11e995286f97104b2f6f9b08d3bbb4de4bab2"}))}validateOn(e){"object"==typeof e&&null!==e&&(this.state=Object.assign(Object.assign({},this.state),{_on:e}))}validateRequiredText(e){"boolean"==typeof e?watchBoolean(this,"_requiredText",e):watchString(this,"_requiredText",e)}validateErrorList(e){validateErrorList(this,e)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}componentDidRender(){var e;this._errorList&&this._errorList.length>0&&(null===(e=this.errorListElement)||void 0===e||e.focus())}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}},[1,"kol-form",{_on:[16],_requiredText:[8,"_required-text"],_errorList:[16],state:[32]},void 0,{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-form","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-indented-text","kol-link","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-form":customElements.get(e)||customElements.define(e,KolForm$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$b();break;case"kol-alert-wc":customElements.get(e)||defineCustomElement$a();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$9();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$8();break;case"kol-icon":customElements.get(e)||defineCustomElement$7();break;case"kol-indented-text":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 KolForm=KolForm$1,defineCustomElement=defineCustomElement$1;export{KolForm,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-form.js","mappings":"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","names":["KolForm"],"sources":["src/types/props/error-list.ts","src/components/form/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\nexport type ErrorListPropType = {\n\tmessage: string;\n\tselector: string;\n};\n\nexport type PropErrorList = {\n\terrorList: ErrorListPropType[];\n};\n\n/* validator */\nexport const validateErrorList = (component: Generic.Element.Component, value?: ErrorListPropType[]): void => {\n\twatchValidator(component, 'errorList', (value): boolean => typeof value === 'object', new Set(['Object']), value);\n};\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { API, KoliBriFormCallbacks, States } from './types';\nimport { ErrorListPropType, validateErrorList } from '../../types/props/error-list';\n/**\n * @slot - Inhalt der Form.\n */\n@Component({\n\ttag: 'kol-form',\n\tshadow: true,\n})\nexport class KolForm implements API {\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t};\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (event: Event) => {\n\t\tconst href = (event.target as HTMLAnchorElement | undefined)?.href;\n\t\tif (href) {\n\t\t\tconst hrefUrl = new URL(href);\n\n\t\t\tconst targetElement = document.querySelector<HTMLElement>(hrefUrl.hash);\n\t\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\t\ttargetElement.scrollIntoView({ behavior: 'smooth' });\n\t\t\t\ttargetElement.focus();\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconsole.log(this._errorList);\n\t\treturn (\n\t\t\t<form method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete=\"off\" noValidate>\n\t\t\t\t{this._errorList && this._errorList.length > 0 && (\n\t\t\t\t\t<kol-alert _type=\"error\">\n\t\t\t\t\t\t{translate('kol-error-list-message')}\n\t\t\t\t\t\t<nav aria-label={translate('kol-error-list')}>\n\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t{this._errorList.map((error, index) => (\n\t\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t\t<kol-link _href={error.selector} _label={error.message} _on={{ onClick: this.handleLinkClick }} />\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t</kol-alert>\n\t\t\t\t)}\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{translate('kol-form-description')}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{this.state._requiredText}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: States = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"],"version":3}
+{"file":"kol-form.js","mappings":"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","names":["KolForm"],"sources":["src/types/props/error-list.ts","src/components/form/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\nexport type ErrorListPropType = {\n\tmessage: string;\n\tselector: string;\n};\n\nexport type PropErrorList = {\n\terrorList: ErrorListPropType[];\n};\n\n/* validator */\nexport const validateErrorList = (component: Generic.Element.Component, value?: ErrorListPropType[]): void => {\n\twatchValidator(component, 'errorList', (value): boolean => typeof value === 'object', new Set(['Object']), value);\n};\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { API, KoliBriFormCallbacks, States } from './types';\nimport { ErrorListPropType, validateErrorList } from '../../types/props/error-list';\n/**\n * @slot - Inhalt der Form.\n */\n@Component({\n\ttag: 'kol-form',\n\tshadow: true,\n})\nexport class KolForm implements API {\n\terrorListElement?: HTMLElement;\n\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t};\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (event: Event) => {\n\t\tconst href = (event.target as HTMLAnchorElement | undefined)?.href;\n\t\tif (href) {\n\t\t\tconst hrefUrl = new URL(href);\n\n\t\t\tconst targetElement = document.querySelector<HTMLElement>(hrefUrl.hash);\n\t\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\t\ttargetElement.scrollIntoView({ behavior: 'smooth' });\n\t\t\t\ttargetElement.focus();\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<form method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete=\"off\" noValidate>\n\t\t\t\t{this._errorList && this._errorList.length > 0 && (\n\t\t\t\t\t<kol-alert _type=\"error\">\n\t\t\t\t\t\t{translate('kol-error-list-message')}\n\t\t\t\t\t\t<nav aria-label={translate('kol-error-list')}>\n\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t{this._errorList.map((error, index) => (\n\t\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t\t<kol-link\n\t\t\t\t\t\t\t\t\t\t\t_href={error.selector}\n\t\t\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onClick: this.handleLinkClick }}\n\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (index === 0) this.errorListElement = el as HTMLElement;\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t</kol-alert>\n\t\t\t\t)}\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{translate('kol-form-description')}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{this.state._requiredText}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: States = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n\n\tpublic componentDidRender() {\n\t\tif (this._errorList && this._errorList.length > 0) {\n\t\t\tthis.errorListElement?.focus();\n\t\t}\n\t}\n}\n"],"version":3}