npm - @public-ui/components - Versions diffs - 1.3.3-rc.2 → 1.4.0-rc.1 - Mend

@public-ui/components 1.3.3-rc.2 → 1.4.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (770) hide show

package/dist/components/kol-abbr.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{w as watchTooltipAlignment,d as defineCustomElement$2,a as defineCustomElement$5,b as defineCustomElement$6}from"./component.js";import{n as nonce,w as watchString}from"./prop.validators.js";import{d as defineCustomElement$4}from"./component2.js";import{d as defineCustomElement$3}from"./component3.js";const defaultStyleCss="@windicss; *{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:700}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{border-width:0}:host abbr{cursor:help}",KolAbbr$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this._tooltipAlign="top",this._title=void 0,this.state={_title:"",_tooltipAlign:"top"}}render(){return h(Host,null,h("abbr",{"aria-labelledby":this.nonce,role:"definition",title:this.state._title},h("span",{title:""},h("slot",null))),h("kol-tooltip",{_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._title}))}validateTitle(t){watchString(this,"_title",t,{required:!0})}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}componentWillLoad(){this.validateTitle(this._title),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-abbr",{_tooltipAlign:[1,"_tooltip-align"],_title:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-abbr","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-abbr":customElements.get(t)||customElements.define(t,KolAbbr$1);break;case"kol-badge":customElements.get(t)||defineCustomElement$6();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$5();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":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{w as watchTooltipAlignment,d as defineCustomElement$2,a as defineCustomElement$5,b as defineCustomElement$6}from"./component.js";import{n as nonce,w as watchString}from"./prop.validators.js";import{d as defineCustomElement$4}from"./component2.js";import{d as defineCustomElement$3}from"./component3.js";const defaultStyleCss="*{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:bold}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host abbr{cursor:help}",KolAbbr$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this._tooltipAlign="top",this._title=void 0,this.state={_title:"",_tooltipAlign:"top"}}render(){return h(Host,null,h("abbr",{"aria-labelledby":this.nonce,role:"definition",title:this.state._title},h("span",{title:""},h("slot",null))),h("kol-tooltip",{_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._title}))}validateTitle(t){watchString(this,"_title",t,{required:!0})}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}componentWillLoad(){this.validateTitle(this._title),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-abbr",{_tooltipAlign:[1,"_tooltip-align"],_title:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-abbr","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-abbr":customElements.get(t)||customElements.define(t,KolAbbr$1);break;case"kol-badge":customElements.get(t)||defineCustomElement$6();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$5();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolAbbr=KolAbbr$1,defineCustomElement=defineCustomElement$1;export{KolAbbr,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-abbr.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG~~,sfAAsf~~;;~~MC8BjgBA~~,SAAO;;;;;IACF,UAAK,GAAG,KAAK,EAAE,CAAC;yBAkBU,KAAK;;iBAgBhB;MAC/B,MAAM,EAAE,EAAE;MACV,aAAa,EAAE,KAAK;KACpB;;EAnCM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,+BAAuB,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAC5E,YAAM,KAAK,EAAC,EAAE,IACb,eAAQ,CACF,CACD,EACP,mBAAa,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAgB,CACnG,EACN;GACF;EAmCM,aAAa,CAAC,KAAc;IAClC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MAClC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAMM,oBAAoB,CAAC,KAAiB;IAC5C,qBAAqB,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;GACpD;EAKM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAbbr"],"sources":["./src/components/abbr/style.sass?tag=kol-abbr&mode=default&encapsulation=shadow","./src/components/abbr/component.tsx"],"sourcesContent":["@import ../style\n\n:host\n\n\tabbr\n\t\tcursor: help\n","import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Alignment } from '../../types/props/alignment';\nimport { nonce } from '../../utils/dev.utils';\nimport { watchString } from '../../utils/prop.validators';\n\n/*\n API\n /\ntype RequiredProps = {\n\ttitle: string;\n};\ntype OptionalProps = {\n\ttooltipAlign: Alignment;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & OptionalProps;\ntype OptionalStates = unknown;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" title={this.state._title}>\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 _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._title}></kol-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.\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/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_title: '',\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('_title')\n\tpublic validateTitle(value?: string): void {\n\t\twatchString(this, '_title', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateTitle(this._title);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-abbr.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,+hBAA+hB;;MC8B1iBA,SAAO;;;;;IACF,UAAK,GAAG,KAAK,EAAE,CAAC;yBAkBU,KAAK;;iBAgBhB;MAC/B,MAAM,EAAE,EAAE;MACV,aAAa,EAAE,KAAK;KACpB;;EAnCM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,+BAAuB,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAC5E,YAAM,KAAK,EAAC,EAAE,IACb,eAAQ,CACF,CACD,EACP,mBAAa,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAgB,CACnG,EACN;GACF;EAmCM,aAAa,CAAC,KAAc;IAClC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MAClC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAMM,oBAAoB,CAAC,KAAiB;IAC5C,qBAAqB,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;GACpD;EAKM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAbbr"],"sources":["./src/components/abbr/style.sass?tag=kol-abbr&mode=default&encapsulation=shadow","./src/components/abbr/component.tsx"],"sourcesContent":["@import ../style\n\n:host\n\n\tabbr\n\t\tcursor: help\n","import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Alignment } from '../../types/props/alignment';\nimport { nonce } from '../../utils/dev.utils';\nimport { watchString } from '../../utils/prop.validators';\n\n/*\n API\n /\ntype RequiredProps = {\n\ttitle: string;\n};\ntype OptionalProps = {\n\ttooltipAlign: Alignment;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & OptionalProps;\ntype OptionalStates = unknown;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" title={this.state._title}>\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 _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._title}></kol-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.\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/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_title: '',\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('_title')\n\tpublic validateTitle(value?: string): void {\n\t\twatchString(this, '_title', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateTitle(this._title);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"version":3}

package/dist/components/kol-accordion.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{p as featureHint,w as watchString,o as setState,k as watchBoolean}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$3}from"./component4.js";import{d as defineCustomElement$2}from"./component2.js";const defaultStyleCss="@windicss; *{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:700}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{border-width:0}";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.catchAriaExpanded=e=>{e instanceof HTMLButtonElement&&(this.buttonRef=e,this.triggerAriaExpanded(e))},this.triggerAriaExpanded=e=>{e.setAttribute("aria-expanded",this.state._open?"true":"false")},this.onClick=e=>{this._open=!1===this._open;const t=setTimeout((()=>{var n;clearTimeout(t),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onClick)&&this.state._on.onClick(e,!0===this._open),this.buttonRef instanceof HTMLButtonElement&&this.triggerAriaExpanded(this.buttonRef)}))},this._heading=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_heading:"⚠",_level:1}}render(){return h(Host,null,h("div",{part:"accordion "+(this.state._open?"open":"close")},h("kol-heading-wc",{_level:this.state._level},h("button",{ref:this.catchAriaExpanded,onClick:this.onClick},h("kol-icon",{_ariaLabel:"",_icon:this.state._open?"fa-solid fa-minus":"fa-solid fa-plus",_part:this.state._open?"close":"open"}),h("span",null,this.state._heading))),h("div",{part:"header"},h("slot",{name:"header"})),h("div",{part:"content",style:!1===this.state._open?{display:"none",height:"0",visibility:"hidden"}:void 0},h("slot",{name:"content"}))))}validateHeading(e){watchString(this,"_heading",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){watchBoolean(this,"_open",e)}componentWillLoad(){this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-accordion",{_heading:[1],_level:[2],_on:[16],_open:[1540],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-accordion","kol-heading-wc","kol-icon"].forEach((e=>{switch(e){case"kol-accordion":customElements.get(e)||customElements.define(e,KolAccordion$1);break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-icon":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{x as featureHint,w as watchString,v as setState,t as watchBoolean}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$3}from"./component4.js";import{d as defineCustomElement$2}from"./component2.js";const defaultStyleCss="*{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:bold}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}";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.catchAriaExpanded=e=>{e instanceof HTMLButtonElement&&(this.buttonRef=e,this.triggerAriaExpanded(e))},this.triggerAriaExpanded=e=>{e.setAttribute("aria-expanded",this.state._open?"true":"false")},this.onClick=e=>{this._open=!1===this._open;const t=setTimeout((()=>{var n;clearTimeout(t),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onClick)&&this.state._on.onClick(e,!0===this._open),this.buttonRef instanceof HTMLButtonElement&&this.triggerAriaExpanded(this.buttonRef)}))},this._heading=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_heading:"⚠",_level:1}}render(){return h(Host,null,h("div",{part:"accordion "+(this.state._open?"open":"close")},h("kol-heading-wc",{_level:this.state._level},h("button",{ref:this.catchAriaExpanded,onClick:this.onClick},h("kol-icon",{_ariaLabel:"",_icon:this.state._open?"fa-solid fa-minus":"fa-solid fa-plus",_part:this.state._open?"close":"open"}),h("span",null,this.state._heading))),h("div",{part:"header"},h("slot",{name:"header"})),h("div",{part:"content",style:!1===this.state._open?{display:"none",height:"0",visibility:"hidden"}:void 0},h("slot",{name:"content"}))))}validateHeading(e){watchString(this,"_heading",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){watchBoolean(this,"_open",e)}componentWillLoad(){this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-accordion",{_heading:[1],_level:[2],_on:[16],_open:[1540],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-accordion","kol-heading-wc","kol-icon"].forEach((e=>{switch(e){case"kol-accordion":customElements.get(e)||customElements.define(e,KolAccordion$1);break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-icon":customElements.get(e)||defineCustomElement$2()}}))}const KolAccordion=KolAccordion$1,defineCustomElement=defineCustomElement$1;export{KolAccordion,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-accordion.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG~~,+dAA+d~~;;~~ACYvf~~,WAAW,CAAC;;;;yCAI6B,CAAC,CAAC;AAC3C,WAAW,CAAC,iEAAiE,CAAC,CAAC;MAyClEA,cAAY;;;;;IAIhB,sBAAiB,GAAG,CAAC,MAA0B;MACtD,IAAI,MAAM,YAAY,iBAAiB,EAAE;QACxC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;QACxB,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;OACjC;KACD,CAAC;IACM,wBAAmB,GAAG,CAAC,MAAyB;MACvD,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KAC1E,CAAC;IA4HM,YAAO,GAAG,CAAC,KAAY;MAC9B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;MAQlC,MAAM,OAAO,GAAG,UAAU,CAAC;;QAC1B,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;UAClD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC;SACnD;QACD,IAAI,IAAI,CAAC,SAAS,YAAY,iBAAiB,EAAE;UAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzC;OACD,CAAC,CAAC;KACH,CAAC;;kBApFqC,CAAC;;iBAUyB,KAAK;iBAKtC;MAC/B,QAAQ,EAAE,GAAG;MACb,MAAM,EAAE,CAAC;KACT;;EA1EM,MAAM;IAEZ,QACC,EAAC,IAAI,QACJ,WAAK,IAAI,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,EAAE,IAC5D,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IACxC,cAAQ,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACzD,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,mBAAmB,GAAG,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,MAAM,GAAI,EAC1I,gBAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAQ,CAC1B,CACO,EACjB,WAAK,IAAI,EAAC,QAAQ,IACjB,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EACN,WACC,IAAI,EAAC,SAAS,EAEd,KAAK,EACJ,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK;UACvB;UACA,OAAO,EAAE,MAAM;UACf,MAAM,EAAE,GAAG;UACX,UAAU,EAAE,QAAQ;SACnB;UACD,SAAS,IAiBb,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACD,CACA,EACN;GACF;EAkCM,eAAe,CAAC,KAAc;IACpC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;MACpC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAMM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAMM,UAAU,CAAC,KAAiC;IAClD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,UAAU,EAAE;MACvF,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;KAC7B;GACD;EAMM,YAAY,CAAC,KAAe;IAClC,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAKM,iBAAiB;IACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAccordion"],"sources":["./src/components/style.sass?tag=kol-accordion&mode=default&encapsulation=shadow","./src/components/accordion/component.tsx"],"sourcesContent":["~~@windicss\n\n~~\n\tbox-sizing: border-box\n\tfont-size: inherit\n\thyphens: auto\n\tletter-spacing: inherit\n\tword-break: break-word\n\tword-spacing: inherit\n\nkol-heading-wc\n\tfont-weight: ~~700~~\n\nkol-icon\n\tcolor: inherit\n\nkol-span-wc\n\tdisplay: grid\n\tplace-items: center\n\twidth: 100%\n\n\t> span\n\t\tdisplay: flex\n\t\tgap: 0.25rem\n\t\tplace-items: center\n\na,\nbutton\n\tcursor: pointer\n\n\t&.icon-only\n\n\t\t> kol-span-wc\n\n\t\t\t> span\n\n\t\t\t\t> span\n\t\t\t\t\tdisplay: none\n\na\n\tdisplay: inline-flex\n\tplace-items: baseline\n\nbutton\n\tborder-width: 0\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\n\nimport { EventValueCallback } from '../../types/callbacks';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\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\nexport type KoliBriAccordionCallbacks = {\n\t[Events.onClick]?: EventValueCallback<Event, boolean>;\n};\n\n/\n API\n /\ntype RequiredProps = {\n\theading: string;\n};\ntype OptionalProps = {\n\tlevel: HeadingLevel;\n\topen: boolean;\n\ton: KoliBriAccordionCallbacks;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part accordion - Ermöglicht das Stylen des äußeren Container des Accordions.\n * @part open - Ermöglicht das Stylen des geöffneten Zustands und Icons.\n * @part close - Ermöglicht das Stylen des geschlossenen Zustands und Icons.\n * @part icon - Ermöglicht das Stylen der Icons.\n * @part header - Ermöglicht das Stylen des Kopfbereichs.\n * @part content - Ermöglicht das Stylen des Inhaltsbereichs.\n \n @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n /\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate buttonRef?: HTMLButtonElement;\n\t// private content?: HTMLDivElement;\n\n\tprivate catchAriaExpanded = (button?: HTMLButtonElement) => {\n\t\tif (button instanceof HTMLButtonElement) {\n\t\t\tthis.buttonRef = button;\n\t\t\tthis.triggerAriaExpanded(button);\n\t\t}\n\t};\n\tprivate triggerAriaExpanded = (button: HTMLButtonElement) => {\n\t\tbutton.setAttribute('aria-expanded', this.state._open ? 'true' : 'false');\n\t};\n\n\tpublic render(): JSX.Element {\n\t\t// const height = this.content?.getBoundingClientRect().height ?? 0;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div part={`accordion ${this.state._open ? 'open' : 'close'}`}>\n\t\t\t\t\t<kol-heading-wc _level={this.state._level}>\n\t\t\t\t\t\t<button ref={this.catchAriaExpanded} onClick={this.onClick}>\n\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon={this.state._open ? 'fa-solid fa-minus' : 'fa-solid fa-plus'} _part={this.state._open ? 'close' : 'open'} />\n\t\t\t\t\t\t\t<span>{this.state._heading}</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div part=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tpart=\"content\"\n\t\t\t\t\t\t// ref={(r) => (this.content = r)}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tthis.state._open === false\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tdisplay: 'none',\n\t\t\t\t\t\t\t\t\t\theight: '0',\n\t\t\t\t\t\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// style={\n\t\t\t\t\t\t// \tthis.state._open\n\t\t\t\t\t\t// \t\t? height > 0 && ~~process.env.NODE_ENV~~ !== 'test' // TODO: remove this check when testing is fixed\n\t\t\t\t\t\t// \t\t\t? {\n\t\t\t\t\t\t// \t\t\t\theight: `${height}px`,\n\t\t\t\t\t\t// \t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\t}\n\t\t\t\t\t\t// \t\t\t: undefined\n\t\t\t\t\t\t// \t\t: {\n\t\t\t\t\t\t// \t\t\theight: '0',\n\t\t\t\t\t\t// \t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t// \t\t}\n\t\t\t\t\t\t// }\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"content\" />\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 Gibt die Überschrift des Accordions an.\n\t /\n\t@Prop() public _heading!: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\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 Gibt an, ob das Accordion geöffnet ist.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_heading: '⚠',\n\t\t_level: 1,\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\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/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\twatchBoolean(this, '_open', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t /\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeading(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 === false;\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\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\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\tif (this.buttonRef instanceof HTMLButtonElement) {\n\t\t\t\tthis.triggerAriaExpanded(this.buttonRef);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"version":3}
1	+ {"file":"kol-accordion.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,wgBAAwgB;;ACYhiB,WAAW,CAAC;;;;yCAI6B,CAAC,CAAC;AAC3C,WAAW,CAAC,iEAAiE,CAAC,CAAC;MAyClEA,cAAY;;;;;IAIhB,sBAAiB,GAAG,CAAC,MAA0B;MACtD,IAAI,MAAM,YAAY,iBAAiB,EAAE;QACxC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;QACxB,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;OACjC;KACD,CAAC;IACM,wBAAmB,GAAG,CAAC,MAAyB;MACvD,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KAC1E,CAAC;IA4HM,YAAO,GAAG,CAAC,KAAY;MAC9B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;MAQlC,MAAM,OAAO,GAAG,UAAU,CAAC;;QAC1B,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;UAClD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC;SACnD;QACD,IAAI,IAAI,CAAC,SAAS,YAAY,iBAAiB,EAAE;UAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzC;OACD,CAAC,CAAC;KACH,CAAC;;kBApFqC,CAAC;;iBAUyB,KAAK;iBAKtC;MAC/B,QAAQ,EAAE,GAAG;MACb,MAAM,EAAE,CAAC;KACT;;EA1EM,MAAM;IAEZ,QACC,EAAC,IAAI,QACJ,WAAK,IAAI,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,EAAE,IAC5D,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IACxC,cAAQ,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACzD,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,mBAAmB,GAAG,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,MAAM,GAAI,EAC1I,gBAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAQ,CAC1B,CACO,EACjB,WAAK,IAAI,EAAC,QAAQ,IACjB,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EACN,WACC,IAAI,EAAC,SAAS,EAEd,KAAK,EACJ,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK;UACvB;UACA,OAAO,EAAE,MAAM;UACf,MAAM,EAAE,GAAG;UACX,UAAU,EAAE,QAAQ;SACnB;UACD,SAAS,IAiBb,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACD,CACA,EACN;GACF;EAkCM,eAAe,CAAC,KAAc;IACpC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;MACpC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAMM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAMM,UAAU,CAAC,KAAiC;IAClD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,UAAU,EAAE;MACvF,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;KAC7B;GACD;EAMM,YAAY,CAAC,KAAe;IAClC,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAKM,iBAAiB;IACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAccordion"],"sources":["./src/components/style.sass?tag=kol-accordion&mode=default&encapsulation=shadow","./src/components/accordion/component.tsx"],"sourcesContent":["\n\tbox-sizing: border-box\n\tfont-size: inherit\n\thyphens: auto\n\tletter-spacing: inherit\n\tword-break: break-word\n\tword-spacing: inherit\n\nkol-heading-wc\n\tfont-weight: bold\n\nkol-icon\n\tcolor: inherit\n\nkol-span-wc\n\tdisplay: grid\n\tplace-items: center\n\twidth: 100%\n\n\t> span\n\t\tdisplay: flex\n\t\tgap: 0.25rem\n\t\tplace-items: center\n\na,\nbutton,\ninput,\nselect,\ntextarea\n\tcursor: pointer\n\na,\nbutton\n\t&.icon-only\n\n\t\t> kol-span-wc\n\n\t\t\t> span\n\n\t\t\t\t> span\n\t\t\t\t\tdisplay: none\n\na\n\tdisplay: inline-flex\n\tplace-items: baseline\n\nbutton\n\tbackground-color: transparent\n\tborder-width: 0\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\n\nimport { EventValueCallback } from '../../types/callbacks';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\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\nexport type KoliBriAccordionCallbacks = {\n\t[Events.onClick]?: EventValueCallback<Event, boolean>;\n};\n\n/\n API\n /\ntype RequiredProps = {\n\theading: string;\n};\ntype OptionalProps = {\n\tlevel: HeadingLevel;\n\topen: boolean;\n\ton: KoliBriAccordionCallbacks;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part accordion - Ermöglicht das Stylen des äußeren Container des Accordions.\n * @part open - Ermöglicht das Stylen des geöffneten Zustands und Icons.\n * @part close - Ermöglicht das Stylen des geschlossenen Zustands und Icons.\n * @part icon - Ermöglicht das Stylen der Icons.\n * @part header - Ermöglicht das Stylen des Kopfbereichs.\n * @part content - Ermöglicht das Stylen des Inhaltsbereichs.\n \n @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n /\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate buttonRef?: HTMLButtonElement;\n\t// private content?: HTMLDivElement;\n\n\tprivate catchAriaExpanded = (button?: HTMLButtonElement) => {\n\t\tif (button instanceof HTMLButtonElement) {\n\t\t\tthis.buttonRef = button;\n\t\t\tthis.triggerAriaExpanded(button);\n\t\t}\n\t};\n\tprivate triggerAriaExpanded = (button: HTMLButtonElement) => {\n\t\tbutton.setAttribute('aria-expanded', this.state._open ? 'true' : 'false');\n\t};\n\n\tpublic render(): JSX.Element {\n\t\t// const height = this.content?.getBoundingClientRect().height ?? 0;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div part={`accordion ${this.state._open ? 'open' : 'close'}`}>\n\t\t\t\t\t<kol-heading-wc _level={this.state._level}>\n\t\t\t\t\t\t<button ref={this.catchAriaExpanded} onClick={this.onClick}>\n\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon={this.state._open ? 'fa-solid fa-minus' : 'fa-solid fa-plus'} _part={this.state._open ? 'close' : 'open'} />\n\t\t\t\t\t\t\t<span>{this.state._heading}</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div part=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tpart=\"content\"\n\t\t\t\t\t\t// ref={(r) => (this.content = r)}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tthis.state._open === false\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tdisplay: 'none',\n\t\t\t\t\t\t\t\t\t\theight: '0',\n\t\t\t\t\t\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// style={\n\t\t\t\t\t\t// \tthis.state._open\n\t\t\t\t\t\t// \t\t? height > 0 && processEnv !== 'test' // TODO: remove this check when testing is fixed\n\t\t\t\t\t\t// \t\t\t? {\n\t\t\t\t\t\t// \t\t\t\theight: `${height}px`,\n\t\t\t\t\t\t// \t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\t}\n\t\t\t\t\t\t// \t\t\t: undefined\n\t\t\t\t\t\t// \t\t: {\n\t\t\t\t\t\t// \t\t\theight: '0',\n\t\t\t\t\t\t// \t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t// \t\t}\n\t\t\t\t\t\t// }\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"content\" />\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 Gibt die Überschrift des Accordions an.\n\t /\n\t@Prop() public _heading!: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\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 Gibt an, ob das Accordion geöffnet ist.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_heading: '⚠',\n\t\t_level: 1,\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\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/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\twatchBoolean(this, '_open', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t /\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeading(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 === false;\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\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\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\tif (this.buttonRef instanceof HTMLButtonElement) {\n\t\t\t\tthis.triggerAriaExpanded(this.buttonRef);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"version":3}

package/dist/components/kol-breadcrumb.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{w as watchString,v as a11yHintLabelingLandmarks}from"./prop.validators.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$2,a as defineCustomElement$7,b as defineCustomElement$8}from"./component.js";import{d as defineCustomElement$6}from"./component2.js";import{d as defineCustomElement$5}from"./shadow.js";import{d as defineCustomElement$4}from"./component6.js";import{d as defineCustomElement$3}from"./component3.js";const defaultStyleCss="@windicss; *{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:700}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{border-width:0}",KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){const e=this.state._links.length-1;return h(Host,null,h("nav",{"aria-label":this.state._ariaLabel},h("ul",null,0===this.state._links.length&&h("li",null,h("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-house"}),"…"),this.state._links.map(((t,a)=>h("li",{key:a},0!==a&&h("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-right",_part:"separator",exportparts:"separator"}),a===e?h("span",null,t._iconOnly?h("kol-icon",{_ariaLabel:t._label,_icon:"string"==typeof t._icon?t._icon:"fa-solid fa-link-slash"}):h(Fragment,null,t._label)):h("kol-link",Object.assign({exportparts:"link",_useCase:"nav"},t,{_ariaLabel:t._label}),t._label)))))))}validateAriaLabel(e){watchString(this,"_ariaLabel",e,{required:!0}),a11yHintLabelingLandmarks(e)}validateLinks(e){watchNavLinks("KolBreadcrumb",this,e)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-breadcrumb",{_ariaLabel:[1,"_aria-label"],_links:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb","kol-badge","kol-button-wc","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-breadcrumb":customElements.get(e)||customElements.define(e,KolBreadcrumb$1);break;case"kol-badge":customElements.get(e)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$7();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":customElements.get(e)||defineCustomElement$2()}}))}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{w as watchString,F as a11yHintLabelingLandmarks}from"./prop.validators.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$2,a as defineCustomElement$7,b as defineCustomElement$8}from"./component.js";import{d as defineCustomElement$6}from"./component2.js";import{d as defineCustomElement$5}from"./shadow.js";import{d as defineCustomElement$4}from"./component6.js";import{d as defineCustomElement$3}from"./component3.js";const defaultStyleCss="*{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:bold}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}",KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){const e=this.state._links.length-1;return h(Host,null,h("nav",{"aria-label":this.state._ariaLabel},h("ul",null,0===this.state._links.length&&h("li",null,h("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-house"}),"…"),this.state._links.map(((t,a)=>h("li",{key:a},0!==a&&h("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-right",_part:"separator",exportparts:"separator"}),a===e?h("span",null,t._iconOnly?h("kol-icon",{_ariaLabel:t._label,_icon:"string"==typeof t._icon?t._icon:"fa-solid fa-link-slash"}):h(Fragment,null,t._label)):h("kol-link",Object.assign({exportparts:"link",_useCase:"nav"},t,{_ariaLabel:t._label}),t._label)))))))}validateAriaLabel(e){watchString(this,"_ariaLabel",e,{required:!0}),a11yHintLabelingLandmarks(e)}validateLinks(e){watchNavLinks("KolBreadcrumb",this,e)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-breadcrumb",{_ariaLabel:[1,"_aria-label"],_links:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb","kol-badge","kol-button-wc","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-breadcrumb":customElements.get(e)||customElements.define(e,KolBreadcrumb$1);break;case"kol-badge":customElements.get(e)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$7();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":customElements.get(e)||defineCustomElement$2()}}))}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-breadcrumb.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG~~,+dAA+d~~;;~~MCqC1eA~~,eAAa;;;;;;;iBAmDO;MAC/B,UAAU,EAAE,GAAG;MACf,MAAM,EAAE,EAAE;KACV;;EArDM,MAAM;IACZ,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,QACC,EAAC,IAAI,QACJ,yBAAiB,IAAI,CAAC,KAAK,CAAC,UAAU,IACrC,cACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,KAC9B,cACC,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,mBAAmB,GAAG,WAChD,CACL,EACA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAa;MAC1C,QACC,UAAI,GAAG,EAAE,KAAK,IACZ,KAAK,KAAK,CAAC,IAAI,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,yBAAyB,EAAC,KAAK,EAAC,WAAW,EAAC,WAAW,EAAC,WAAW,GAAG,EACnH,KAAK,KAAK,SAAS,IACnB,gBACE,IAAI,CAAC,SAAS,IACd,gBAAU,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,wBAAwB,GAAI,KAEpH,EAAC,QAAQ,QAAE,IAAI,CAAC,MAAM,CAAY,CAClC,CACK,KAEP,8BAAU,WAAW,EAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,IAAK,IAAI,IAAE,UAAU,EAAE,IAAI,CAAC,MAAM,KAC3E,IAAI,CAAC,MAAM,CACF,CACX,CACG,EACJ;KACF,CAAC,CACE,CACA,CACA,EACN;GACF;EAwBM,iBAAiB,CAAC,KAAc;IACtC,WAAW,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE;MACtC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;IACH,yBAAyB,CAAC,KAAK,CAAC,CAAC;GACjC;EAMM,aAAa,CAAC,KAAmC;IACvD,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;GAC5C;EAKM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolBreadcrumb"],"sources":["./src/components/style.sass?tag=kol-breadcrumb&mode=default&encapsulation=shadow","./src/components/breadcrumb/component.tsx"],"sourcesContent":["~~@windicss\n\n~~\n\tbox-sizing: border-box\n\tfont-size: inherit\n\thyphens: auto\n\tletter-spacing: inherit\n\tword-break: break-word\n\tword-spacing: inherit\n\nkol-heading-wc\n\tfont-weight: ~~700~~\n\nkol-icon\n\tcolor: inherit\n\nkol-span-wc\n\tdisplay: grid\n\tplace-items: center\n\twidth: 100%\n\n\t> span\n\t\tdisplay: flex\n\t\tgap: 0.25rem\n\t\tplace-items: center\n\na,\nbutton\n\tcursor: pointer\n\n\t&.icon-only\n\n\t\t> kol-span-wc\n\n\t\t\t> span\n\n\t\t\t\t> span\n\t\t\t\t\tdisplay: none\n\na\n\tdisplay: inline-flex\n\tplace-items: baseline\n\nbutton\n\tborder-width: 0\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\n\n/\n API\n /\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part link - Ermöglicht das Stylen der Links.\n * @part separator - Ermöglicht das Ändern des Separator-Icons.\n /\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._ariaLabel}>\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 _ariaLabel=\"\" _icon=\"fa-solid fa-house\" />…\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((link, index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t{index !== 0 && <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-right\" _part=\"separator\" exportparts=\"separator\" />}\n\t\t\t\t\t\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t{link._iconOnly ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<kol-icon _ariaLabel={link._label} _icon={typeof link._icon === 'string' ? link._icon : 'fa-solid fa-link-slash'} />\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<kol-link exportparts=\"link\" _useCase=\"nav\" {...link} _ariaLabel={link._label}>\n\t\t\t\t\t\t\t\t\t\t\t{link._label}\n\t\t\t\t\t\t\t\t\t\t</kol-link>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\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 Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t /\n\t@Prop() public _ariaLabel!: string;\n\n\t/\n\t Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t /\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-breadcrumb.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,wgBAAwgB;;MCqCnhBA,eAAa;;;;;;;iBAmDO;MAC/B,UAAU,EAAE,GAAG;MACf,MAAM,EAAE,EAAE;KACV;;EArDM,MAAM;IACZ,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,QACC,EAAC,IAAI,QACJ,yBAAiB,IAAI,CAAC,KAAK,CAAC,UAAU,IACrC,cACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,KAC9B,cACC,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,mBAAmB,GAAG,WAChD,CACL,EACA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAa;MAC1C,QACC,UAAI,GAAG,EAAE,KAAK,IACZ,KAAK,KAAK,CAAC,IAAI,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,yBAAyB,EAAC,KAAK,EAAC,WAAW,EAAC,WAAW,EAAC,WAAW,GAAG,EACnH,KAAK,KAAK,SAAS,IACnB,gBACE,IAAI,CAAC,SAAS,IACd,gBAAU,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,wBAAwB,GAAI,KAEpH,EAAC,QAAQ,QAAE,IAAI,CAAC,MAAM,CAAY,CAClC,CACK,KAEP,8BAAU,WAAW,EAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,IAAK,IAAI,IAAE,UAAU,EAAE,IAAI,CAAC,MAAM,KAC3E,IAAI,CAAC,MAAM,CACF,CACX,CACG,EACJ;KACF,CAAC,CACE,CACA,CACA,EACN;GACF;EAwBM,iBAAiB,CAAC,KAAc;IACtC,WAAW,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE;MACtC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;IACH,yBAAyB,CAAC,KAAK,CAAC,CAAC;GACjC;EAMM,aAAa,CAAC,KAAmC;IACvD,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;GAC5C;EAKM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolBreadcrumb"],"sources":["./src/components/style.sass?tag=kol-breadcrumb&mode=default&encapsulation=shadow","./src/components/breadcrumb/component.tsx"],"sourcesContent":["\n\tbox-sizing: border-box\n\tfont-size: inherit\n\thyphens: auto\n\tletter-spacing: inherit\n\tword-break: break-word\n\tword-spacing: inherit\n\nkol-heading-wc\n\tfont-weight: bold\n\nkol-icon\n\tcolor: inherit\n\nkol-span-wc\n\tdisplay: grid\n\tplace-items: center\n\twidth: 100%\n\n\t> span\n\t\tdisplay: flex\n\t\tgap: 0.25rem\n\t\tplace-items: center\n\na,\nbutton,\ninput,\nselect,\ntextarea\n\tcursor: pointer\n\na,\nbutton\n\t&.icon-only\n\n\t\t> kol-span-wc\n\n\t\t\t> span\n\n\t\t\t\t> span\n\t\t\t\t\tdisplay: none\n\na\n\tdisplay: inline-flex\n\tplace-items: baseline\n\nbutton\n\tbackground-color: transparent\n\tborder-width: 0\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\n\n/\n API\n /\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part link - Ermöglicht das Stylen der Links.\n * @part separator - Ermöglicht das Ändern des Separator-Icons.\n /\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._ariaLabel}>\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 _ariaLabel=\"\" _icon=\"fa-solid fa-house\" />…\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((link, index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t{index !== 0 && <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-right\" _part=\"separator\" exportparts=\"separator\" />}\n\t\t\t\t\t\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t{link._iconOnly ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<kol-icon _ariaLabel={link._label} _icon={typeof link._icon === 'string' ? link._icon : 'fa-solid fa-link-slash'} />\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<kol-link exportparts=\"link\" _useCase=\"nav\" {...link} _ariaLabel={link._label}>\n\t\t\t\t\t\t\t\t\t\t\t{link._label}\n\t\t\t\t\t\t\t\t\t\t</kol-link>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\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 Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t /\n\t@Prop() public _ariaLabel!: string;\n\n\t/\n\t Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t /\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"version":3}

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

@@ -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="@windicss; *{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:700}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{border-width:0}",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:defaultStyleCss}}},[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"./component7.js";const defaultStyleCss="*{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:bold}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}",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:defaultStyleCss}}},[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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-button-group.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG~~,+dAA+d~~;;~~MCW1eA~~,gBAAc;;;;;;EACnB,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,+BACC,eAAQ,CACa,CAChB,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonGroup"],"sources":["./src/components/style.sass?tag=kol-button-group&mode=default&encapsulation=shadow","./src/components/button-group/shadow.tsx"],"sourcesContent":["~~@windicss\n\n~~*\n\tbox-sizing: border-box\n\tfont-size: inherit\n\thyphens: auto\n\tletter-spacing: inherit\n\tword-break: break-word\n\tword-spacing: inherit\n\nkol-heading-wc\n\tfont-weight: ~~700~~\n\nkol-icon\n\tcolor: inherit\n\nkol-span-wc\n\tdisplay: grid\n\tplace-items: center\n\twidth: 100%\n\n\t> span\n\t\tdisplay: flex\n\t\tgap: 0.25rem\n\t\tplace-items: center\n\na,\nbutton\n\tcursor: pointer\n\n\t&.icon-only\n\n\t\t> kol-span-wc\n\n\t\t\t> span\n\n\t\t\t\t> span\n\t\t\t\t\tdisplay: none\n\na\n\tdisplay: inline-flex\n\tplace-items: baseline\n\nbutton\n\tborder-width: 0\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\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}
1	+ {"file":"kol-button-group.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,wgBAAwgB;;MCWnhBA,gBAAc;;;;;;EACnB,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,+BACC,eAAQ,CACa,CAChB,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonGroup"],"sources":["./src/components/style.sass?tag=kol-button-group&mode=default&encapsulation=shadow","./src/components/button-group/shadow.tsx"],"sourcesContent":["*\n\tbox-sizing: border-box\n\tfont-size: inherit\n\thyphens: auto\n\tletter-spacing: inherit\n\tword-break: break-word\n\tword-spacing: inherit\n\nkol-heading-wc\n\tfont-weight: bold\n\nkol-icon\n\tcolor: inherit\n\nkol-span-wc\n\tdisplay: grid\n\tplace-items: center\n\twidth: 100%\n\n\t> span\n\t\tdisplay: flex\n\t\tgap: 0.25rem\n\t\tplace-items: center\n\na,\nbutton,\ninput,\nselect,\ntextarea\n\tcursor: pointer\n\na,\nbutton\n\t&.icon-only\n\n\t\t> kol-span-wc\n\n\t\t\t> span\n\n\t\t\t\t> span\n\t\t\t\t\tdisplay: none\n\na\n\tdisplay: inline-flex\n\tplace-items: baseline\n\nbutton\n\tbackground-color: transparent\n\tborder-width: 0\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\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 CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{p as propergateFocus,d as defineCustomElement$2,a as defineCustomElement$5,b as defineCustomElement$6}from"./component.js";import{d as defineCustomElement$4}from"./component2.js";import{d as defineCustomElement$3}from"./component3.js";const defaultStyleCss="@windicss; *{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:700}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{border-width:0}",KolButtonLink$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propergateFocus(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._disabled=!1,this._icon=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=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,_icon:this._icon,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},h("slot",{name:"expert",slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-button-link",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1025,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_disabled:[516],_icon:[1],_iconOnly:[516,"_icon-only"],_id:[1],_label:[1],_on:[16],_role:[1],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[16]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-link","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-button-link":customElements.get(e)||customElements.define(e,KolButtonLink$1);break;case"kol-badge":customElements.get(e)||defineCustomElement$6();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":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{m as propergateFocus}from"./prop.validators.js";import{d as defineCustomElement$2,a as defineCustomElement$5,b as defineCustomElement$6}from"./component.js";import{d as defineCustomElement$4}from"./component2.js";import{d as defineCustomElement$3}from"./component3.js";const defaultStyleCss="*{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:bold}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}",KolButtonLink$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propergateFocus(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._disabled=!1,this._icon=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=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,_icon:this._icon,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},h("slot",{name:"expert",slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-button-link",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1025,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_disabled:[516],_icon:[1],_iconOnly:[516,"_icon-only"],_id:[1],_label:[1],_on:[16],_role:[1],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[16]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-link","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-button-link":customElements.get(e)||customElements.define(e,KolButtonLink$1);break;case"kol-badge":customElements.get(e)||defineCustomElement$6();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":customElements.get(e)||defineCustomElement$2()}}))}const KolButtonLink=KolButtonLink$1,defineCustomElement=defineCustomElement$1;export{KolButtonLink,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-button-link.js","mappings":"~~;;;;;;;;~~AAAA,MAAM,eAAe,GAAG~~,+dAA+d~~;;~~MCuB1eA~~,eAAa;;;;;IAIR,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACrC,CAAC;;;;;sBA0DoE,EAAE;;qBAUlB,KAAK;;qBAUL,KAAK;;;;;;yBA8BhB,KAAK;iBAKL,QAAQ;;;EA/G5C,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,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,GAAG,CACrB,CACV,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonLink"],"sources":["./src/components/style.sass?tag=kol-button-link&mode=default&encapsulation=shadow","./src/components/button-link/component.tsx"],"sourcesContent":["~~@windicss\n\n~~\n\tbox-sizing: border-box\n\tfont-size: inherit\n\thyphens: auto\n\tletter-spacing: inherit\n\tword-break: break-word\n\tword-spacing: inherit\n\nkol-heading-wc\n\tfont-weight: ~~700~~\n\nkol-icon\n\tcolor: inherit\n\nkol-span-wc\n\tdisplay: grid\n\tplace-items: center\n\twidth: 100%\n\n\t> span\n\t\tdisplay: flex\n\t\tgap: 0.25rem\n\t\tplace-items: center\n\na,\nbutton\n\tcursor: pointer\n\n\t&.icon-only\n\n\t\t> kol-span-wc\n\n\t\t\t> span\n\n\t\t\t\t> span\n\t\t\t\t\tdisplay: none\n\na\n\tdisplay: inline-flex\n\tplace-items: baseline\n\nbutton\n\tborder-width: 0\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tOptionalButtonLinkProps,\n\tRequiredButtonLinkProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { propergateFocus } from '../../utils/reuse';\nimport { Alignment } from '../../types/props/alignment';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Generic.Element.Members<RequiredButtonLinkProps, OptionalButtonLinkProps> {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconOnly={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_on={this._on}\n\t\t\t\t\t_role={this._role}\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\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, welche Elemente kontrolliert werden. (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 Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t /\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/\n\t Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t /\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/\n\t Gibt einen beschreibenden Text für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t \n\t - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t /\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string = '';\n\n\t/\n\t Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t /\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/\n\t Gibt an, ob der Button deaktiviert ist.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/\n\t Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/\n\t Gibt an, ob nur das Icon angezeigt wird.\n\t /\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/\n\t Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Gibt einen beschreibenden Text für das Text-Element an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für die Button-Events an.\n\t /\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\n\n\t/\n\t Gibt an, welche Role der Schalter hat.\n\t /\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/\n\t Gibt an, welchen Tab-Index der Button hat. (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 Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Gibt an, welche Typ der Button hat.\n\t /\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/\n\t Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n}\n"],"version":3}
1	+ {"file":"kol-button-link.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,wgBAAwgB;;MCuBnhBA,eAAa;;;;;IAIR,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACrC,CAAC;;;;;sBA0DoE,EAAE;;qBAUlB,KAAK;;qBAUL,KAAK;;;;;;yBA8BhB,KAAK;iBAKL,QAAQ;;;EA/G5C,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,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,GAAG,CACrB,CACV,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonLink"],"sources":["./src/components/style.sass?tag=kol-button-link&mode=default&encapsulation=shadow","./src/components/button-link/component.tsx"],"sourcesContent":["\n\tbox-sizing: border-box\n\tfont-size: inherit\n\thyphens: auto\n\tletter-spacing: inherit\n\tword-break: break-word\n\tword-spacing: inherit\n\nkol-heading-wc\n\tfont-weight: bold\n\nkol-icon\n\tcolor: inherit\n\nkol-span-wc\n\tdisplay: grid\n\tplace-items: center\n\twidth: 100%\n\n\t> span\n\t\tdisplay: flex\n\t\tgap: 0.25rem\n\t\tplace-items: center\n\na,\nbutton,\ninput,\nselect,\ntextarea\n\tcursor: pointer\n\na,\nbutton\n\t&.icon-only\n\n\t\t> kol-span-wc\n\n\t\t\t> span\n\n\t\t\t\t> span\n\t\t\t\t\tdisplay: none\n\na\n\tdisplay: inline-flex\n\tplace-items: baseline\n\nbutton\n\tbackground-color: transparent\n\tborder-width: 0\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tOptionalButtonLinkProps,\n\tRequiredButtonLinkProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { propergateFocus } from '../../utils/reuse';\nimport { Alignment } from '../../types/props/alignment';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Generic.Element.Members<RequiredButtonLinkProps, OptionalButtonLinkProps> {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconOnly={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_on={this._on}\n\t\t\t\t\t_role={this._role}\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\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, welche Elemente kontrolliert werden. (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 Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t /\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/\n\t Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t /\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/\n\t Gibt einen beschreibenden Text für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t \n\t - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t /\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string = '';\n\n\t/\n\t Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t /\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/\n\t Gibt an, ob der Button deaktiviert ist.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/\n\t Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/\n\t Gibt an, ob nur das Icon angezeigt wird.\n\t /\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/\n\t Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Gibt einen beschreibenden Text für das Text-Element an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für die Button-Events an.\n\t /\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\n\n\t/\n\t Gibt an, welche Role der Schalter hat.\n\t /\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/\n\t Gibt an, welchen Tab-Index der Button hat. (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 Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Gibt an, welche Typ der Button hat.\n\t /\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/\n\t Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n}\n"],"version":3}

package/dist/components/kol-card.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{k as watchBoolean,w as watchString}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$2}from"./component4.js";const defaultStyleCss="@windicss; *{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:700}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{border-width:0}",KolCard$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._level=1,this.state={_heading:"…"}}render(){return h(Host,null,h("div",null,h("div",{class:"header"},h("kol-heading-wc",{_level:this.state._level},this.state._heading),h("slot",{name:"header"})),h("div",{class:"content"},h("slot",{name:"content"})),!0===this.state._hasFooter&&h("div",{class:"footer"},h("slot",{name:"footer"}))))}validateHasFooter(e){watchBoolean(this,"_hasFooter",e)}validateHeading(e){watchString(this,"_heading",e,{required:!0})}validateHeadline(e){this.validateHeading(e)}validateLevel(e){watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasFooter(this._hasFooter),this.validateHeading(this._heading||this._headline),this.validateLevel(this._level)}static get watchers(){return{_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_level:["validateLevel"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-card",{_hasFooter:[516,"_has-footer"],_heading:[1],_headline:[1],_level:[2],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card","kol-heading-wc"].forEach((e=>{switch(e){case"kol-card":customElements.get(e)||customElements.define(e,KolCard$1);break;case"kol-heading-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{t as watchBoolean,w as watchString}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$2}from"./component4.js";const defaultStyleCss="*{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:bold}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}",KolCard$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._level=1,this.state={_heading:"…"}}render(){return h(Host,null,h("div",null,h("div",{class:"header"},h("kol-heading-wc",{_level:this.state._level},this.state._heading),h("slot",{name:"header"})),h("div",{class:"content"},h("slot",{name:"content"})),!0===this.state._hasFooter&&h("div",{class:"footer"},h("slot",{name:"footer"}))))}validateHasFooter(e){watchBoolean(this,"_hasFooter",e)}validateHeading(e){watchString(this,"_heading",e,{required:!0})}validateHeadline(e){this.validateHeading(e)}validateLevel(e){watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasFooter(this._hasFooter),this.validateHeading(this._heading||this._headline),this.validateLevel(this._level)}static get watchers(){return{_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_level:["validateLevel"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-card",{_hasFooter:[516,"_has-footer"],_heading:[1],_headline:[1],_level:[2],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card","kol-heading-wc"].forEach((e=>{switch(e){case"kol-card":customElements.get(e)||customElements.define(e,KolCard$1);break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolCard=KolCard$1,defineCustomElement=defineCustomElement$1;export{KolCard,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-card.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG~~,+dAA+d~~;;~~MCyC1eA~~,SAAO;;;;;sBAyBoC,KAAK;;;kBAiBrB,CAAC;iBAKR;MAC/B,QAAQ,EAAE,GAAG;KACb;;EAhDM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,eACC,WAAK,KAAK,EAAC,QAAQ,IAClB,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAkB,EACjF,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACL,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,IAAI,KAC9B,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACN,CACI,CACA,EACN;GACF;EAmCM,iBAAiB,CAAC,KAAe;IACvC,YAAY,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;GACxC;EAMM,eAAe,CAAC,KAAc;IACpC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;MACpC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAOM,gBAAgB,CAAC,KAAc;IACrC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;GAC5B;EAMM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAKM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolCard"],"sources":["./src/components/style.sass?tag=kol-card&mode=default&encapsulation=shadow","./src/components/card/component.tsx"],"sourcesContent":["~~@windicss\n\n~~\n\tbox-sizing: border-box\n\tfont-size: inherit\n\thyphens: auto\n\tletter-spacing: inherit\n\tword-break: break-word\n\tword-spacing: inherit\n\nkol-heading-wc\n\tfont-weight: ~~700~~\n\nkol-icon\n\tcolor: inherit\n\nkol-span-wc\n\tdisplay: grid\n\tplace-items: center\n\twidth: 100%\n\n\t> span\n\t\tdisplay: flex\n\t\tgap: 0.25rem\n\t\tplace-items: center\n\na,\nbutton\n\tcursor: pointer\n\n\t&.icon-only\n\n\t\t> kol-span-wc\n\n\t\t\t> span\n\n\t\t\t\t> span\n\t\t\t\t\tdisplay: none\n\na\n\tdisplay: inline-flex\n\tplace-items: baseline\n\nbutton\n\tborder-width: 0\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/\n API\n /\ntype RequiredProps = {\n\theading: string;\n};\ntype OptionalProps = {\n\thasFooter: boolean;\n\t/\n\t @deprecated Use _headline instead\n\t /\n\theadline: string;\n\tlevel: HeadingLevel;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part card - TBD\n \n @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n /\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _level={this.state._level}>{this.state._heading}</kol-heading-wc>\n\t\t\t\t\t\t<slot name=\"header\" />\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\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter === true && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\" />\n\t\t\t\t\t\t</div>\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 Gibt an, ob die Card einen Footer-Bereich hat.\n\t /\n\t@Prop({ reflect: true }) public _hasFooter?: boolean = false;\n\n\t/\n\t Gibt die Überschrift der Card an.\n\t /\n\t@Prop() public _heading!: string;\n\n\t/\n\t Gibt die Überschrift der Card an.\n\t \n\t @deprecated Verwende stattdessen das Property _heading.\n\t /\n\t@Prop() public _headline?: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t /\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_heading: '…', // '⚠'\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: boolean): void {\n\t\twatchBoolean(this, '_hasFooter', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t /\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateHeading(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateHeading(this._heading \|\| this._headline);\n\t\tthis.validateLevel(this._level);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-card.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,wgBAAwgB;;MCyCnhBA,SAAO;;;;;sBAyBoC,KAAK;;;kBAiBrB,CAAC;iBAKR;MAC/B,QAAQ,EAAE,GAAG;KACb;;EAhDM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,eACC,WAAK,KAAK,EAAC,QAAQ,IAClB,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAkB,EACjF,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACL,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,IAAI,KAC9B,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACN,CACI,CACA,EACN;GACF;EAmCM,iBAAiB,CAAC,KAAe;IACvC,YAAY,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;GACxC;EAMM,eAAe,CAAC,KAAc;IACpC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;MACpC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAOM,gBAAgB,CAAC,KAAc;IACrC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;GAC5B;EAMM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAKM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolCard"],"sources":["./src/components/style.sass?tag=kol-card&mode=default&encapsulation=shadow","./src/components/card/component.tsx"],"sourcesContent":["\n\tbox-sizing: border-box\n\tfont-size: inherit\n\thyphens: auto\n\tletter-spacing: inherit\n\tword-break: break-word\n\tword-spacing: inherit\n\nkol-heading-wc\n\tfont-weight: bold\n\nkol-icon\n\tcolor: inherit\n\nkol-span-wc\n\tdisplay: grid\n\tplace-items: center\n\twidth: 100%\n\n\t> span\n\t\tdisplay: flex\n\t\tgap: 0.25rem\n\t\tplace-items: center\n\na,\nbutton,\ninput,\nselect,\ntextarea\n\tcursor: pointer\n\na,\nbutton\n\t&.icon-only\n\n\t\t> kol-span-wc\n\n\t\t\t> span\n\n\t\t\t\t> span\n\t\t\t\t\tdisplay: none\n\na\n\tdisplay: inline-flex\n\tplace-items: baseline\n\nbutton\n\tbackground-color: transparent\n\tborder-width: 0\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/\n API\n /\ntype RequiredProps = {\n\theading: string;\n};\ntype OptionalProps = {\n\thasFooter: boolean;\n\t/\n\t @deprecated Use _headline instead\n\t /\n\theadline: string;\n\tlevel: HeadingLevel;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part card - TBD\n \n @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n /\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _level={this.state._level}>{this.state._heading}</kol-heading-wc>\n\t\t\t\t\t\t<slot name=\"header\" />\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\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter === true && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\" />\n\t\t\t\t\t\t</div>\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 Gibt an, ob die Card einen Footer-Bereich hat.\n\t /\n\t@Prop({ reflect: true }) public _hasFooter?: boolean = false;\n\n\t/\n\t Gibt die Überschrift der Card an.\n\t /\n\t@Prop() public _heading!: string;\n\n\t/\n\t Gibt die Überschrift der Card an.\n\t \n\t @deprecated Verwende stattdessen das Property _heading.\n\t /\n\t@Prop() public _headline?: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t /\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_heading: '…', // '⚠'\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: boolean): void {\n\t\twatchBoolean(this, '_hasFooter', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t /\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateHeading(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateHeading(this._heading \|\| this._headline);\n\t\tthis.validateLevel(this._level);\n\t}\n}\n"],"version":3}

package/dist/components/kol-color.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{s,f}from"./index.m.js";import{F as Farbspektrum}from"./color.js";import{c as colorName}from"./index3.js";const reverseKeywords={};for(const n of Object.keys(colorName))reverseKeywords[colorName[n]]=n;const convert$1={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};var conversions=convert$1;for(const n of Object.keys(convert$1)){if(!("channels"in convert$1[n]))throw new Error("missing channels property: "+n);if(!("labels"in convert$1[n]))throw new Error("missing channel labels property: "+n);if(convert$1[n].labels.length!==convert$1[n].channels)throw new Error("channel and label counts mismatch: "+n);const{channels:e,labels:t}=convert$1[n];delete convert$1[n].channels,delete convert$1[n].labels,Object.defineProperty(convert$1[n],"channels",{value:e}),Object.defineProperty(convert$1[n],"labels",{value:t})}function comparativeDistance(n,e){return(n[0]-e[0])**2+(n[1]-e[1])**2+(n[2]-e[2])**2}function buildGraph(){const n={},e=Object.keys(conversions);for(let t=e.length,r=0;r<t;r++)n[e[r]]={distance:-1,parent:null};return n}function deriveBFS(n){const e=buildGraph(),t=[n];for(e[n].distance=0;t.length;){const n=t.pop(),r=Object.keys(conversions[n]);for(let o=r.length,c=0;c<o;c++){const o=r[c],s=e[o];-1===s.distance&&(s.distance=e[n].distance+1,s.parent=n,t.unshift(o))}}return e}function link(n,e){return function(t){return e(n(t))}}function wrapConversion(n,e){const t=[e[n].parent,n];let r=conversions[e[n].parent][n],o=e[n].parent;for(;e[o].parent;)t.unshift(e[o].parent),r=link(conversions[e[o].parent][o],r),o=e[o].parent;return r.conversion=t,r}convert$1.rgb.hsl=function(n){const e=n[0]/255,t=n[1]/255,r=n[2]/255,o=Math.min(e,t,r),c=Math.max(e,t,r),s=c-o;let l,a;c===o?l=0:e===c?l=(t-r)/s:t===c?l=2+(r-e)/s:r===c&&(l=4+(e-t)/s),l=Math.min(60*l,360),l<0&&(l+=360);const i=(o+c)/2;return a=c===o?0:i<=.5?s/(c+o):s/(2-c-o),[l,100*a,100*i]},convert$1.rgb.hsv=function(n){let e,t,r,o,c;const s=n[0]/255,l=n[1]/255,a=n[2]/255,i=Math.max(s,l,a),u=i-Math.min(s,l,a),h=function(n){return(i-n)/6/u+.5};return 0===u?(o=0,c=0):(c=u/i,e=h(s),t=h(l),r=h(a),s===i?o=r-t:l===i?o=1/3+e-r:a===i&&(o=2/3+t-e),o<0?o+=1:o>1&&(o-=1)),[360*o,100*c,100*i]},convert$1.rgb.hwb=function(n){const e=n[0],t=n[1];let r=n[2];const o=convert$1.rgb.hsl(n)[0],c=1/255*Math.min(e,Math.min(t,r));return r=1-1/255*Math.max(e,Math.max(t,r)),[o,100*c,100*r]},convert$1.rgb.cmyk=function(n){const e=n[0]/255,t=n[1]/255,r=n[2]/255,o=Math.min(1-e,1-t,1-r);return[100*((1-e-o)/(1-o)||0),100*((1-t-o)/(1-o)||0),100*((1-r-o)/(1-o)||0),100*o]},convert$1.rgb.keyword=function(n){const e=reverseKeywords[n];if(e)return e;let t,r=1/0;for(const e of Object.keys(colorName)){const o=comparativeDistance(n,colorName[e]);o<r&&(r=o,t=e)}return t},convert$1.keyword.rgb=function(n){return colorName[n]},convert$1.rgb.xyz=function(n){let e=n[0]/255,t=n[1]/255,r=n[2]/255;e=e>.04045?((e+.055)/1.055)**2.4:e/12.92,t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,r=r>.04045?((r+.055)/1.055)**2.4:r/12.92;return[100*(.4124*e+.3576*t+.1805*r),100*(.2126*e+.7152*t+.0722*r),100*(.0193*e+.1192*t+.9505*r)]},convert$1.rgb.lab=function(n){const e=convert$1.rgb.xyz(n);let t=e[0],r=e[1],o=e[2];t/=95.047,r/=100,o/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;return[116*r-16,500*(t-r),200*(r-o)]},convert$1.hsl.rgb=function(n){const e=n[0]/360,t=n[1]/100,r=n[2]/100;let o,c,s;if(0===t)return s=255*r,[s,s,s];o=r<.5?r*(1+t):r+t-r*t;const l=2*r-o,a=[0,0,0];for(let n=0;n<3;n++)c=e+1/3*-(n-1),c<0&&c++,c>1&&c--,s=6*c<1?l+6*(o-l)*c:2*c<1?o:3*c<2?l+(o-l)*(2/3-c)*6:l,a[n]=255*s;return a},convert$1.hsl.hsv=function(n){const e=n[0];let t=n[1]/100,r=n[2]/100,o=t;const c=Math.max(r,.01);r*=2,t*=r<=1?r:2-r,o*=c<=1?c:2-c;return[e,100*(0===r?2*o/(c+o):2*t/(r+t)),100*((r+t)/2)]},convert$1.hsv.rgb=function(n){const e=n[0]/60,t=n[1]/100;let r=n[2]/100;const o=Math.floor(e)%6,c=e-Math.floor(e),s=255*r*(1-t),l=255*r*(1-t*c),a=255*r*(1-t*(1-c));switch(r*=255,o){case 0:return[r,a,s];case 1:return[l,r,s];case 2:return[s,r,a];case 3:return[s,l,r];case 4:return[a,s,r];case 5:return[r,s,l]}},convert$1.hsv.hsl=function(n){const e=n[0],t=n[1]/100,r=n[2]/100,o=Math.max(r,.01);let c,s;s=(2-t)*r;const l=(2-t)*o;return c=t*o,c/=l<=1?l:2-l,c=c||0,s/=2,[e,100*c,100*s]},convert$1.hwb.rgb=function(n){const e=n[0]/360;let t=n[1]/100,r=n[2]/100;const o=t+r;let c;o>1&&(t/=o,r/=o);const s=Math.floor(6*e),l=1-r;c=6*e-s,0!=(1&s)&&(c=1-c);const a=t+c*(l-t);let i,u,h;switch(s){default:case 6:case 0:i=l,u=a,h=t;break;case 1:i=a,u=l,h=t;break;case 2:i=t,u=l,h=a;break;case 3:i=t,u=a,h=l;break;case 4:i=a,u=t,h=l;break;case 5:i=l,u=t,h=a}return[255*i,255*u,255*h]},convert$1.cmyk.rgb=function(n){const e=n[0]/100,t=n[1]/100,r=n[2]/100,o=n[3]/100;return[255*(1-Math.min(1,e*(1-o)+o)),255*(1-Math.min(1,t*(1-o)+o)),255*(1-Math.min(1,r*(1-o)+o))]},convert$1.xyz.rgb=function(n){const e=n[0]/100,t=n[1]/100,r=n[2]/100;let o,c,s;return o=3.2406*e+-1.5372*t+-.4986*r,c=-.9689*e+1.8758*t+.0415*r,s=.0557*e+-.204*t+1.057*r,o=o>.0031308?1.055*o**(1/2.4)-.055:12.92*o,c=c>.0031308?1.055*c**(1/2.4)-.055:12.92*c,s=s>.0031308?1.055*s**(1/2.4)-.055:12.92*s,o=Math.min(Math.max(0,o),1),c=Math.min(Math.max(0,c),1),s=Math.min(Math.max(0,s),1),[255*o,255*c,255*s]},convert$1.xyz.lab=function(n){let e=n[0],t=n[1],r=n[2];e/=95.047,t/=100,r/=108.883,e=e>.008856?e**(1/3):7.787*e+16/116,t=t>.008856?t**(1/3):7.787*t+16/116,r=r>.008856?r**(1/3):7.787*r+16/116;return[116*t-16,500*(e-t),200*(t-r)]},convert$1.lab.xyz=function(n){let e,t,r;t=(n[0]+16)/116,e=n[1]/500+t,r=t-n[2]/200;const o=t**3,c=e**3,s=r**3;return t=o>.008856?o:(t-16/116)/7.787,e=c>.008856?c:(e-16/116)/7.787,r=s>.008856?s:(r-16/116)/7.787,e*=95.047,t*=100,r*=108.883,[e,t,r]},convert$1.lab.lch=function(n){const e=n[0],t=n[1],r=n[2];let o;o=360*Math.atan2(r,t)/2/Math.PI,o<0&&(o+=360);return[e,Math.sqrt(t*t+r*r),o]},convert$1.lch.lab=function(n){const e=n[0],t=n[1],r=n[2]/360*2*Math.PI;return[e,t*Math.cos(r),t*Math.sin(r)]},convert$1.rgb.ansi16=function(n,e=null){const[t,r,o]=n;let c=null===e?convert$1.rgb.hsv(n)[2]:e;if(c=Math.round(c/50),0===c)return 30;let s=30+(Math.round(o/255)<<2|Math.round(r/255)<<1|Math.round(t/255));return 2===c&&(s+=60),s},convert$1.hsv.ansi16=function(n){return convert$1.rgb.ansi16(convert$1.hsv.rgb(n),n[2])},convert$1.rgb.ansi256=function(n){const e=n[0],t=n[1],r=n[2];if(e===t&&t===r)return e<8?16:e>248?231:Math.round((e-8)/247*24)+232;return 16+36*Math.round(e/255*5)+6*Math.round(t/255*5)+Math.round(r/255*5)},convert$1.ansi16.rgb=function(n){let e=n%10;if(0===e||7===e)return n>50&&(e+=3.5),e=e/10.5*255,[e,e,e];const t=.5*(1+~~(n>50));return[(1&e)*t*255,(e>>1&1)*t*255,(e>>2&1)*t*255]},convert$1.ansi256.rgb=function(n){if(n>=232){const e=10*(n-232)+8;return[e,e,e]}let e;n-=16;return[Math.floor(n/36)/5*255,Math.floor((e=n%36)/6)/5*255,e%6/5*255]},convert$1.rgb.hex=function(n){const e=(((255&Math.round(n[0]))<<16)+((255&Math.round(n[1]))<<8)+(255&Math.round(n[2]))).toString(16).toUpperCase();return"000000".substring(e.length)+e},convert$1.hex.rgb=function(n){const e=n.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!e)return[0,0,0];let t=e[0];3===e[0].length&&(t=t.split("").map((n=>n+n)).join(""));const r=parseInt(t,16);return[r>>16&255,r>>8&255,255&r]},convert$1.rgb.hcg=function(n){const e=n[0]/255,t=n[1]/255,r=n[2]/255,o=Math.max(Math.max(e,t),r),c=Math.min(Math.min(e,t),r),s=o-c;let l,a;return l=s<1?c/(1-s):0,a=s<=0?0:o===e?(t-r)/s%6:o===t?2+(r-e)/s:4+(e-t)/s,a/=6,a%=1,[360*a,100*s,100*l]},convert$1.hsl.hcg=function(n){const e=n[1]/100,t=n[2]/100,r=t<.5?2*e*t:2*e*(1-t);let o=0;return r<1&&(o=(t-.5*r)/(1-r)),[n[0],100*r,100*o]},convert$1.hsv.hcg=function(n){const e=n[1]/100,t=n[2]/100,r=e*t;let o=0;return r<1&&(o=(t-r)/(1-r)),[n[0],100*r,100*o]},convert$1.hcg.rgb=function(n){const e=n[0]/360,t=n[1]/100,r=n[2]/100;if(0===t)return[255*r,255*r,255*r];const o=[0,0,0],c=e%1*6,s=c%1,l=1-s;let a=0;switch(Math.floor(c)){case 0:o[0]=1,o[1]=s,o[2]=0;break;case 1:o[0]=l,o[1]=1,o[2]=0;break;case 2:o[0]=0,o[1]=1,o[2]=s;break;case 3:o[0]=0,o[1]=l,o[2]=1;break;case 4:o[0]=s,o[1]=0,o[2]=1;break;default:o[0]=1,o[1]=0,o[2]=l}return a=(1-t)*r,[255*(t*o[0]+a),255*(t*o[1]+a),255*(t*o[2]+a)]},convert$1.hcg.hsv=function(n){const e=n[1]/100,t=e+n[2]/100*(1-e);let r=0;return t>0&&(r=e/t),[n[0],100*r,100*t]},convert$1.hcg.hsl=function(n){const e=n[1]/100,t=n[2]/100*(1-e)+.5*e;let r=0;return t>0&&t<.5?r=e/(2*t):t>=.5&&t<1&&(r=e/(2*(1-t))),[n[0],100*r,100*t]},convert$1.hcg.hwb=function(n){const e=n[1]/100,t=e+n[2]/100*(1-e);return[n[0],100*(t-e),100*(1-t)]},convert$1.hwb.hcg=function(n){const e=n[1]/100,t=1-n[2]/100,r=t-e;let o=0;return r<1&&(o=(t-r)/(1-r)),[n[0],100*r,100*o]},convert$1.apple.rgb=function(n){return[n[0]/65535*255,n[1]/65535*255,n[2]/65535*255]},convert$1.rgb.apple=function(n){return[n[0]/255*65535,n[1]/255*65535,n[2]/255*65535]},convert$1.gray.rgb=function(n){return[n[0]/100*255,n[0]/100*255,n[0]/100*255]},convert$1.gray.hsl=function(n){return[0,0,n[0]]},convert$1.gray.hsv=convert$1.gray.hsl,convert$1.gray.hwb=function(n){return[0,100,n[0]]},convert$1.gray.cmyk=function(n){return[0,0,0,n[0]]},convert$1.gray.lab=function(n){return[n[0],0,0]},convert$1.gray.hex=function(n){const e=255&Math.round(n[0]/100*255),t=((e<<16)+(e<<8)+e).toString(16).toUpperCase();return"000000".substring(t.length)+t},convert$1.rgb.gray=function(n){return[(n[0]+n[1]+n[2])/3/255*100]};var route=function(n){const e=deriveBFS(n),t={},r=Object.keys(e);for(let n=r.length,o=0;o<n;o++){const n=r[o];null!==e[n].parent&&(t[n]=wrapConversion(n,e))}return t};const convert={},models=Object.keys(conversions);function wrapRaw(n){const e=function(...e){const t=e[0];return null==t?t:(t.length>1&&(e=t),n(e))};return"conversion"in n&&(e.conversion=n.conversion),e}function wrapRounded(n){const e=function(...e){const t=e[0];if(null==t)return t;t.length>1&&(e=t);const r=n(e);if("object"==typeof r)for(let n=r.length,e=0;e<n;e++)r[e]=Math.round(r[e]);return r};return"conversion"in n&&(e.conversion=n.conversion),e}models.forEach((n=>{convert[n]={},Object.defineProperty(convert[n],"channels",{value:conversions[n].channels}),Object.defineProperty(convert[n],"labels",{value:conversions[n].labels});const e=route(n);Object.keys(e).forEach((t=>{const r=e[t];convert[n][t]=wrapRounded(r),convert[n][t].raw=wrapRaw(r)}))}));var colorConvert=convert;const cmykSaturation=(n,e=1)=>[n[0]*e,n[1]*e,n[2]*e,n[3]*e],getHexBySat=(n,e=1)=>colorConvert.cmyk.hex(cmykSaturation(colorConvert.hex.cmyk(n),e)),getValues=(n,e=1)=>{const t=getHexBySat(n,e);let r=null,o=null,c=null;const l=s(t,"000"),a=s(t,"fff");return l>=a?(r="000",o=f(l),c=l):(r="fff",o=f(a),c=a),{color:{background:t,text:r},contrast:{value:c,score:o}}},defaultStyleCss="@windicss; *{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:700}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{border-width:0}",COLOR_NAMES=Object.keys(Farbspektrum),KolColor$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.selectedColor=null}render(){const n=[.2,.4,.6,.8,1];return h("table",{class:"text-center",style:{borderSpacing:"10px",borderCollapse:"separate"}},h("thead",null,h("tr",null,h("th",null,"Farbe"),n.map((n=>h("th",null,100*n,"%"))))),h("caption",null,"Diese Tabelle stellt ein mögliches Farbspektrum im Zusammenhang mit den Farbkontrasten für die Barrierefreiheit interaktiv dar.",h("br",null),h("small",null,"Durch Anklicken einer Farbkachel werden alle Farbkacheln mit zu geringem Farbabstand ausgeblendet.",h("br",null),"Durch erneutes Anklicken der ausgewählten Farbe (schwarz umrandet) werden wieder alle Farben eingeblendet.")),h("tbody",null,COLOR_NAMES.map((e=>h("tr",null,h("td",null,e),n.map((n=>{const t=getValues(Farbspektrum[e],n);let r=4.5;return"string"==typeof this.selectedColor&&this.selectedColor!==t.color.background&&(r=s(this.selectedColor,t.color.background)),h("td",{style:{cursor:"pointer",backgroundColor:r>=4.5?`#${t.color.background}`:"transparent",color:r>=4.5?`#${t.color.text}`:"#999",padding:".5em",outline:this.selectedColor===t.color.background?"2px solid #000":"unset",outlineOffset:"-2px",boxShadow:"AAA"===t.contrast.score&&r>=4.5?"3px 3px 3px grey":"unset"},onClick:()=>{this.selectedColor===t.color.background?this.selectedColor=null:this.selectedColor=t.color.background},onKeyPress:()=>{this.selectedColor===t.color.background?this.selectedColor=null:this.selectedColor=t.color.background}},t.color.background,h("br",null),h("small",null,"(",t.contrast.score,")"))})))))))}static get style(){return{default:defaultStyleCss}}},[33,"kol-color",{selectedColor:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-color"].forEach((n=>{if("kol-color"===n)customElements.get(n)||customElements.define(n,KolColor$1)}))}const KolColor=KolColor$1,defineCustomElement=defineCustomElement$1;export{KolColor,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{s,f}from"./index.m.js";import{F as Farbspektrum}from"./color.js";import{c as colorName}from"./index3.js";const reverseKeywords={};for(const n of Object.keys(colorName))reverseKeywords[colorName[n]]=n;const convert$1={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};var conversions=convert$1;for(const n of Object.keys(convert$1)){if(!("channels"in convert$1[n]))throw new Error("missing channels property: "+n);if(!("labels"in convert$1[n]))throw new Error("missing channel labels property: "+n);if(convert$1[n].labels.length!==convert$1[n].channels)throw new Error("channel and label counts mismatch: "+n);const{channels:e,labels:t}=convert$1[n];delete convert$1[n].channels,delete convert$1[n].labels,Object.defineProperty(convert$1[n],"channels",{value:e}),Object.defineProperty(convert$1[n],"labels",{value:t})}function comparativeDistance(n,e){return(n[0]-e[0])**2+(n[1]-e[1])**2+(n[2]-e[2])**2}function buildGraph(){const n={},e=Object.keys(conversions);for(let t=e.length,r=0;r<t;r++)n[e[r]]={distance:-1,parent:null};return n}function deriveBFS(n){const e=buildGraph(),t=[n];for(e[n].distance=0;t.length;){const n=t.pop(),r=Object.keys(conversions[n]);for(let o=r.length,c=0;c<o;c++){const o=r[c],s=e[o];-1===s.distance&&(s.distance=e[n].distance+1,s.parent=n,t.unshift(o))}}return e}function link(n,e){return function(t){return e(n(t))}}function wrapConversion(n,e){const t=[e[n].parent,n];let r=conversions[e[n].parent][n],o=e[n].parent;for(;e[o].parent;)t.unshift(e[o].parent),r=link(conversions[e[o].parent][o],r),o=e[o].parent;return r.conversion=t,r}convert$1.rgb.hsl=function(n){const e=n[0]/255,t=n[1]/255,r=n[2]/255,o=Math.min(e,t,r),c=Math.max(e,t,r),s=c-o;let l,a;c===o?l=0:e===c?l=(t-r)/s:t===c?l=2+(r-e)/s:r===c&&(l=4+(e-t)/s),l=Math.min(60*l,360),l<0&&(l+=360);const i=(o+c)/2;return a=c===o?0:i<=.5?s/(c+o):s/(2-c-o),[l,100*a,100*i]},convert$1.rgb.hsv=function(n){let e,t,r,o,c;const s=n[0]/255,l=n[1]/255,a=n[2]/255,i=Math.max(s,l,a),u=i-Math.min(s,l,a),h=function(n){return(i-n)/6/u+.5};return 0===u?(o=0,c=0):(c=u/i,e=h(s),t=h(l),r=h(a),s===i?o=r-t:l===i?o=1/3+e-r:a===i&&(o=2/3+t-e),o<0?o+=1:o>1&&(o-=1)),[360*o,100*c,100*i]},convert$1.rgb.hwb=function(n){const e=n[0],t=n[1];let r=n[2];const o=convert$1.rgb.hsl(n)[0],c=1/255*Math.min(e,Math.min(t,r));return r=1-1/255*Math.max(e,Math.max(t,r)),[o,100*c,100*r]},convert$1.rgb.cmyk=function(n){const e=n[0]/255,t=n[1]/255,r=n[2]/255,o=Math.min(1-e,1-t,1-r);return[100*((1-e-o)/(1-o)||0),100*((1-t-o)/(1-o)||0),100*((1-r-o)/(1-o)||0),100*o]},convert$1.rgb.keyword=function(n){const e=reverseKeywords[n];if(e)return e;let t,r=1/0;for(const e of Object.keys(colorName)){const o=comparativeDistance(n,colorName[e]);o<r&&(r=o,t=e)}return t},convert$1.keyword.rgb=function(n){return colorName[n]},convert$1.rgb.xyz=function(n){let e=n[0]/255,t=n[1]/255,r=n[2]/255;e=e>.04045?((e+.055)/1.055)**2.4:e/12.92,t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,r=r>.04045?((r+.055)/1.055)**2.4:r/12.92;return[100*(.4124*e+.3576*t+.1805*r),100*(.2126*e+.7152*t+.0722*r),100*(.0193*e+.1192*t+.9505*r)]},convert$1.rgb.lab=function(n){const e=convert$1.rgb.xyz(n);let t=e[0],r=e[1],o=e[2];t/=95.047,r/=100,o/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;return[116*r-16,500*(t-r),200*(r-o)]},convert$1.hsl.rgb=function(n){const e=n[0]/360,t=n[1]/100,r=n[2]/100;let o,c,s;if(0===t)return s=255*r,[s,s,s];o=r<.5?r*(1+t):r+t-r*t;const l=2*r-o,a=[0,0,0];for(let n=0;n<3;n++)c=e+1/3*-(n-1),c<0&&c++,c>1&&c--,s=6*c<1?l+6*(o-l)*c:2*c<1?o:3*c<2?l+(o-l)*(2/3-c)*6:l,a[n]=255*s;return a},convert$1.hsl.hsv=function(n){const e=n[0];let t=n[1]/100,r=n[2]/100,o=t;const c=Math.max(r,.01);r*=2,t*=r<=1?r:2-r,o*=c<=1?c:2-c;return[e,100*(0===r?2*o/(c+o):2*t/(r+t)),100*((r+t)/2)]},convert$1.hsv.rgb=function(n){const e=n[0]/60,t=n[1]/100;let r=n[2]/100;const o=Math.floor(e)%6,c=e-Math.floor(e),s=255*r*(1-t),l=255*r*(1-t*c),a=255*r*(1-t*(1-c));switch(r*=255,o){case 0:return[r,a,s];case 1:return[l,r,s];case 2:return[s,r,a];case 3:return[s,l,r];case 4:return[a,s,r];case 5:return[r,s,l]}},convert$1.hsv.hsl=function(n){const e=n[0],t=n[1]/100,r=n[2]/100,o=Math.max(r,.01);let c,s;s=(2-t)*r;const l=(2-t)*o;return c=t*o,c/=l<=1?l:2-l,c=c||0,s/=2,[e,100*c,100*s]},convert$1.hwb.rgb=function(n){const e=n[0]/360;let t=n[1]/100,r=n[2]/100;const o=t+r;let c;o>1&&(t/=o,r/=o);const s=Math.floor(6*e),l=1-r;c=6*e-s,0!=(1&s)&&(c=1-c);const a=t+c*(l-t);let i,u,h;switch(s){default:case 6:case 0:i=l,u=a,h=t;break;case 1:i=a,u=l,h=t;break;case 2:i=t,u=l,h=a;break;case 3:i=t,u=a,h=l;break;case 4:i=a,u=t,h=l;break;case 5:i=l,u=t,h=a}return[255*i,255*u,255*h]},convert$1.cmyk.rgb=function(n){const e=n[0]/100,t=n[1]/100,r=n[2]/100,o=n[3]/100;return[255*(1-Math.min(1,e*(1-o)+o)),255*(1-Math.min(1,t*(1-o)+o)),255*(1-Math.min(1,r*(1-o)+o))]},convert$1.xyz.rgb=function(n){const e=n[0]/100,t=n[1]/100,r=n[2]/100;let o,c,s;return o=3.2406*e+-1.5372*t+-.4986*r,c=-.9689*e+1.8758*t+.0415*r,s=.0557*e+-.204*t+1.057*r,o=o>.0031308?1.055*o**(1/2.4)-.055:12.92*o,c=c>.0031308?1.055*c**(1/2.4)-.055:12.92*c,s=s>.0031308?1.055*s**(1/2.4)-.055:12.92*s,o=Math.min(Math.max(0,o),1),c=Math.min(Math.max(0,c),1),s=Math.min(Math.max(0,s),1),[255*o,255*c,255*s]},convert$1.xyz.lab=function(n){let e=n[0],t=n[1],r=n[2];e/=95.047,t/=100,r/=108.883,e=e>.008856?e**(1/3):7.787*e+16/116,t=t>.008856?t**(1/3):7.787*t+16/116,r=r>.008856?r**(1/3):7.787*r+16/116;return[116*t-16,500*(e-t),200*(t-r)]},convert$1.lab.xyz=function(n){let e,t,r;t=(n[0]+16)/116,e=n[1]/500+t,r=t-n[2]/200;const o=t**3,c=e**3,s=r**3;return t=o>.008856?o:(t-16/116)/7.787,e=c>.008856?c:(e-16/116)/7.787,r=s>.008856?s:(r-16/116)/7.787,e*=95.047,t*=100,r*=108.883,[e,t,r]},convert$1.lab.lch=function(n){const e=n[0],t=n[1],r=n[2];let o;o=360*Math.atan2(r,t)/2/Math.PI,o<0&&(o+=360);return[e,Math.sqrt(t*t+r*r),o]},convert$1.lch.lab=function(n){const e=n[0],t=n[1],r=n[2]/360*2*Math.PI;return[e,t*Math.cos(r),t*Math.sin(r)]},convert$1.rgb.ansi16=function(n,e=null){const[t,r,o]=n;let c=null===e?convert$1.rgb.hsv(n)[2]:e;if(c=Math.round(c/50),0===c)return 30;let s=30+(Math.round(o/255)<<2|Math.round(r/255)<<1|Math.round(t/255));return 2===c&&(s+=60),s},convert$1.hsv.ansi16=function(n){return convert$1.rgb.ansi16(convert$1.hsv.rgb(n),n[2])},convert$1.rgb.ansi256=function(n){const e=n[0],t=n[1],r=n[2];if(e===t&&t===r)return e<8?16:e>248?231:Math.round((e-8)/247*24)+232;return 16+36*Math.round(e/255*5)+6*Math.round(t/255*5)+Math.round(r/255*5)},convert$1.ansi16.rgb=function(n){let e=n%10;if(0===e||7===e)return n>50&&(e+=3.5),e=e/10.5*255,[e,e,e];const t=.5*(1+~~(n>50));return[(1&e)*t*255,(e>>1&1)*t*255,(e>>2&1)*t*255]},convert$1.ansi256.rgb=function(n){if(n>=232){const e=10*(n-232)+8;return[e,e,e]}let e;n-=16;return[Math.floor(n/36)/5*255,Math.floor((e=n%36)/6)/5*255,e%6/5*255]},convert$1.rgb.hex=function(n){const e=(((255&Math.round(n[0]))<<16)+((255&Math.round(n[1]))<<8)+(255&Math.round(n[2]))).toString(16).toUpperCase();return"000000".substring(e.length)+e},convert$1.hex.rgb=function(n){const e=n.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!e)return[0,0,0];let t=e[0];3===e[0].length&&(t=t.split("").map((n=>n+n)).join(""));const r=parseInt(t,16);return[r>>16&255,r>>8&255,255&r]},convert$1.rgb.hcg=function(n){const e=n[0]/255,t=n[1]/255,r=n[2]/255,o=Math.max(Math.max(e,t),r),c=Math.min(Math.min(e,t),r),s=o-c;let l,a;return l=s<1?c/(1-s):0,a=s<=0?0:o===e?(t-r)/s%6:o===t?2+(r-e)/s:4+(e-t)/s,a/=6,a%=1,[360*a,100*s,100*l]},convert$1.hsl.hcg=function(n){const e=n[1]/100,t=n[2]/100,r=t<.5?2*e*t:2*e*(1-t);let o=0;return r<1&&(o=(t-.5*r)/(1-r)),[n[0],100*r,100*o]},convert$1.hsv.hcg=function(n){const e=n[1]/100,t=n[2]/100,r=e*t;let o=0;return r<1&&(o=(t-r)/(1-r)),[n[0],100*r,100*o]},convert$1.hcg.rgb=function(n){const e=n[0]/360,t=n[1]/100,r=n[2]/100;if(0===t)return[255*r,255*r,255*r];const o=[0,0,0],c=e%1*6,s=c%1,l=1-s;let a=0;switch(Math.floor(c)){case 0:o[0]=1,o[1]=s,o[2]=0;break;case 1:o[0]=l,o[1]=1,o[2]=0;break;case 2:o[0]=0,o[1]=1,o[2]=s;break;case 3:o[0]=0,o[1]=l,o[2]=1;break;case 4:o[0]=s,o[1]=0,o[2]=1;break;default:o[0]=1,o[1]=0,o[2]=l}return a=(1-t)*r,[255*(t*o[0]+a),255*(t*o[1]+a),255*(t*o[2]+a)]},convert$1.hcg.hsv=function(n){const e=n[1]/100,t=e+n[2]/100*(1-e);let r=0;return t>0&&(r=e/t),[n[0],100*r,100*t]},convert$1.hcg.hsl=function(n){const e=n[1]/100,t=n[2]/100*(1-e)+.5*e;let r=0;return t>0&&t<.5?r=e/(2*t):t>=.5&&t<1&&(r=e/(2*(1-t))),[n[0],100*r,100*t]},convert$1.hcg.hwb=function(n){const e=n[1]/100,t=e+n[2]/100*(1-e);return[n[0],100*(t-e),100*(1-t)]},convert$1.hwb.hcg=function(n){const e=n[1]/100,t=1-n[2]/100,r=t-e;let o=0;return r<1&&(o=(t-r)/(1-r)),[n[0],100*r,100*o]},convert$1.apple.rgb=function(n){return[n[0]/65535*255,n[1]/65535*255,n[2]/65535*255]},convert$1.rgb.apple=function(n){return[n[0]/255*65535,n[1]/255*65535,n[2]/255*65535]},convert$1.gray.rgb=function(n){return[n[0]/100*255,n[0]/100*255,n[0]/100*255]},convert$1.gray.hsl=function(n){return[0,0,n[0]]},convert$1.gray.hsv=convert$1.gray.hsl,convert$1.gray.hwb=function(n){return[0,100,n[0]]},convert$1.gray.cmyk=function(n){return[0,0,0,n[0]]},convert$1.gray.lab=function(n){return[n[0],0,0]},convert$1.gray.hex=function(n){const e=255&Math.round(n[0]/100*255),t=((e<<16)+(e<<8)+e).toString(16).toUpperCase();return"000000".substring(t.length)+t},convert$1.rgb.gray=function(n){return[(n[0]+n[1]+n[2])/3/255*100]};var route=function(n){const e=deriveBFS(n),t={},r=Object.keys(e);for(let n=r.length,o=0;o<n;o++){const n=r[o];null!==e[n].parent&&(t[n]=wrapConversion(n,e))}return t};const convert={},models=Object.keys(conversions);function wrapRaw(n){const e=function(...e){const t=e[0];return null==t?t:(t.length>1&&(e=t),n(e))};return"conversion"in n&&(e.conversion=n.conversion),e}function wrapRounded(n){const e=function(...e){const t=e[0];if(null==t)return t;t.length>1&&(e=t);const r=n(e);if("object"==typeof r)for(let n=r.length,e=0;e<n;e++)r[e]=Math.round(r[e]);return r};return"conversion"in n&&(e.conversion=n.conversion),e}models.forEach((n=>{convert[n]={},Object.defineProperty(convert[n],"channels",{value:conversions[n].channels}),Object.defineProperty(convert[n],"labels",{value:conversions[n].labels});const e=route(n);Object.keys(e).forEach((t=>{const r=e[t];convert[n][t]=wrapRounded(r),convert[n][t].raw=wrapRaw(r)}))}));var colorConvert=convert;const cmykSaturation=(n,e=1)=>[n[0]*e,n[1]*e,n[2]*e,n[3]*e],getHexBySat=(n,e=1)=>colorConvert.cmyk.hex(cmykSaturation(colorConvert.hex.cmyk(n),e)),getValues=(n,e=1)=>{const t=getHexBySat(n,e);let r=null,o=null,c=null;const l=s(t,"000"),a=s(t,"fff");return l>=a?(r="000",o=f(l),c=l):(r="fff",o=f(a),c=a),{color:{background:t,text:r},contrast:{value:c,score:o}}},defaultStyleCss="*{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:bold}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}",COLOR_NAMES=Object.keys(Farbspektrum),KolColor$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.selectedColor=null}render(){const n=[.2,.4,.6,.8,1];return h("table",{class:"text-center",style:{borderSpacing:"10px",borderCollapse:"separate"}},h("thead",null,h("tr",null,h("th",null,"Farbe"),n.map((n=>h("th",null,100*n,"%"))))),h("caption",null,"Diese Tabelle stellt ein mögliches Farbspektrum im Zusammenhang mit den Farbkontrasten für die Barrierefreiheit interaktiv dar.",h("br",null),h("small",null,"Durch Anklicken einer Farbkachel werden alle Farbkacheln mit zu geringem Farbabstand ausgeblendet.",h("br",null),"Durch erneutes Anklicken der ausgewählten Farbe (schwarz umrandet) werden wieder alle Farben eingeblendet.")),h("tbody",null,COLOR_NAMES.map((e=>h("tr",null,h("td",null,e),n.map((n=>{const t=getValues(Farbspektrum[e],n);let r=4.5;return"string"==typeof this.selectedColor&&this.selectedColor!==t.color.background&&(r=s(this.selectedColor,t.color.background)),h("td",{style:{cursor:"pointer",backgroundColor:r>=4.5?`#${t.color.background}`:"transparent",color:r>=4.5?`#${t.color.text}`:"#999",padding:".5em",outline:this.selectedColor===t.color.background?"2px solid #000":"unset",outlineOffset:"-2px",boxShadow:"AAA"===t.contrast.score&&r>=4.5?"3px 3px 3px grey":"unset"},onClick:()=>{this.selectedColor===t.color.background?this.selectedColor=null:this.selectedColor=t.color.background},onKeyPress:()=>{this.selectedColor===t.color.background?this.selectedColor=null:this.selectedColor=t.color.background}},t.color.background,h("br",null),h("small",null,"(",t.contrast.score,")"))})))))))}static get style(){return{default:defaultStyleCss}}},[33,"kol-color",{selectedColor:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-color"].forEach((n=>{if("kol-color"===n)customElements.get(n)||customElements.define(n,KolColor$1)}))}const KolColor=KolColor$1,defineCustomElement=defineCustomElement$1;export{KolColor,defineCustomElement};