@public-ui/components 1.5.0-rc.3 → 1.5.0-rc.4

package/dist/components/kol-accordion.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{x as featureHint,n as nonce,w as watchString,v as setState,t as watchBoolean}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$2,a as defineCustomElement$6,b as defineCustomElement$7}from"./component.js";import{d as defineCustomElement$4}from"./component2.js";import{d as defineCustomElement$3}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{align-items:baseline;display:flex;justify-items:center}kol-span-wc kol-icon{display:inline-flex}a,button,input,option,select,textarea{appearance:none;cursor:pointer;font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}";featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this.onClick=e=>{this._open=!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._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",{class:{accordion:!0,open:!0===this.state._open,close:!0!==this.state._open}},h("kol-heading-wc",{_headline:"",_level:this.state._level},h("kol-button-wc",{_ariaControls:this.nonce,_ariaExpanded:this.state._open,_icon:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._heading,_on:{onClick:this.onClick}})),h("div",{class:"header"},h("slot",{name:"header"})),h("div",{"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce,hidden:!1===this.state._open,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-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-accordion":customElements.get(e)||customElements.define(e,KolAccordion$1);break;case"kol-badge":customElements.get(e)||defineCustomElement$7();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":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,n as nonce,w as watchString,v as setState,t as watchBoolean}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$2,a as defineCustomElement$6,b as defineCustomElement$7}from"./component.js";import{d as defineCustomElement$4}from"./component2.js";import{d as defineCustomElement$3}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}";featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this.onClick=e=>{this._open=!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._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",{class:{accordion:!0,open:!0===this.state._open,close:!0!==this.state._open}},h("kol-heading-wc",{_headline:"",_level:this.state._level},h("kol-button-wc",{_ariaControls:this.nonce,_ariaExpanded:this.state._open,_icon:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._heading,_on:{onClick:this.onClick}})),h("div",{class:"header"},h("slot",{name:"header"})),h("div",{"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce,hidden:!1===this.state._open,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-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-accordion":customElements.get(e)||customElements.define(e,KolAccordion$1);break;case"kol-badge":customElements.get(e)||defineCustomElement$7();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$2()}}))}const KolAccordion=KolAccordion$1,defineCustomElement=defineCustomElement$1;export{KolAccordion,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-accordion.js","mappings":"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","names":["KolAccordion"],"sources":["./src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","./src/components/accordion/component.tsx"],"sourcesContent":["@import '../style.css';\n@import '../host-display-block.css';\n\n.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\tjustify-items: start;\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\n\nimport { EventValueOrEventCallback } from '../../types/callbacks';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\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]?: EventValueOrEventCallback<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.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly nonce = nonce();\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\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t\tclose: this.state._open !== true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-heading-wc _headline=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icon={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}\n\t\t\t\t\t\t\t_label={this.state._heading}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\taria-hidden={this.state._open === false ? 'true' : undefined}\n\t\t\t\t\t\tclass=\"content\"\n\t\t\t\t\t\tid={this.nonce}\n\t\t\t\t\t\thidden={this.state._open === false}\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: '…', // ⚠ required\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});\n\t};\n}\n"],"version":3}
+{"file":"kol-accordion.js","mappings":"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","names":["KolAccordion"],"sources":["./src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","./src/components/accordion/component.tsx"],"sourcesContent":["@import '../style.css';\n@import '../host-display-block.css';\n\n.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\tjustify-items: start;\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\n\nimport { EventValueOrEventCallback } from '../../types/callbacks';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\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]?: EventValueOrEventCallback<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.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly nonce = nonce();\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\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t\tclose: this.state._open !== true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-heading-wc _headline=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icon={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}\n\t\t\t\t\t\t\t_label={this.state._heading}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\taria-hidden={this.state._open === false ? 'true' : undefined}\n\t\t\t\t\t\tclass=\"content\"\n\t\t\t\t\t\tid={this.nonce}\n\t\t\t\t\t\thidden={this.state._open === false}\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: '…', // ⚠ required\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});\n\t};\n}\n"],"version":3}

package/dist/components/kol-breadcrumb.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{w as watchString,E 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=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{align-items:baseline;display:flex;justify-items:center}kol-span-wc kol-icon{display:inline-flex}a,button,input,option,select,textarea{appearance:none;cursor:pointer;font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul,li{margin:0;padding:0;list-style:none;display:flex;gap:0.5em;flex-wrap:wrap;place-items:center}kol-icon::part(separator){font-weight:900;font-size:0.7em}kol-icon::part(separator)::before{content:'\\f054';font-family:'Font Awesome 6 Free'}",KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._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:"codicon codicon-home"}),"…"),this.state._links.map(((t,n)=>h("li",{key:n},0!==n&&h("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-chevron-right",_part:"separator",exportparts:"separator"}),n===e?h("span",null,t._iconOnly?h("kol-icon",{_ariaLabel:t._label,_icon:"string"==typeof t._icon?t._icon:"codicon codicon-symbol-event"}):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,E 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=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}ul,li{margin:0;padding:0;list-style:none;display:flex;gap:0.5em;flex-wrap:wrap;place-items:center}kol-icon::part(separator){font-weight:900;font-size:0.7em}kol-icon::part(separator)::before{content:'\\f054';font-family:'Font Awesome 6 Free'}",KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._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:"codicon codicon-home"}),"…"),this.state._links.map(((t,n)=>h("li",{key:n},0!==n&&h("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-chevron-right"}),n===e?h("span",null,t._iconOnly?h("kol-icon",{_ariaLabel:t._label,_icon:"string"==typeof t._icon?t._icon:"codicon codicon-symbol-event"}):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

@@ -1 +1 @@
-{"file":"kol-breadcrumb.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,8kCAA8kC;;MCqCzlCA,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,sBAAsB,GAAG,WACnD,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,+BAA+B,EAAC,KAAK,EAAC,WAAW,EAAC,WAAW,EAAC,WAAW,GAAG,EACzH,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,8BAA8B,GAAI,KAE1H,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/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","./src/components/breadcrumb/component.tsx"],"sourcesContent":["@import '../style.css';\n\nul,\nli {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: flex;\n\tgap: 0.5em;\n\tflex-wrap: wrap;\n\tplace-items: center;\n}\n\nkol-icon::part(separator) {\n\tfont-weight: 900;\n\tfont-size: 0.7em;\n}\n\nkol-icon::part(separator)::before {\n\tcontent: '\\f054';\n\tfont-family: 'Font Awesome 6 Free';\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { 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.css',\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=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map((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=\"codicon codicon-chevron-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 : 'codicon codicon-symbol-event'} />\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}
+{"file":"kol-breadcrumb.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ghCAAghC;;MCqC3hCA,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,sBAAsB,GAAG,WACnD,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,+BAA+B,GAAG,EAC/E,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,8BAA8B,GAAI,KAE1H,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/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","./src/components/breadcrumb/component.tsx"],"sourcesContent":["@import '../style.css';\n\nul,\nli {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: flex;\n\tgap: 0.5em;\n\tflex-wrap: wrap;\n\tplace-items: center;\n}\n\nkol-icon::part(separator) {\n\tfont-weight: 900;\n\tfont-size: 0.7em;\n}\n\nkol-icon::part(separator)::before {\n\tcontent: '\\f054';\n\tfont-family: 'Font Awesome 6 Free';\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { 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.css',\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=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map((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=\"codicon codicon-chevron-right\" />}\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 : 'codicon codicon-symbol-event'} />\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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{d as defineCustomElement$2}from"./component7.js";const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{align-items:baseline;display:flex;justify-items:center}kol-span-wc kol-icon{display:inline-flex}a,button,input,option,select,textarea{appearance:none;cursor:pointer;font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>kol-button-group-wc{display:inline-flex;flex-wrap:wrap}",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=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>kol-button-group-wc{display:inline-flex;flex-wrap:wrap}",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

@@ -1 +1 @@
-{"file":"kol-button-group.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,05BAA05B;;MCWr6BA,gBAAc;;;;;;EACnB,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,+BACC,eAAQ,CACa,CAChB,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonGroup"],"sources":["./src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","./src/components/button-group/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n}\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.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-button-group.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,41BAA41B;;MCWv2BA,gBAAc;;;;;;EACnB,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,+BACC,eAAQ,CACa,CAChB,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonGroup"],"sources":["./src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","./src/components/button-group/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n}\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.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{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=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{align-items:baseline;display:flex;justify-items:center}kol-span-wc kol-icon{display:inline-flex}a,button,input,option,select,textarea{appearance:none;cursor:pointer;font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-flex}:is(a,button){align-items:baseline;text-align:left;text-decoration-line:underline}a{display:inline-flex;place-items:center}:is(a,button):is(:focus,:hover){text-decoration-thickness:0.2em}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:white;left:unset;padding:0.75em 1em;position:unset}kol-icon.external-link-icon{display:inline-flex}",KolButtonLink$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propergateFocus(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._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:"link",_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=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color;width:100%}:host{display:inline-flex}:is(a,button){align-items:baseline;text-align:left;text-decoration-line:underline}a{display:inline-flex;place-items:center}:is(a,button):is(:focus,:hover){text-decoration-thickness:0.2em}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:white;left:unset;padding:1em;position:unset}kol-icon.external-link-icon{display:inline-flex}",KolButtonLink$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._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:"link",_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((t=>{switch(t){case"kol-button-link":customElements.get(t)||customElements.define(t,KolButtonLink$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 KolButtonLink=KolButtonLink$1,defineCustomElement=defineCustomElement$1;export{KolButtonLink,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-button-link.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,+yCAA+yC;;MCuB1zCA,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;;;;;;;qBAwEoD,KAAK;;qBAUL,KAAK;;;;;;yBA8BhB,KAAK;iBAKL,QAAQ;;;EAnH5C,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,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAMnB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,CACrB,CACV,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonLink"],"sources":["./src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","./src/components/button-link/component.tsx"],"sourcesContent":["@import '../link.css';\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.css',\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=\"link\"\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{/*\n\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\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}
+{"file":"kol-button-link.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,k5CAAk5C;;MCuB75CA,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;;;;;;;qBAwEoD,KAAK;;qBAUL,KAAK;;;;;;yBA8BhB,KAAK;iBAKL,QAAQ;;;EAnH5C,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,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAMnB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,CACrB,CACV,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonLink"],"sources":["./src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","./src/components/button-link/component.tsx"],"sourcesContent":["@import '../link.css';\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.css',\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=\"link\"\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{/*\n\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-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=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{align-items:baseline;display:flex;justify-items:center}kol-span-wc kol-icon{display:inline-flex}a,button,input,option,select,textarea{appearance:none;cursor:pointer;font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}",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",{_headline:this.state._heading,_level:this.state._level}),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=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}",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",{_headline:this.state._heading,_level:this.state._level}),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

@@ -1 +1 @@
-{"file":"kol-card.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,61BAA61B;;MCyCx2BA,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,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,EAC5F,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/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","./src/components/card/component.tsx"],"sourcesContent":["@import '../style.css';\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.css',\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 _headline={this.state._heading} _level={this.state._level}></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}
+{"file":"kol-card.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,+xBAA+xB;;MCyC1yBA,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,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,EAC5F,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/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","./src/components/card/component.tsx"],"sourcesContent":["@import '../style.css';\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.css',\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 _headline={this.state._heading} _level={this.state._level}></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-details.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as watchBoolean,w as watchString}from"./prop.validators.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component8.js";const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{align-items:baseline;display:flex;justify-items:center}kol-span-wc kol-icon{display:inline-flex}a,button,input,option,select,textarea{appearance:none;cursor:pointer;font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}details{display:grid}details>summary{cursor:pointer;display:flex;place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid}details[open]>summary>span,details>summary:focus>span,details>summary:hover>span{border-bottom-color:black}details>kol-indented-text{margin:0.25em 0px 0px 0.5em}",KolDetails$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onClick=()=>{setTimeout((()=>{var e;this._open=null===(e=this.htmlDetailsElement)||void 0===e?void 0:e.open}),25)},this._open=!1,this._summary=void 0,this.state={_summary:"…"}}render(){return h(Host,null,h("details",{ref:e=>{this.htmlDetailsElement=e},open:this.state._open},h("summary",{onClick:this.onClick},this.state._open?h("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-chevron-down"}):h("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-chevron-right"}),h("span",null,this.state._summary)),h("kol-indented-text",null,h("slot",null))))}validateOpen(e){watchBoolean(this,"_open",e)}validateSummary(e){watchString(this,"_summary",e,{required:!0})}componentWillLoad(){this.validateOpen(this._open),this.validateSummary(this._summary)}static get watchers(){return{_open:["validateOpen"],_summary:["validateSummary"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-details",{_open:[1540],_summary:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-details","kol-icon","kol-indented-text"].forEach((e=>{switch(e){case"kol-details":customElements.get(e)||customElements.define(e,KolDetails$1);break;case"kol-icon":customElements.get(e)||defineCustomElement$3();break;case"kol-indented-text":customElements.get(e)||defineCustomElement$2()}}))}const KolDetails=KolDetails$1,defineCustomElement=defineCustomElement$1;export{KolDetails,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as watchBoolean,w as watchString}from"./prop.validators.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component8.js";const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}details{display:grid}details>summary{cursor:pointer;display:flex;place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid}details[open]>summary>span,details>summary:focus>span,details>summary:hover>span{border-bottom-color:black}details>kol-indented-text{margin:0.25em 0px 0px 0.5em}",KolDetails$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onClick=()=>{setTimeout((()=>{var t;this._open=null===(t=this.htmlDetailsElement)||void 0===t?void 0:t.open}),25)},this._open=!1,this._summary=void 0,this.state={_summary:"…"}}render(){return h(Host,null,h("details",{ref:t=>{this.htmlDetailsElement=t},open:this.state._open},h("summary",{onClick:this.onClick},this.state._open?h("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-chevron-down"}):h("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-chevron-right"}),h("span",null,this.state._summary)),h("kol-indented-text",null,h("slot",null))))}validateOpen(t){watchBoolean(this,"_open",t)}validateSummary(t){watchString(this,"_summary",t,{required:!0})}componentWillLoad(){this.validateOpen(this._open),this.validateSummary(this._summary)}static get watchers(){return{_open:["validateOpen"],_summary:["validateSummary"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-details",{_open:[1540],_summary:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-details","kol-icon","kol-indented-text"].forEach((t=>{switch(t){case"kol-details":customElements.get(t)||customElements.define(t,KolDetails$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$3();break;case"kol-indented-text":customElements.get(t)||defineCustomElement$2()}}))}const KolDetails=KolDetails$1,defineCustomElement=defineCustomElement$1;export{KolDetails,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-details.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,8qCAA8qC;;MC2BzrCA,YAAU;;;;;IAuEd,YAAO,GAAG;MACjB,UAAU,CAAC;;QACV,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC;OAC3C,EAAE,EAAE,CAAC,CAAC;KACP,CAAC;iBA5C+D,KAAK;;iBAUtC;MAC/B,QAAQ,EAAE,GAAG;KACb;;EAxCM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,eACC,GAAG,EAAE,CAAC,EAAE;QACP,IAAI,CAAC,kBAAkB,GAAG,EAAwB,CAAC;OACnD,EACD,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAEtB,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5B,IAAI,CAAC,KAAK,CAAC,KAAK,IAChB,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,8BAA8B,GAAG,KAE/D,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,+BAA+B,GAAG,CAChE,EACD,gBAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAQ,CACzB,EACV,6BACC,eAAQ,CACW,CACX,CACJ,EACN;GACF;EAuBM,YAAY,CAAC,KAAe;IAClC,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAMM,eAAe,CAAC,KAAc;IACpC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;MACpC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAKM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolDetails"],"sources":["./src/components/details/style.css?tag=kol-details&mode=default&encapsulation=shadow","./src/components/details/component.tsx"],"sourcesContent":["@import '../style.css';\n@import '../host-display-block.css';\n\ndetails {\n\tdisplay: grid;\n}\ndetails > summary {\n\tcursor: pointer;\n\tdisplay: flex;\n\tplace-items: center;\n}\ndetails > summary > span {\n\tborder-bottom-color: grey;\n\tborder-bottom-style: solid;\n}\ndetails[open] > summary > span,\ndetails > summary:focus > span,\ndetails > summary:hover > span {\n\tborder-bottom-color: black;\n}\ndetails > kol-indented-text {\n\tmargin: 0.25em 0px 0px 0.5em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tsummary: string;\n};\ntype OptionalProps = {\n\topen: boolean;\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@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate htmlDetailsElement?: HTMLDetailsElement;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<details\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.htmlDetailsElement = el as HTMLDetailsElement;\n\t\t\t\t\t}}\n\t\t\t\t\topen={this.state._open}\n\t\t\t\t>\n\t\t\t\t\t<summary onClick={this.onClick}>\n\t\t\t\t\t\t{this.state._open ? (\n\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"codicon codicon-chevron-down\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"codicon codicon-chevron-right\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span>{this.state._summary}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<kol-indented-text>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</kol-indented-text>\n\t\t\t\t</details>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Detailbeschreibung geöffnet oder geschlossen ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/**\n\t * Gibt die Zusammenfassung der Detailbeschreibung an.\n\t */\n\t@Prop() public _summary!: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_summary: '…', // '⚠'\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 (@Watch)\n\t */\n\t@Watch('_summary')\n\tpublic validateSummary(value?: string): void {\n\t\twatchString(this, '_summary', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateSummary(this._summary);\n\t}\n\n\tprivate onClick = () => {\n\t\tsetTimeout(() => {\n\t\t\tthis._open = this.htmlDetailsElement?.open;\n\t\t}, 25);\n\t};\n}\n"],"version":3}
+{"file":"kol-details.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,gnCAAgnC;;MC2B3nCA,YAAU;;;;;IAuEd,YAAO,GAAG;MACjB,UAAU,CAAC;;QACV,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC;OAC3C,EAAE,EAAE,CAAC,CAAC;KACP,CAAC;iBA5C+D,KAAK;;iBAUtC;MAC/B,QAAQ,EAAE,GAAG;KACb;;EAxCM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,eACC,GAAG,EAAE,CAAC,EAAE;QACP,IAAI,CAAC,kBAAkB,GAAG,EAAwB,CAAC;OACnD,EACD,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAEtB,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5B,IAAI,CAAC,KAAK,CAAC,KAAK,IAChB,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,8BAA8B,GAAG,KAE/D,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,+BAA+B,GAAG,CAChE,EACD,gBAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAQ,CACzB,EACV,6BACC,eAAQ,CACW,CACX,CACJ,EACN;GACF;EAuBM,YAAY,CAAC,KAAe;IAClC,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAMM,eAAe,CAAC,KAAc;IACpC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;MACpC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAKM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolDetails"],"sources":["./src/components/details/style.css?tag=kol-details&mode=default&encapsulation=shadow","./src/components/details/component.tsx"],"sourcesContent":["@import '../style.css';\n@import '../host-display-block.css';\n\ndetails {\n\tdisplay: grid;\n}\ndetails > summary {\n\tcursor: pointer;\n\tdisplay: flex;\n\tplace-items: center;\n}\ndetails > summary > span {\n\tborder-bottom-color: grey;\n\tborder-bottom-style: solid;\n}\ndetails[open] > summary > span,\ndetails > summary:focus > span,\ndetails > summary:hover > span {\n\tborder-bottom-color: black;\n}\ndetails > kol-indented-text {\n\tmargin: 0.25em 0px 0px 0.5em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tsummary: string;\n};\ntype OptionalProps = {\n\topen: boolean;\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@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate htmlDetailsElement?: HTMLDetailsElement;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<details\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.htmlDetailsElement = el as HTMLDetailsElement;\n\t\t\t\t\t}}\n\t\t\t\t\topen={this.state._open}\n\t\t\t\t>\n\t\t\t\t\t<summary onClick={this.onClick}>\n\t\t\t\t\t\t{this.state._open ? (\n\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"codicon codicon-chevron-down\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"codicon codicon-chevron-right\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span>{this.state._summary}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<kol-indented-text>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</kol-indented-text>\n\t\t\t\t</details>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Detailbeschreibung geöffnet oder geschlossen ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/**\n\t * Gibt die Zusammenfassung der Detailbeschreibung an.\n\t */\n\t@Prop() public _summary!: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_summary: '…', // '⚠'\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 (@Watch)\n\t */\n\t@Watch('_summary')\n\tpublic validateSummary(value?: string): void {\n\t\twatchString(this, '_summary', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateSummary(this._summary);\n\t}\n\n\tprivate onClick = () => {\n\t\tsetTimeout(() => {\n\t\t\tthis._open = this.htmlDetailsElement?.open;\n\t\t}, 25);\n\t};\n}\n"],"version":3}

package/dist/components/kol-heading.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{d as defineCustomElement$2}from"./component4.js";const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{align-items:baseline;display:flex;justify-items:center}kol-span-wc kol-icon{display:inline-flex}a,button,input,option,select,textarea{appearance:none;cursor:pointer;font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>kol-heading-wc{display:grid}:host>kol-heading-wc>.overline{order:1}:host>kol-heading-wc>.headline{order:2}",KolHeading$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._headline=void 0,this._level=void 0,this._secondaryHeadline=void 0}render(){return h("kol-heading-wc",{_headline:this._headline,_level:this._level,_secondaryHeadline:this._secondaryHeadline},h("slot",null))}static get style(){return{default:defaultStyleCss}}},[33,"kol-heading",{_headline:[1],_level:[2],_secondaryHeadline:[1,"_secondary-headline"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-heading","kol-heading-wc"].forEach((e=>{switch(e){case"kol-heading":customElements.get(e)||customElements.define(e,KolHeading$1);break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolHeading=KolHeading$1,defineCustomElement=defineCustomElement$1;export{KolHeading,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{d as defineCustomElement$2}from"./component4.js";const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>kol-heading-wc{display:grid}:host>kol-heading-wc>.overline{order:1}:host>kol-heading-wc>.headline{order:2}",KolHeading$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._headline=void 0,this._level=void 0,this._secondaryHeadline=void 0}render(){return h("kol-heading-wc",{_headline:this._headline,_level:this._level,_secondaryHeadline:this._secondaryHeadline},h("slot",null))}static get style(){return{default:defaultStyleCss}}},[33,"kol-heading",{_headline:[1],_level:[2],_secondaryHeadline:[1,"_secondary-headline"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-heading","kol-heading-wc"].forEach((e=>{switch(e){case"kol-heading":customElements.get(e)||customElements.define(e,KolHeading$1);break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolHeading=KolHeading$1,defineCustomElement=defineCustomElement$1;export{KolHeading,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-heading.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,68BAA68B;;MCYx9BA,YAAU;;;;;;;;;EACf,MAAM;IACZ,QACC,sBAAgB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,IAC1G,eAAQ,CACQ,EAChB;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolHeading"],"sources":["./src/components/heading/style.css?tag=kol-heading&mode=default&encapsulation=shadow","./src/components/heading/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-heading-wc {\n\tdisplay: grid;\n}\n:host > kol-heading-wc > .overline {\n\torder: 1;\n}\n:host > kol-heading-wc > .headline {\n\torder: 2;\n}\n","import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolHeading implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-heading-wc _headline={this._headline} _level={this._level} _secondaryHeadline={this._secondaryHeadline}>\n\t\t\t\t<slot />\n\t\t\t</kol-heading-wc>\n\t\t);\n\t}\n\t/**\n\t * Gibt den Text der Überschrift an.\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. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.\n\t */\n\t@Prop() public _level?: HeadingLevel;\n\n\t/**\n\t * Gibt den Text der zusätzlichen Überschrift an.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n}\n"],"version":3}
+{"file":"kol-heading.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,+4BAA+4B;;MCY15BA,YAAU;;;;;;;;;EACf,MAAM;IACZ,QACC,sBAAgB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,IAC1G,eAAQ,CACQ,EAChB;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolHeading"],"sources":["./src/components/heading/style.css?tag=kol-heading&mode=default&encapsulation=shadow","./src/components/heading/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-heading-wc {\n\tdisplay: grid;\n}\n:host > kol-heading-wc > .overline {\n\torder: 1;\n}\n:host > kol-heading-wc > .headline {\n\torder: 2;\n}\n","import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolHeading implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-heading-wc _headline={this._headline} _level={this._level} _secondaryHeadline={this._secondaryHeadline}>\n\t\t\t\t<slot />\n\t\t\t</kol-heading-wc>\n\t\t);\n\t}\n\t/**\n\t * Gibt den Text der Überschrift an.\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. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.\n\t */\n\t@Prop() public _level?: HeadingLevel;\n\n\t/**\n\t * Gibt den Text der zusätzlichen Überschrift an.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as watchBoolean,b as watchValidator,B as isString,d as devHint,v as setState,m as propergateFocus}from"./prop.validators.js";import{g as getRenderStates}from"./controller.js";import{I as InputCheckboxRadioController}from"./controller2.js";import{d as defineCustomElement$9}from"./component5.js";import{d as defineCustomElement$2,a as defineCustomElement$7,b as defineCustomElement$8}from"./component.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component3.js";class InputCheckboxController extends InputCheckboxRadioController{constructor(e,t,i){super(e,t,i),this.component=e}validateChecked(e){watchBoolean(this.component,"_checked",e),this.setFormAssociatedValue(this.component.state._checked)}validateIcon(e){watchValidator(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&(isString(e.checked,1)||isString(e.indeterminate,1)||isString(e.unchecked,1))),new Set(["InputCheckboxIcons"]),e)}validateIndeterminate(e){watchBoolean(this.component,"_indeterminate",e)}validateType(e){devHint('The "_type" prop is deprecated. Use "_variant" instead.'),this.validateVariant(e)}validateValue(e){setState(this.component,"_value",e)}validateVariant(e){watchValidator(this.component,"_variant",(e=>"string"==typeof e&&("button"===e||"checkbox"===e||"switch"===e)),new Set(["String {button, checkbox, switch}"]),e)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcon(this.component._icon),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant||this.component._type)}}const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{align-items:baseline;display:flex;justify-items:center}kol-span-wc kol-icon{display:inline-flex}a,button,input,option,select,textarea{appearance:none;cursor:pointer;font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.kol-required span::after{content:'*'}:host{display:block}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select[multiple] option,select:not([multiple]),textarea{font-size:1rem}:is(button,input,option,select,textarea):disabled,.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}label{cursor:pointer}.required label>span::after{content:'*';padding-left:0.125em}kol-input{align-items:center;display:grid;justify-items:left;width:100}kol-input.checkbox,kol-input.switch{grid-template-columns:auto 1fr}kol-input .input{display:inline-flex;order:1}kol-input .input div{display:inline-flex}kol-input .input input{margin:0px}kol-input label{order:2}kol-input.error>kol-alert,kol-input .hint{grid-column:span 2}kol-input kol-alert.error{order:3}kol-input .hint{order:4}input{border-width:2px;border-style:solid;line-height:24px}input[type='checkbox']{appearance:none;background-color:white;cursor:pointer;transition:0.5s}input[type='checkbox'].kol-disabled:before{cursor:not-allowed}input[type='checkbox']:before{content:'';cursor:pointer}.disabled{opacity:0.33}.checkbox kol-icon,.switch kol-icon{display:none}.button{cursor:pointer;display:inline-flex;width:auto}.button input{display:none}.checkbox input[type='checkbox']{height:1.5em;width:1.5em}.checkbox input[type='checkbox']:before{background-color:transparent;display:block;height:1.5em;position:relative;width:1.5em}.checkbox input[type='checkbox']:checked:before{border-bottom-width:3px;border-color:white;border-radius:1px;border-right-width:3px;border-style:solid;border-width:0px 3px 3px 0px;height:0.75em;left:calc(0.375em - 2px);transform:rotate(40deg) translate(-50%, -50%);top:calc(0.7125em - 2px);width:0.375em}.checkbox input[type='checkbox']:indeterminate:before{height:0.35em;left:0.14em;top:0.45em;width:1em}.switch input[type='checkbox']{display:inline-block;height:1.7em;min-width:3.2em;position:relative;width:3.2em}.switch input[type='checkbox']:before{background-color:black;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);position:absolute;-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;transition:0.5;width:1.2em}.switch input[type='checkbox']:checked:before{background-color:white;-webkit-transform:translateX(1.5em);-moz-transform:translateX(1.5em);-ms-transform:translateX(1.5em);transform:translateX(1.5em)}.switch input[type='checkbox']:indeterminate:before{transform:translateX(0.75em)}",KolInputCheckbox$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDiscribedBy:e}=getRenderStates(this.state);return h(Host,null,h("kol-input",{class:{[this.state._variant]:!0},"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_required:this.state._required,_touched:this.state._touched},h("span",{slot:"label"},h("slot",null)),h("div",{slot:"input"},h("kol-icon",{onClick:this.onChange,_ariaLabel:"",_icon:this.state._indeterminate?this.state._icon.indeterminate:this.state._checked?this.state._icon.checked:this.state._icon.unchecked}),h("input",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,checked:!0===this.state._checked,disabled:!0===this.state._disabled,id:this.state._id,indeterminate:!0===this.state._indeterminate,name:this.state._name,required:!0===this.state._required,tabIndex:this.state._tabIndex,title:"",type:"checkbox",value:"string"==typeof this.state._value?this.state._value:""},this.controller.onFacade,{onChange:this.onChange})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propergateFocus(this.host,this.ref)},this.onChange=e=>{this._checked=!1===this._checked,this._indeterminate=!1,this.controller.setValue(e,this._checked)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._indeterminate=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._tabIndex=void 0,this._touched=!1,this._type=void 0,this._value=void 0,this._variant=void 0,this.state={_checked:!1,_icon:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-add"},_id:"…",_indeterminate:!1,_variant:"checkbox"},this.controller=new InputCheckboxController(this,"checkbox",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateChecked(e){this.controller.validateChecked(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcon(e){this.controller.validateIcon(e)}validateId(e){this.controller.validateId(e)}validateIndeterminate(e){this.controller.validateIndeterminate(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){this.controller.validateValue(e)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-checkbox",{_accessKey:[1,"_access-key"],_alert:[1540],_checked:[1540],_disabled:[516],_error:[1],_hideLabel:[516,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_indeterminate:[1540],_name:[1],_on:[16],_required:[516],_tabIndex:[2,"_tab-index"],_touched:[1540],_type:[1],_value:[1],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-checkbox","kol-alert","kol-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-input-checkbox":customElements.get(e)||customElements.define(e,KolInputCheckbox$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$9();break;case"kol-badge":customElements.get(e)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-icon":customElements.get(e)||defineCustomElement$5();break;case"kol-input":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$2()}}))}const KolInputCheckbox=KolInputCheckbox$1,defineCustomElement=defineCustomElement$1;export{KolInputCheckbox,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as watchBoolean,b as watchValidator,B as isString,d as devHint,v as setState,m as propergateFocus}from"./prop.validators.js";import{g as getRenderStates}from"./controller.js";import{I as InputCheckboxRadioController}from"./controller2.js";import{d as defineCustomElement$9}from"./component5.js";import{d as defineCustomElement$2,a as defineCustomElement$7,b as defineCustomElement$8}from"./component.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component3.js";class InputCheckboxController extends InputCheckboxRadioController{constructor(e,t,i){super(e,t,i),this.component=e}validateChecked(e){watchBoolean(this.component,"_checked",e),this.setFormAssociatedValue(this.component.state._checked)}validateIcon(e){watchValidator(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&(isString(e.checked,1)||isString(e.indeterminate,1)||isString(e.unchecked,1))),new Set(["InputCheckboxIcons"]),e)}validateIndeterminate(e){watchBoolean(this.component,"_indeterminate",e)}validateType(e){devHint('The "_type" prop is deprecated. Use "_variant" instead.'),this.validateVariant(e)}validateValue(e){setState(this.component,"_value",e)}validateVariant(e){watchValidator(this.component,"_variant",(e=>"string"==typeof e&&("button"===e||"checkbox"===e||"switch"===e)),new Set(["String {button, checkbox, switch}"]),e)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcon(this.component._icon),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant||this.component._type)}}const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}.kol-required span::after{content:'*'}:host{display:block}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select[multiple] option,select:not([multiple]),textarea{font-size:1rem;padding:0 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}:is(button,input,option,select,textarea):disabled,.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}label{cursor:pointer}.required label>span::after{content:'*';padding-left:0.125em}kol-input{align-items:center;display:grid;justify-items:left;width:100}kol-input.checkbox,kol-input.switch{grid-template-columns:auto 1fr}kol-input .input{display:inline-flex;order:1}kol-input .input div{display:inline-flex}kol-input .input input{margin:0px}kol-input label{order:2}kol-input.error>kol-alert,kol-input .hint{grid-column:span 2}kol-input kol-alert.error{order:3}kol-input .hint{order:4}input{border-width:2px;border-style:solid;line-height:24px}input[type='checkbox']{appearance:none;background-color:white;cursor:pointer;transition:0.5s}input[type='checkbox'].kol-disabled:before{cursor:not-allowed}input[type='checkbox']:before{content:'';cursor:pointer}.disabled{opacity:0.33}.checkbox kol-icon,.switch kol-icon{display:none}.button{cursor:pointer;display:inline-flex;width:auto}.button input{display:none}.checkbox input[type='checkbox']{height:1.5em;width:1.5em}.checkbox input[type='checkbox']:before{background-color:transparent;display:block;height:1.5em;position:relative;width:1.5em}.checkbox input[type='checkbox']:checked:before{border-bottom-width:3px;border-color:white;border-radius:1px;border-right-width:3px;border-style:solid;border-width:0px 3px 3px 0px;height:0.75em;left:calc(0.375em - 2px);transform:rotate(40deg) translate(-50%, -50%);top:calc(0.7125em - 2px);width:0.375em}.checkbox input[type='checkbox']:indeterminate:before{height:0.35em;left:0.14em;top:0.45em;width:1em}.switch input[type='checkbox']{display:inline-block;height:1.7em;min-width:3.2em;position:relative;width:3.2em}.switch input[type='checkbox']:before{background-color:black;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);position:absolute;-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;transition:0.5;width:1.2em}.switch input[type='checkbox']:checked:before{background-color:white;-webkit-transform:translateX(1.5em);-moz-transform:translateX(1.5em);-ms-transform:translateX(1.5em);transform:translateX(1.5em)}.switch input[type='checkbox']:indeterminate:before{transform:translateX(0.75em)}",KolInputCheckbox$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDiscribedBy:e}=getRenderStates(this.state);return h(Host,null,h("kol-input",{class:{[this.state._variant]:!0},"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_required:this.state._required,_touched:this.state._touched},h("span",{slot:"label"},h("slot",null)),h("div",{slot:"input"},h("kol-icon",{onClick:this.onChange,_ariaLabel:"",_icon:this.state._indeterminate?this.state._icon.indeterminate:this.state._checked?this.state._icon.checked:this.state._icon.unchecked}),h("input",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,checked:!0===this.state._checked,disabled:!0===this.state._disabled,id:this.state._id,indeterminate:!0===this.state._indeterminate,name:this.state._name,required:!0===this.state._required,tabIndex:this.state._tabIndex,title:"",type:"checkbox",value:"string"==typeof this.state._value?this.state._value:""},this.controller.onFacade,{onChange:this.onChange})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propergateFocus(this.host,this.ref)},this.onChange=e=>{this._checked=!1===this._checked,this._indeterminate=!1,this.controller.setValue(e,this._checked)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._indeterminate=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._tabIndex=void 0,this._touched=!1,this._type=void 0,this._value=void 0,this._variant=void 0,this.state={_checked:!1,_icon:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-add"},_id:"…",_indeterminate:!1,_variant:"checkbox"},this.controller=new InputCheckboxController(this,"checkbox",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateChecked(e){this.controller.validateChecked(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcon(e){this.controller.validateIcon(e)}validateId(e){this.controller.validateId(e)}validateIndeterminate(e){this.controller.validateIndeterminate(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){this.controller.validateValue(e)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-checkbox",{_accessKey:[1,"_access-key"],_alert:[1540],_checked:[1540],_disabled:[516],_error:[1],_hideLabel:[516,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_indeterminate:[1540],_name:[1],_on:[16],_required:[516],_tabIndex:[2,"_tab-index"],_touched:[1540],_type:[1],_value:[1],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-checkbox","kol-alert","kol-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-input-checkbox":customElements.get(e)||customElements.define(e,KolInputCheckbox$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$9();break;case"kol-badge":customElements.get(e)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-icon":customElements.get(e)||defineCustomElement$5();break;case"kol-input":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$2()}}))}const KolInputCheckbox=KolInputCheckbox$1,defineCustomElement=defineCustomElement$1;export{KolInputCheckbox,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-input-checkbox.js","mappings":"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","names":["KolInputCheckbox"],"sources":["./src/components/input-checkbox/controller.ts","./src/components/input-checkbox/style.css?tag=kol-input-checkbox&mode=default&encapsulation=shadow","./src/components/input-checkbox/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../components';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { setState, watchBoolean, watchValidator } from '../../utils/prop.validators';\nimport { isString } from '../../utils/validator';\nimport { InputCheckboxRadioController } from '../input-radio/controller';\nimport { InputCheckboxIcon, InputCheckboxVariant, Props, Watches } from './types';\n\nexport class InputCheckboxController extends InputCheckboxRadioController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateChecked(value?: boolean): void {\n\t\twatchBoolean(this.component, '_checked', value);\n\t\tthis.setFormAssociatedValue(this.component.state._checked as string);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateIcon(value?: Stringified<InputCheckboxIcon>): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_icons',\n\t\t\t(value): boolean => {\n\t\t\t\treturn typeof value === 'object' && value !== null && (isString(value.checked, 1) || isString(value.indeterminate, 1) || isString(value.unchecked, 1));\n\t\t\t},\n\t\t\tnew Set(['InputCheckboxIcons']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateIndeterminate(value?: boolean): void {\n\t\twatchBoolean(this.component, '_indeterminate', value);\n\t}\n\n\t/**\n\t * @deprecated\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tdevHint(`The \"_type\" prop is deprecated. Use \"_variant\" instead.`);\n\t\tthis.validateVariant(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateValue(value?: string): void {\n\t\tsetState(this.component, '_value', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_variant',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'button' || value === 'checkbox' || value === 'switch'),\n\t\t\tnew Set(['String {button, checkbox, switch}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateChecked(this.component._checked);\n\t\tthis.validateIcon(this.component._icon);\n\t\tthis.validateIndeterminate(this.component._indeterminate);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validateVariant(this.component._variant || this.component._type);\n\t}\n}\n","@import '../input.css';\n@import './common.css';\n@import './button.css';\n@import './checkbox.css';\n@import './switch.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../components';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { propergateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputCheckboxController } from './controller';\nimport { ComponentApi, InputCheckboxIcon, InputCheckboxVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-input-checkbox',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputCheckbox implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputCheckboxElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t\tdata-role={this.state._variant === 'button' ? 'button' : undefined}\n\t\t\t\t\tonKeyPress={this.state._variant === 'button' ? this.onChange : undefined}\n\t\t\t\t\ttabIndex={this.state._variant === 'button' ? 0 : undefined}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tonClick={this.onChange}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._indeterminate ? this.state._icon.indeterminate : this.state._checked ? this.state._icon.checked : this.state._icon.unchecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by checkbox?!\n\t\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tchecked={this.state._checked === true}\n\t\t\t\t\t\t\tdisabled={this.state._disabled === true}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tindeterminate={this.state._indeterminate === true}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required === true}\n\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tvalue={typeof this.state._value === 'string' ? this.state._value : ''}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t></input>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputCheckboxController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob die Checkbox ausgewählt ist oder nicht.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _checked?: boolean = false;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Überschreiben der Icons für die Checkbox.\n\t */\n\t@Prop() public _icon?: Stringified<InputCheckboxIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _indeterminate?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt an, ob die Checkbox ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Type das Input haben soll.\n\t *\n\t * @deprecated Verwende stattdessen das Attribute _variant.\n\t */\n\t@Prop() public _type?: InputCheckboxVariant;\n\n\t/**\n\t * Gibt den Wert der Checkbox an.\n\t */\n\t@Prop() public _value?: string;\n\n\t/**\n\t * Gibt an, welchen Type das Input haben soll.\n\t */\n\t@Prop() public _variant?: InputCheckboxVariant; // = 'checkbox';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_checked: false,\n\t\t_icon: {\n\t\t\tchecked: 'codicon codicon-check',\n\t\t\tindeterminate: 'codicon codicon-remove',\n\t\t\tunchecked: 'codicon codicon-add',\n\t\t},\n\t\t_id: '…', // ⚠ required\n\t\t_indeterminate: false,\n\t\t_variant: 'checkbox',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputCheckboxController(this, 'checkbox', this.host);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_checked')\n\tpublic validateChecked(value?: boolean): void {\n\t\tthis.controller.validateChecked(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<InputCheckboxIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_indeterminate')\n\tpublic validateIndeterminate(value?: boolean): void {\n\t\tthis.controller.validateIndeterminate(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_type')\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_variant')\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._checked = this._checked === false;\n\t\tthis._indeterminate = false;\n\t\tthis.controller.setValue(event, this._checked);\n\t};\n}\n"],"version":3}
+{"file":"kol-input-checkbox.js","mappings":"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","names":["KolInputCheckbox"],"sources":["./src/components/input-checkbox/controller.ts","./src/components/input-checkbox/style.css?tag=kol-input-checkbox&mode=default&encapsulation=shadow","./src/components/input-checkbox/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../components';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { setState, watchBoolean, watchValidator } from '../../utils/prop.validators';\nimport { isString } from '../../utils/validator';\nimport { InputCheckboxRadioController } from '../input-radio/controller';\nimport { InputCheckboxIcon, InputCheckboxVariant, Props, Watches } from './types';\n\nexport class InputCheckboxController extends InputCheckboxRadioController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateChecked(value?: boolean): void {\n\t\twatchBoolean(this.component, '_checked', value);\n\t\tthis.setFormAssociatedValue(this.component.state._checked as string);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateIcon(value?: Stringified<InputCheckboxIcon>): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_icons',\n\t\t\t(value): boolean => {\n\t\t\t\treturn typeof value === 'object' && value !== null && (isString(value.checked, 1) || isString(value.indeterminate, 1) || isString(value.unchecked, 1));\n\t\t\t},\n\t\t\tnew Set(['InputCheckboxIcons']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateIndeterminate(value?: boolean): void {\n\t\twatchBoolean(this.component, '_indeterminate', value);\n\t}\n\n\t/**\n\t * @deprecated\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tdevHint(`The \"_type\" prop is deprecated. Use \"_variant\" instead.`);\n\t\tthis.validateVariant(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateValue(value?: string): void {\n\t\tsetState(this.component, '_value', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_variant',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'button' || value === 'checkbox' || value === 'switch'),\n\t\t\tnew Set(['String {button, checkbox, switch}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateChecked(this.component._checked);\n\t\tthis.validateIcon(this.component._icon);\n\t\tthis.validateIndeterminate(this.component._indeterminate);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validateVariant(this.component._variant || this.component._type);\n\t}\n}\n","@import '../input.css';\n@import './common.css';\n@import './button.css';\n@import './checkbox.css';\n@import './switch.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../components';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { propergateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputCheckboxController } from './controller';\nimport { ComponentApi, InputCheckboxIcon, InputCheckboxVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-input-checkbox',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputCheckbox implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputCheckboxElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t\tdata-role={this.state._variant === 'button' ? 'button' : undefined}\n\t\t\t\t\tonKeyPress={this.state._variant === 'button' ? this.onChange : undefined}\n\t\t\t\t\ttabIndex={this.state._variant === 'button' ? 0 : undefined}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tonClick={this.onChange}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._indeterminate ? this.state._icon.indeterminate : this.state._checked ? this.state._icon.checked : this.state._icon.unchecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by checkbox?!\n\t\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tchecked={this.state._checked === true}\n\t\t\t\t\t\t\tdisabled={this.state._disabled === true}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tindeterminate={this.state._indeterminate === true}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required === true}\n\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tvalue={typeof this.state._value === 'string' ? this.state._value : ''}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t></input>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputCheckboxController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob die Checkbox ausgewählt ist oder nicht.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _checked?: boolean = false;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Überschreiben der Icons für die Checkbox.\n\t */\n\t@Prop() public _icon?: Stringified<InputCheckboxIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _indeterminate?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt an, ob die Checkbox ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Type das Input haben soll.\n\t *\n\t * @deprecated Verwende stattdessen das Attribute _variant.\n\t */\n\t@Prop() public _type?: InputCheckboxVariant;\n\n\t/**\n\t * Gibt den Wert der Checkbox an.\n\t */\n\t@Prop() public _value?: string;\n\n\t/**\n\t * Gibt an, welchen Type das Input haben soll.\n\t */\n\t@Prop() public _variant?: InputCheckboxVariant; // = 'checkbox';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_checked: false,\n\t\t_icon: {\n\t\t\tchecked: 'codicon codicon-check',\n\t\t\tindeterminate: 'codicon codicon-remove',\n\t\t\tunchecked: 'codicon codicon-add',\n\t\t},\n\t\t_id: '…', // ⚠ required\n\t\t_indeterminate: false,\n\t\t_variant: 'checkbox',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputCheckboxController(this, 'checkbox', this.host);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_checked')\n\tpublic validateChecked(value?: boolean): void {\n\t\tthis.controller.validateChecked(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<InputCheckboxIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_indeterminate')\n\tpublic validateIndeterminate(value?: boolean): void {\n\t\tthis.controller.validateIndeterminate(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_type')\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_variant')\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._checked = this._checked === false;\n\t\tthis._indeterminate = false;\n\t\tthis.controller.setValue(event, this._checked);\n\t};\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{b as watchValidator,F as watchJsonArrayString,w as watchString,m as propergateFocus}from"./prop.validators.js";import{g as getRenderStates}from"./controller.js";import{I as InputIconController}from"./controller-icon.js";import{d as defineCustomElement$9}from"./component5.js";import{d as defineCustomElement$2,a as defineCustomElement$7,b as defineCustomElement$8}from"./component.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component3.js";class InputColorController extends InputIconController{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){watchJsonArrayString(this.component,"_list",(t=>"string"==typeof t),t)}validateValue(t){watchString(this.component,"_value",t)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{align-items:baseline;display:flex;justify-items:center}kol-span-wc kol-icon{display:inline-flex}a,button,input,option,select,textarea{appearance:none;cursor:pointer;font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.kol-required span::after{content:'*'}:host{display:block}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select[multiple] option,select:not([multiple]),textarea{font-size:1rem}:is(button,input,option,select,textarea):disabled,.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}kol-input{display:grid}input,option,select,textarea{display:block;line-height:2.5em;width:100%}input,select:not([multiple]){height:2.75em}.required label>span::after{content:'*'}.icons{display:flex;justify-content:space-between;height:0}.icons>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}.icon-left input,.icon-left select{padding-left:var(--a11y-min-size)}kol-button-wc{position:relative;float:right;z-index:1000;margin-top:calc(-1 * var(--a11y-min-size))}.icon-right kol-button-wc{margin-right:var(--a11y-min-size)}.disabled{opacity:0.5}option:not(:disabled):is(:active,:checked,:focus,:hover){color:white}",KolInputColor$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDiscribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._list)&&this.state._list.length>0;return h(Host,null,h("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_smartButton:this.state._smartButton,_touched:this.state._touched},h("span",{slot:"label"},h("slot",null)),h("input",Object.assign({ref:this.catchRef,part:"input",title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:!0===this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,name:this.state._name,slot:"input",spellcheck:"false",type:"color",value:this.state._value},this.controller.onFacade))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:"…",_list:[]},this.controller=new InputColorController(this,"color",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-color",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[516],_error:[1],_hideLabel:[516,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_list:[1],_name:[1],_on:[16],_smartButton:[16],_tabIndex:[2,"_tab-index"],_touched:[1540],_value:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-color","kol-alert","kol-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-input-color":customElements.get(t)||customElements.define(t,KolInputColor$1);break;case"kol-alert":customElements.get(t)||defineCustomElement$9();break;case"kol-badge":customElements.get(t)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-input":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 KolInputColor=KolInputColor$1,defineCustomElement=defineCustomElement$1;export{KolInputColor,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{b as watchValidator,F as watchJsonArrayString,w as watchString,m as propergateFocus}from"./prop.validators.js";import{g as getRenderStates}from"./controller.js";import{I as InputIconController}from"./controller-icon.js";import{d as defineCustomElement$9}from"./component5.js";import{d as defineCustomElement$2,a as defineCustomElement$7,b as defineCustomElement$8}from"./component.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component3.js";class InputColorController extends InputIconController{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){watchJsonArrayString(this.component,"_list",(t=>"string"==typeof t),t)}validateValue(t){watchString(this.component,"_value",t)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}.kol-required span::after{content:'*'}:host{display:block}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select[multiple] option,select:not([multiple]),textarea{font-size:1rem;padding:0 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}:is(button,input,option,select,textarea):disabled,.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}kol-input{display:grid}input,option,select,textarea{display:block;line-height:2.5em;width:100%}input,select:not([multiple]){height:2.75em}.required label>span::after{content:'*'}.icons{display:flex;justify-content:space-between;height:0}.icons>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}.icon-left input,.icon-left select{padding-left:var(--a11y-min-size)}kol-button-wc{position:relative;float:right;z-index:1000;margin-top:calc(-1 * var(--a11y-min-size))}.icon-right kol-button-wc{margin-right:var(--a11y-min-size)}.disabled{opacity:0.5}",KolInputColor$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDiscribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._list)&&this.state._list.length>0;return h(Host,null,h("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_smartButton:this.state._smartButton,_touched:this.state._touched},h("span",{slot:"label"},h("slot",null)),h("input",Object.assign({ref:this.catchRef,part:"input",title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:!0===this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,name:this.state._name,slot:"input",spellcheck:"false",type:"color",value:this.state._value},this.controller.onFacade))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:"…",_list:[]},this.controller=new InputColorController(this,"color",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-color",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[516],_error:[1],_hideLabel:[516,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_list:[1],_name:[1],_on:[16],_smartButton:[16],_tabIndex:[2,"_tab-index"],_touched:[1540],_value:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-color","kol-alert","kol-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-input-color":customElements.get(t)||customElements.define(t,KolInputColor$1);break;case"kol-alert":customElements.get(t)||defineCustomElement$9();break;case"kol-badge":customElements.get(t)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-input":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 KolInputColor=KolInputColor$1,defineCustomElement=defineCustomElement$1;export{KolInputColor,defineCustomElement};