npm - @public-ui/components - Versions diffs - 1.6.0-rc.19 → 1.6.0-rc.20 - Mend

@public-ui/components 1.6.0-rc.19 → 1.6.0-rc.20

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

Files changed (566) hide show

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

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

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

	@@ -1 +1 @@
1	- {"file":"kol-abbr.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,6sBAA6sB;;MCkBxtBA,SAAO;;;;;IACF,UAAK,GAAG,KAAK,EAAE,CAAC;;yBAwBM,KAAK;;iBAcZ;MAC/B,MAAM,EAAE,GAAG;MACX,aAAa,EAAE,KAAK;KACpB;;EAvCM,MAAM;IACZ,QACC,EAAC,IAAI,QAEJ,+BAAuB,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IACzF,YAAM,KAAK,EAAC,EAAE,IACb,eAAQ,CACF,CACD,EACP,mBAAa,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAgB,CACnG,EACN;GACF;EAsCM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAc;IAClC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,oBAAoB,CAAC,KAAa;IACxC,qBAAqB,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;GACpD;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAbbr"],"sources":["src/components/abbr/style.css?tag=kol-abbr&mode=default&encapsulation=shadow","src/components/abbr/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host > abbr {\n\tcursor: help;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Align } from '../../types/props/align';\nimport { ~~nonce~~ } from '../../~~utils~~/~~dev.utils~~';\nimport { ~~API,~~ ~~States~~ } from '~~./types~~';\nimport { ~~LabelPropType~~, ~~validateLabel~~ } from '~~../../~~types~~/props/label~~';\n\n/*\n @slot - Der Begriff, der erläutert werden soll.\n /\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{/ eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex /}\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" tabindex=\"0\" title={this.state._label}>\n\t\t\t\t\t<span title=\"\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t</abbr>\n\t\t\t\t<kol-tooltip _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._label}></kol-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines the abbreviation title and tooltip content\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/\n\t Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _title?: string;\n\n\t/\n\t Die State-Parameter repräsentieren den inneren State\n\t * einer Komponente.\n\t \n\t @see: https://stenciljs.com/docs/state\n\t /\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_tooltipAlign: 'top',\n\t};\n\n\t/\n\t Die Watch-Methoden dienen der Möglichkeit zur\n\t * Validierung der Werte eines Properties und\n\t * dem Mapping dessen auf einen anderen internen\n\t * State-Typ.\n\t \n\t @see: https://stenciljs.com/docs/properties#prop-validation\n\t */\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_title')\n\tpublic validateTitle(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Align): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._title);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-abbr.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,6sBAA6sB;;MCkBxtBA,SAAO;;;;;IACF,UAAK,GAAG,KAAK,EAAE,CAAC;;yBAwBM,KAAK;;iBAcZ;MAC/B,MAAM,EAAE,GAAG;MACX,aAAa,EAAE,KAAK;KACpB;;EAvCM,MAAM;IACZ,QACC,EAAC,IAAI,QAEJ,+BAAuB,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IACzF,YAAM,KAAK,EAAC,EAAE,IACb,eAAQ,CACF,CACD,EACP,mBAAa,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAgB,CACnG,EACN;GACF;EAsCM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAc;IAClC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,oBAAoB,CAAC,KAAa;IACxC,qBAAqB,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;GACpD;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAbbr"],"sources":["src/components/abbr/style.css?tag=kol-abbr&mode=default&encapsulation=shadow","src/components/abbr/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host > abbr {\n\tcursor: help;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Align } from '../../types/props/align';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { nonce } from '../../utils/dev.utils';\nimport { API, States } from './types';\n\n/*\n @slot - Der Begriff, der erläutert werden soll.\n /\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{/ eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex /}\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" tabindex=\"0\" title={this.state._label}>\n\t\t\t\t\t<span title=\"\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t</abbr>\n\t\t\t\t<kol-tooltip _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._label}></kol-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines the abbreviation title and tooltip content\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/\n\t Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _title?: string;\n\n\t/\n\t Die State-Parameter repräsentieren den inneren State\n\t * einer Komponente.\n\t \n\t @see: https://stenciljs.com/docs/state\n\t /\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_tooltipAlign: 'top',\n\t};\n\n\t/\n\t Die Watch-Methoden dienen der Möglichkeit zur\n\t * Validierung der Werte eines Properties und\n\t * dem Mapping dessen auf einen anderen internen\n\t * State-Typ.\n\t \n\t @see: https://stenciljs.com/docs/properties#prop-validation\n\t */\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_title')\n\tpublic validateTitle(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Align): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._title);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{f as watchBoolean,l as featureHint,n as nonce,m as setState,p as processEnv}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{v as validateLabel}from"./label.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$4}from"./component2.js";import{d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$2}from"./component.js";const validateOpen=(e,t)=>{watchBoolean(e,"_open",t)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}.content{inset:0 0 auto 0;width:100%}.transition{transition:height 0.3s ease-in-out}@media (prefers-reduced-motion){.transition{transition-duration:0s}}";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.contentElement=null,this.contentWrapperElement=null,this.contentObserver=null,this.transition=!1,this.catchContentElement=e=>{e&&(this.contentElement=e)},this.catchContentWrapperElement=e=>{e&&(this.contentWrapperElement=e)},this.onClick=e=>{this._open=!this._open,this.resizeWrapper(),setTimeout((()=>{var t;"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&this.state._on.onClick(e,!0===this._open)}))},this._heading=void 0,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"…",_level:1}}resizeWrapper(e){const t=this.contentElement,n=this.contentWrapperElement,o=this.contentObserver;t&&n&&o&&(this._open?(n.style.display="block",setTimeout((()=>{var e;n.style.height=`${null!==(e=null==t?void 0:t.clientHeight)&&void 0!==e?e:0}px`})),e||o.observe(t),n.addEventListener("transitionend",(()=>{n.style.overflow=""}),{once:!0})):(n.style.overflow="hidden",o.unobserve(t),n.style.height="0",this.transition?n.addEventListener("transitionend",(()=>{n.style.display="none"}),{once:!0}):n.style.display="none"))}render(){return h(Host,null,h("div",{class:{accordion:!0,open:!0===this.state._open,close:!0!==this.state._open}},h("kol-heading-wc",{_label:"",_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._label,_on:{onClick:this.onClick}})),h("div",{class:"header"},h("slot",{name:"header"})),h("div",{ref:this.catchContentWrapperElement,class:{wrapper:!0,transition:this.transition}},h("div",{ref:this.catchContentElement,"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},h("slot",{name:"content"})," ",h("slot",null)))))}validateHeading(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&setState(this,"_on",e)}validateOpen(e){validateOpen(this,e)}componentWillLoad(){this.validateLabel(this._label||this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open),"test"!==processEnv&&(this.contentObserver=new ResizeObserver(this.resizeWrapper.bind(this))),setTimeout((()=>{this.contentObserver&&this.contentElement&&this.contentObserver.observe(this.contentElement)})),setTimeout((()=>{this.transition=!0}),200)}static get watchers(){return{_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-accordion",{_heading:[1],_label:[1],_level:[2],_on:[16],_open:[1540],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-accordion","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-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{v as validateLabel}from"./label.js";import{f as watchBoolean,l as featureHint,n as nonce,m as setState,p as processEnv}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$4}from"./component2.js";import{d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$2}from"./component.js";const validateOpen=(e,t)=>{watchBoolean(e,"_open",t)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}.content{inset:0 0 auto 0;width:100%}.transition{transition:height 0.3s ease-in-out}@media (prefers-reduced-motion){.transition{transition-duration:0s}}";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.contentElement=null,this.contentWrapperElement=null,this.contentObserver=null,this.transition=!1,this.catchContentElement=e=>{e&&(this.contentElement=e)},this.catchContentWrapperElement=e=>{e&&(this.contentWrapperElement=e)},this.onClick=e=>{this._open=!this._open,this.resizeWrapper(),setTimeout((()=>{var t;"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&this.state._on.onClick(e,!0===this._open)}))},this._heading=void 0,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"…",_level:1}}resizeWrapper(e){const t=this.contentElement,n=this.contentWrapperElement,o=this.contentObserver;t&&n&&o&&(this._open?(n.style.display="block",setTimeout((()=>{var e;n.style.height=`${null!==(e=null==t?void 0:t.clientHeight)&&void 0!==e?e:0}px`})),e||o.observe(t),n.addEventListener("transitionend",(()=>{n.style.overflow=""}),{once:!0})):(n.style.overflow="hidden",o.unobserve(t),n.style.height="0",this.transition?n.addEventListener("transitionend",(()=>{n.style.display="none"}),{once:!0}):n.style.display="none"))}render(){return h(Host,null,h("div",{class:{accordion:!0,open:!0===this.state._open,close:!0!==this.state._open}},h("kol-heading-wc",{_label:"",_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._label,_on:{onClick:this.onClick}})),h("div",{class:"header"},h("slot",{name:"header"})),h("div",{ref:this.catchContentWrapperElement,class:{wrapper:!0,transition:this.transition}},h("div",{ref:this.catchContentElement,"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},h("slot",{name:"content"})," ",h("slot",null)))))}validateHeading(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&setState(this,"_on",e)}validateOpen(e){validateOpen(this,e)}componentWillLoad(){this.validateLabel(this._label||this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open),"test"!==processEnv&&(this.contentObserver=new ResizeObserver(this.resizeWrapper.bind(this))),setTimeout((()=>{this.contentObserver&&this.contentElement&&this.contentObserver.observe(this.contentElement)})),setTimeout((()=>{this.transition=!0}),200)}static get watchers(){return{_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-accordion",{_heading:[1],_label:[1],_level:[2],_on:[16],_open:[1540],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-accordion","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-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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-accordion.js","mappings":"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","names":["KolAccordion"],"sources":["src/types/props/open.ts","src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","src/components/accordion/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\n/* de\n * Klappt das Element auf sofern gesetzt (oder true) und klappt es zu sofern nicht gesetzt (oder false).\n /\n/* en\n * If set (to true) opens/expands the element, closes if not set (or set to false).\n /\nexport type PropOpen = {\n\topen: boolean;\n};\n\n/ validator /\nexport const validateOpen = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_open', value);\n};\n","@import url(../style.css);\n@import url(../host-display-block.css);\n/\n * Inside a button the label text ist always centered.\n * So we need text align left.\n /\n.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\tjustify-items: start;\n}\n.content {\n\tinset: 0 0 auto 0;\n\twidth: 100%;\n}\n.transition {\n\ttransition: height 0.3s ease-in-out;\n}\n/ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion /\n@media (prefers-reduced-motion) {\n\t.transition {\n\t\ttransition-duration: 0s;\n\t}\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { validateOpen } from '../../types/props/open';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { processEnv } from '../../utils/reuse';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriAccordionCallbacks, States } from './types';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\n/\n \n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n /\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements API {\n\tprivate readonly nonce = nonce();\n\tprivate contentElement: HTMLElement \| null = null;\n\tprivate contentWrapperElement: HTMLElement \| null = null;\n\tprivate contentObserver: ResizeObserver \| null = null;\n\tprivate transition = false;\n\n\tprivate readonly catchContentElement = (element?: HTMLElement) => {\n\t\tif (element) this.contentElement = element;\n\t};\n\tprivate readonly catchContentWrapperElement = (element?: HTMLElement) => {\n\t\tif (element) this.contentWrapperElement = element;\n\t};\n\n\tresizeWrapper(list?: ResizeObserverEntry[]) {\n\t\tconst content = this.contentElement;\n\t\tconst wrapper = this.contentWrapperElement;\n\t\tconst observer = this.contentObserver;\n\t\tif (content && wrapper && observer) {\n\t\t\tif (this._open) {\n\t\t\t\twrapper.style.display = 'block';\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\twrapper.style.height = `${content?.clientHeight ?? 0}px`;\n\t\t\t\t});\n\t\t\t\tif (!list) observer.observe(content);\n\t\t\t\twrapper.addEventListener(\n\t\t\t\t\t'transitionend',\n\t\t\t\t\t() => {\n\t\t\t\t\t\twrapper.style.overflow = '';\n\t\t\t\t\t},\n\t\t\t\t\t{ once: true }\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\twrapper.style.overflow = 'hidden';\n\t\t\t\tobserver.unobserve(content);\n\t\t\t\twrapper.style.height = '0';\n\t\t\t\tif (this.transition) {\n\t\t\t\t\twrapper.addEventListener(\n\t\t\t\t\t\t'transitionend',\n\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\twrapper.style.display = 'none';\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ once: true }\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\twrapper.style.display = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t\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 _label=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icon={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}\n\t\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div ref={this.catchContentWrapperElement} class={{ wrapper: true, transition: this.transition }}>\n\t\t\t\t\t\t<div ref={this.catchContentElement} aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" id={this.nonce}>\n\t\t\t\t\t\t\t<slot name=\"content\"></slot> {/ Deprecated for version 2 /}\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Defines the button label\n\t /\n\t@Prop() public _label?: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll.\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 die Komponente entweder geöffnet oder geschlossen ist.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t\tif (processEnv !== 'test') this.contentObserver = new ResizeObserver(this.resizeWrapper.bind(this));\n\t\tsetTimeout(() => {\n\t\t\tif (this.contentObserver && this.contentElement) this.contentObserver.observe(this.contentElement);\n\t\t});\n\t\t// So it does not transition if it is set to open from the start.\n\t\tsetTimeout(() => {\n\t\t\tthis.transition = true;\n\t\t}, 200);\n\t}\n\n\tprivate onClick = (event: Event) => {\n\t\tthis._open = !this._open;\n\t\tthis.resizeWrapper();\n\n\t\t/\n\t\t Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"version":3}
1	+ {"file":"kol-accordion.js","mappings":"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","names":["KolAccordion"],"sources":["src/types/props/open.ts","src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","src/components/accordion/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\n/* de\n * Klappt das Element auf sofern gesetzt (oder true) und klappt es zu sofern nicht gesetzt (oder false).\n /\n/* en\n * If set (to true) opens/expands the element, closes if not set (or set to false).\n /\nexport type PropOpen = {\n\topen: boolean;\n};\n\n/ validator /\nexport const validateOpen = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_open', value);\n};\n","@import url(../style.css);\n@import url(../host-display-block.css);\n/\n * Inside a button the label text ist always centered.\n * So we need text align left.\n /\n.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\tjustify-items: start;\n}\n.content {\n\tinset: 0 0 auto 0;\n\twidth: 100%;\n}\n.transition {\n\ttransition: height 0.3s ease-in-out;\n}\n/ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion /\n@media (prefers-reduced-motion) {\n\t.transition {\n\t\ttransition-duration: 0s;\n\t}\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { validateOpen } from '../../types/props/open';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { processEnv } from '../../utils/reuse';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriAccordionCallbacks, States } from './types';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\n/\n \n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n /\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements API {\n\tprivate readonly nonce = nonce();\n\tprivate contentElement: HTMLElement \| null = null;\n\tprivate contentWrapperElement: HTMLElement \| null = null;\n\tprivate contentObserver: ResizeObserver \| null = null;\n\tprivate transition = false;\n\n\tprivate readonly catchContentElement = (element?: HTMLElement) => {\n\t\tif (element) this.contentElement = element;\n\t};\n\tprivate readonly catchContentWrapperElement = (element?: HTMLElement) => {\n\t\tif (element) this.contentWrapperElement = element;\n\t};\n\n\tresizeWrapper(list?: ResizeObserverEntry[]) {\n\t\tconst content = this.contentElement;\n\t\tconst wrapper = this.contentWrapperElement;\n\t\tconst observer = this.contentObserver;\n\t\tif (content && wrapper && observer) {\n\t\t\tif (this._open) {\n\t\t\t\twrapper.style.display = 'block';\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\twrapper.style.height = `${content?.clientHeight ?? 0}px`;\n\t\t\t\t});\n\t\t\t\tif (!list) observer.observe(content);\n\t\t\t\twrapper.addEventListener(\n\t\t\t\t\t'transitionend',\n\t\t\t\t\t() => {\n\t\t\t\t\t\twrapper.style.overflow = '';\n\t\t\t\t\t},\n\t\t\t\t\t{ once: true }\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\twrapper.style.overflow = 'hidden';\n\t\t\t\tobserver.unobserve(content);\n\t\t\t\twrapper.style.height = '0';\n\t\t\t\tif (this.transition) {\n\t\t\t\t\twrapper.addEventListener(\n\t\t\t\t\t\t'transitionend',\n\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\twrapper.style.display = 'none';\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ once: true }\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\twrapper.style.display = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t\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 _label=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icon={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}\n\t\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div ref={this.catchContentWrapperElement} class={{ wrapper: true, transition: this.transition }}>\n\t\t\t\t\t\t<div ref={this.catchContentElement} aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" id={this.nonce}>\n\t\t\t\t\t\t\t<slot name=\"content\"></slot> {/ Deprecated for version 2 /}\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Defines the button label\n\t /\n\t@Prop() public _label?: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll.\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 die Komponente entweder geöffnet oder geschlossen ist.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t\tif (processEnv !== 'test') this.contentObserver = new ResizeObserver(this.resizeWrapper.bind(this));\n\t\tsetTimeout(() => {\n\t\t\tif (this.contentObserver && this.contentElement) this.contentObserver.observe(this.contentElement);\n\t\t});\n\t\t// So it does not transition if it is set to open from the start.\n\t\tsetTimeout(() => {\n\t\t\tthis.transition = true;\n\t\t}, 200);\n\t}\n\n\tprivate onClick = (event: Event) => {\n\t\tthis._open = !this._open;\n\t\tthis.resizeWrapper();\n\n\t\t/\n\t\t Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{f as watchBoolean}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$2}from"./component4.js";import{v as validateLabel}from"./label.js";const validateHasFooter=(e,t)=>{watchBoolean(e,"_hasFooter",t)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>div.card{height:100%}",KolCard$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._label=void 0,this._level=1,this.state={_label:"…"}}render(){return h(Host,null,h("div",{class:"card"},h("div",{class:"header"},h("kol-heading-wc",{_label:this.state._label,_level:this.state._level}),h("slot",{name:"header"})),h("div",{class:"content"},h("slot",{name:"content"})," ",h("slot",null)),this.state._hasFooter&&h("div",{class:"footer"},h("slot",{name:"footer"}))))}validateHasFooter(e){validateHasFooter(this,e)}validateHeading(e){this.validateLabel(e)}validateHeadline(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasFooter(this._hasFooter),this.validateLabel(this._label||this._heading||this._headline),this.validateLevel(this._level)}static get watchers(){return{_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_label:["validateLabel"],_level:["validateLevel"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-card",{_hasFooter:[4,"_has-footer"],_heading:[1],_headline:[1],_label:[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{f as watchBoolean}from"./prop.validators.js";import{v as validateLabel}from"./label.js";import{w as watchHeadingLevel,d as defineCustomElement$2}from"./component4.js";const validateHasFooter=(e,t)=>{watchBoolean(e,"_hasFooter",t)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>div.card{height:100%}",KolCard$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._label=void 0,this._level=1,this.state={_label:"…"}}render(){return h(Host,null,h("div",{class:"card"},h("div",{class:"header"},h("kol-heading-wc",{_label:this.state._label,_level:this.state._level}),h("slot",{name:"header"})),h("div",{class:"content"},h("slot",{name:"content"})," ",h("slot",null)),this.state._hasFooter&&h("div",{class:"footer"},h("slot",{name:"footer"}))))}validateHasFooter(e){validateHasFooter(this,e)}validateHeading(e){this.validateLabel(e)}validateHeadline(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasFooter(this._hasFooter),this.validateLabel(this._label||this._heading||this._headline),this.validateLevel(this._level)}static get watchers(){return{_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_label:["validateLabel"],_level:["validateLevel"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-card",{_hasFooter:[4,"_has-footer"],_heading:[1],_headline:[1],_label:[1],_level:[2],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card","kol-heading-wc"].forEach((e=>{switch(e){case"kol-card":customElements.get(e)||customElements.define(e,KolCard$1);break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolCard=KolCard$1,defineCustomElement=defineCustomElement$1;export{KolCard,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-card.js","mappings":";;;;;;;;AAgBO,MAAM,iBAAiB,GAAG,CAAC,SAAoC,EAAE,KAAe;EACtF,YAAY,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;AAC9C,CAAC;;AClBD,MAAM,eAAe,GAAG,itBAAitB;;MCqB5tBA,SAAO;;;;;sBA0BmB,KAAK;;;;kBAoBJ,CAAC;iBAEG;MAC1C,MAAM,EAAE,GAAG;KACX;;EAjDM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,WAAK,KAAK,EAAC,MAAM,IAChB,WAAK,KAAK,EAAC,QAAQ,IAClB,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,EACvF,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAQ,OAC5B,eAAQ,CACH,EACL,IAAI,CAAC,KAAK,CAAC,UAAU,KACrB,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACN,CACI,CACA,EACN;GACF;EAgCM,iBAAiB,CAAC,KAAe;IACvC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,eAAe,CAAC,KAAc;IACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAOM,gBAAgB,CAAC,KAAc;IACrC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAEM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IACnE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolCard"],"sources":["src/types/props/has-footer.ts","src/components/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\n/* de\n * Zeigt den slot=\"footer\" an.\n /\n/* en\n * Shows the slot=\"footer\".\n /\nexport type PropHasFooter = {\n\thasFooter: boolean;\n};\n\n/ validator /\nexport const validateHasFooter = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasFooter', value);\n};\n","@import url(../style.css);\n:host > div.card {\n\theight: 100%;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { validateHasFooter } from '../../types/props/has-footer';\nimport { ~~watchHeadingLevel~~ } from '~~../heading~~/~~validation~~';\nimport { ~~KoliBriCardAPI,~~ ~~KoliBriCardStates~~ } from '~~./types~~';\nimport { ~~LabelPropType~~, ~~validateLabel~~ } from '~~../../~~types~~/props/label~~';\n\n/\n @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n /\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements KoliBriCardAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div class=\"card\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _label={this.state._label} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"content\"></slot> {/ Deprecated for version 2 /}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Macht den Footerbereich der Card sichtbar.\n\t /\n\t@Prop() public _hasFooter?: boolean = false;\n\n\t/\n\t Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Gibt die Beschriftung der Komponente an.\n\t \n\t @deprecated Verwende stattdessen das Property _heading.\n\t /\n\t@Prop() public _headline?: string;\n\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll.\n\t /\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t@State() public state: KoliBriCardStates = {\n\t\t_label: '…', // '⚠'\n\t};\n\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: boolean): void {\n\t\tvalidateHasFooter(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateLabel(this._label \|\| this._heading \|\| this._headline);\n\t\tthis.validateLevel(this._level);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-card.js","mappings":";;;;;;;;AAgBO,MAAM,iBAAiB,GAAG,CAAC,SAAoC,EAAE,KAAe;EACtF,YAAY,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;AAC9C,CAAC;;AClBD,MAAM,eAAe,GAAG,itBAAitB;;MCqB5tBA,SAAO;;;;;sBA0BmB,KAAK;;;;kBAoBJ,CAAC;iBAEG;MAC1C,MAAM,EAAE,GAAG;KACX;;EAjDM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,WAAK,KAAK,EAAC,MAAM,IAChB,WAAK,KAAK,EAAC,QAAQ,IAClB,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,EACvF,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAQ,OAC5B,eAAQ,CACH,EACL,IAAI,CAAC,KAAK,CAAC,UAAU,KACrB,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACN,CACI,CACA,EACN;GACF;EAgCM,iBAAiB,CAAC,KAAe;IACvC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,eAAe,CAAC,KAAc;IACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAOM,gBAAgB,CAAC,KAAc;IACrC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAEM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IACnE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolCard"],"sources":["src/types/props/has-footer.ts","src/components/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\n/* de\n * Zeigt den slot=\"footer\" an.\n /\n/* en\n * Shows the slot=\"footer\".\n /\nexport type PropHasFooter = {\n\thasFooter: boolean;\n};\n\n/ validator /\nexport const validateHasFooter = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasFooter', value);\n};\n","@import url(../style.css);\n:host > div.card {\n\theight: 100%;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { validateHasFooter } from '../../types/props/has-footer';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { KoliBriCardAPI, KoliBriCardStates } from './types';\n\n/\n @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n /\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements KoliBriCardAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div class=\"card\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _label={this.state._label} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"content\"></slot> {/ Deprecated for version 2 /}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Macht den Footerbereich der Card sichtbar.\n\t /\n\t@Prop() public _hasFooter?: boolean = false;\n\n\t/\n\t Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Gibt die Beschriftung der Komponente an.\n\t \n\t @deprecated Verwende stattdessen das Property _heading.\n\t /\n\t@Prop() public _headline?: string;\n\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll.\n\t /\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t@State() public state: KoliBriCardStates = {\n\t\t_label: '…', // '⚠'\n\t};\n\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: boolean): void {\n\t\tvalidateHasFooter(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateLabel(this._label \|\| this._heading \|\| this._headline);\n\t\tthis.validateLevel(this._level);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{f as watchBoolean}from"./prop.validators.js";import{v as validateLabel}from"./label.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component12.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}details{display:grid}details>summary{cursor:pointer;display:flex;place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid}details>summary:focus>span,details>summary:hover>span,details[open]>summary>span{border-bottom-color:#000}details>kol-indented-text{margin:0.25em 0 0 0.5em}@keyframes details-show{to{opacity:1;scale:1}}.content{opacity:0;scale:1 0;transform-origin:top}details[open]>.content{animation:250ms ease-in-out forwards details-show}",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._label=void 0,this._open=!1,this._summary=void 0,this.state={_label:"…"}}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._label)),h("div",{class:"content"},h("kol-indented-text",null,h("slot",null)))))}validateLabel(e){validateLabel(this,e)}validateOpen(e){watchBoolean(this,"_open",e)}validateSummary(e){this.validateLabel(e)}componentWillLoad(){this.validateOpen(this._open),this.validateLabel(this._label||this._summary)}static get watchers(){return{_label:["validateLabel"],_open:["validateOpen"],_summary:["validateSummary"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-details",{_label:[1],_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{v as validateLabel}from"./label.js";import{f as watchBoolean}from"./prop.validators.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component12.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}details{display:grid}details>summary{cursor:pointer;display:flex;place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid}details>summary:focus>span,details>summary:hover>span,details[open]>summary>span{border-bottom-color:#000}details>kol-indented-text{margin:0.25em 0 0 0.5em}@keyframes details-show{to{opacity:1;scale:1}}.content{opacity:0;scale:1 0;transform-origin:top}details[open]>.content{animation:250ms ease-in-out forwards details-show}",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._label=void 0,this._open=!1,this._summary=void 0,this.state={_label:"…"}}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._label)),h("div",{class:"content"},h("kol-indented-text",null,h("slot",null)))))}validateLabel(e){validateLabel(this,e)}validateOpen(e){watchBoolean(this,"_open",e)}validateSummary(e){this.validateLabel(e)}componentWillLoad(){this.validateOpen(this._open),this.validateLabel(this._label||this._summary)}static get watchers(){return{_label:["validateLabel"],_open:["validateOpen"],_summary:["validateSummary"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-details",{_label:[1],_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};

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

	@@ -1 +1 @@
1	- {"file":"kol-details.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,2qCAA2qC;;MCgBtrCA,YAAU;;;;;IAwEd,YAAO,GAAG;MACjB,UAAU,CAAC;;QACV,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC;OAC3C,EAAE,EAAE,CAAC,CAAC;KACP,CAAC;;iBApC+D,KAAK;;iBAQxB;MAC7C,MAAM,EAAE,GAAG;KACX;;EA/CM,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,IAItB,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,MAAM,CAAQ,CACvB,EACV,WAAK,KAAK,EAAC,SAAS,IACnB,6BACC,eAAQ,CACW,CACf,CACG,CACJ,EACN;GACF;EAuBM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,YAAY,CAAC,KAAe;IAClC,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAGM,eAAe,CAAC,KAAc;IACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;GACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolDetails"],"sources":["src/components/details/style.css?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\ndetails {\n\tdisplay: grid;\n}\ndetails > summary {\n\tcursor: pointer;\n\tdisplay: flex;\n\tplace-items: center;\n}\ndetails > summary > span {\n\tborder-bottom-color: grey;\n\tborder-bottom-style: solid;\n}\ndetails > summary:focus > span,\ndetails > summary:hover > span,\ndetails[open] > summary > span {\n\tborder-bottom-color: #000;\n}\ndetails > kol-indented-text {\n\tmargin: 0.25em 0 0 0.5em;\n}\n@keyframes details-show {\n\tto {\n\t\topacity: 1;\n\t\tscale: 1;\n\t}\n}\n.content {\n\topacity: 0;\n\tscale: 1 0;\n\ttransform-origin: top;\n}\ndetails[open] > .content {\n\tanimation: 250ms ease-in-out forwards details-show;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { ~~watchBoolean~~ } from '../../~~utils~~/~~prop.validators~~';\nimport { ~~KoliBriDetailsAPI,~~ ~~KoliBriDetailsStates~~ } from '~~./types~~';\nimport { ~~LabelPropType~~, ~~validateLabel~~ } from '~~../../~~types~~/props/label~~';\n\n/*\n @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.\n /\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements KoliBriDetailsAPI {\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{/ Link: https://github.com/public-ui/kolibri/issues/3558 /}\n\t\t\t\t\t{/ eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions /}\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._label}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<kol-indented-text>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-indented-text>\n\t\t\t\t\t</div>\n\t\t\t\t</details>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines the summary label.\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Gibt an, ob die Komponente entweder 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 * @deprecated Use _label.\n\t */\n\t@Prop() public _summary?: string;\n\n\t@State() public state: KoliBriDetailsStates = {\n\t\t_label: '…', // '⚠'\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\twatchBoolean(this, '_open', value);\n\t}\n\n\t@Watch('_summary')\n\tpublic validateSummary(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateLabel(this._label \|\| 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}
1	+ {"file":"kol-details.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,2qCAA2qC;;MCgBtrCA,YAAU;;;;;IAwEd,YAAO,GAAG;MACjB,UAAU,CAAC;;QACV,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC;OAC3C,EAAE,EAAE,CAAC,CAAC;KACP,CAAC;;iBApC+D,KAAK;;iBAQxB;MAC7C,MAAM,EAAE,GAAG;KACX;;EA/CM,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,IAItB,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,MAAM,CAAQ,CACvB,EACV,WAAK,KAAK,EAAC,SAAS,IACnB,6BACC,eAAQ,CACW,CACf,CACG,CACJ,EACN;GACF;EAuBM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,YAAY,CAAC,KAAe;IAClC,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAGM,eAAe,CAAC,KAAc;IACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;GACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolDetails"],"sources":["src/components/details/style.css?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\ndetails {\n\tdisplay: grid;\n}\ndetails > summary {\n\tcursor: pointer;\n\tdisplay: flex;\n\tplace-items: center;\n}\ndetails > summary > span {\n\tborder-bottom-color: grey;\n\tborder-bottom-style: solid;\n}\ndetails > summary:focus > span,\ndetails > summary:hover > span,\ndetails[open] > summary > span {\n\tborder-bottom-color: #000;\n}\ndetails > kol-indented-text {\n\tmargin: 0.25em 0 0 0.5em;\n}\n@keyframes details-show {\n\tto {\n\t\topacity: 1;\n\t\tscale: 1;\n\t}\n}\n.content {\n\topacity: 0;\n\tscale: 1 0;\n\ttransform-origin: top;\n}\ndetails[open] > .content {\n\tanimation: 250ms ease-in-out forwards details-show;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { KoliBriDetailsAPI, KoliBriDetailsStates } from './types';\n\n/*\n @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.\n /\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements KoliBriDetailsAPI {\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{/ Link: https://github.com/public-ui/kolibri/issues/3558 /}\n\t\t\t\t\t{/ eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions /}\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._label}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<kol-indented-text>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-indented-text>\n\t\t\t\t\t</div>\n\t\t\t\t</details>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines the summary label.\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Gibt an, ob die Komponente entweder 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 * @deprecated Use _label.\n\t */\n\t@Prop() public _summary?: string;\n\n\t@State() public state: KoliBriDetailsStates = {\n\t\t_label: '…', // '⚠'\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\twatchBoolean(this, '_open', value);\n\t}\n\n\t@Watch('_summary')\n\tpublic validateSummary(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateLabel(this._label \|\| 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-form.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{f as watchBoolean,b as watchString}from"./prop.validators.js";import{d as defineCustomElement$2}from"./component12.js";const KolForm$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onSubmit=t=>{var e,o;t.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(o=this.state._on)||void 0===o||o.onSubmit(t))},this.onReset=t=>{var e,o;t.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(o=this.state._on)||void 0===o||o.onReset(t))},this._on=void 0,this._requiredText=!0,this.state={}}render(){return h("form",{method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?h("p",null,h("kol-indented-text",null,translate("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?h("p",null,h("kol-indented-text",null,this.state._requiredText)):null,h("slot",null))}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRequiredText(t){"boolean"==typeof t?watchBoolean(this,"_requiredText",t):watchString(this,"_requiredText",t)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"]}}},[1,"kol-form",{_on:[16],_requiredText:[8,"_required-text"],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-form","kol-indented-text"].forEach((t=>{switch(t){case"kol-form":customElements.get(t)||customElements.define(t,KolForm$1);break;case"kol-indented-text":customElements.get(t)||defineCustomElement$2()}}))}const KolForm=KolForm$1,defineCustomElement=defineCustomElement$1;export{KolForm,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{f as watchBoolean,b as watchString}from"./prop.validators.js";import{d as defineCustomElement$2}from"./component12.js";const KolForm$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onSubmit=t=>{var e,o;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(o=this.state._on)||void 0===o||o.onSubmit(t))},this.onReset=t=>{var e,o;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(o=this.state._on)||void 0===o||o.onReset(t))},this._on=void 0,this._requiredText=!0,this.state={}}render(){return h("form",{method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?h("p",null,h("kol-indented-text",null,translate("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?h("p",null,h("kol-indented-text",null,this.state._requiredText)):null,h("slot",null))}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRequiredText(t){"boolean"==typeof t?watchBoolean(this,"_requiredText",t):watchString(this,"_requiredText",t)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"]}}},[1,"kol-form",{_on:[16],_requiredText:[8,"_required-text"],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-form","kol-indented-text"].forEach((t=>{switch(t){case"kol-form":customElements.get(t)||customElements.define(t,KolForm$1);break;case"kol-indented-text":customElements.get(t)||defineCustomElement$2()}}))}const KolForm=KolForm$1,defineCustomElement=defineCustomElement$1;export{KolForm,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-form.js","mappings":";;;;;;;;MAcaA,SAAO;;;;;IACF,aAAQ,GAAG,CAAC,KAAY;;MACxC,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAA,KAAK,UAAU,EAAE;QACnD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAC,KAAoB,CAAC,CAAC;OAC/C;KACD,CAAC;IACe,YAAO,GAAG,CAAC,KAAY;;MACvC,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;QAClD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAC,KAAK,CAAC,CAAC;OAC/B;KACD,CAAC;;yBA2BoD,IAAI;iBAEf,EAAE;;EA3BtC,MAAM;IACZ,QACC,YAAM,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,YAAY,EAAC,KAAK,EAAC,UAAU,UAC/F,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,IAAI,IACjC,aACC,6BAAoB,SAAS,CAAC,sBAAsB,CAAC,CAAqB,CACvE,IACD,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IACtF,aACC,6BAAoB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAqB,CAC9D,IACD,IAAI,EACR,eAAQ,CACF,EACN;GACF;EAeM,UAAU,CAAC,KAA4B;IAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;MAChD,IAAI,CAAC,KAAK,mCACN,IAAI,CAAC,KAAK,KACb,GAAG,EAAE,KAAK,GACV,CAAC;KACF;GACD;EAGM,oBAAoB,CAAC,KAA4B;IACvD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;MAC/B,YAAY,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;KAC3C;SAAM;MACN,WAAW,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;KAC1C;GACD;EAEM,iBAAiB;IACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolForm"],"sources":["src/components/form/component.tsx"],"sourcesContent":["import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { KoliBriFormAPI, KoliBriFormCallbacks, KoliBriFormStates } from './types';\n\n/*\n @slot - Inhalt der Form.\n /\n@Component({\n\ttag: 'kol-form',\n\tshadow: true,\n})\nexport class KolForm implements KoliBriFormAPI {\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t};\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<form method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete=\"off\" noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{translate('kol-form-description')}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{this.state._requiredText}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\t/\n\t Gibt die EventCallback-Funktionen für die Form-Events an.\n\t /\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/\n\t Gibt an, ob der Pflichtfeld-Hinweis eingeblendet werden soll. Ein String überschreibt den Standardtext.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\n\t@State() public state: KoliBriFormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-form.js","mappings":";;;;;;;;MAcaA,SAAO;;;;;IACF,aAAQ,GAAG,CAAC,KAAY;;MACxC,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAA,KAAK,UAAU,EAAE;QACnD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAC,KAAoB,CAAC,CAAC;OAC/C;KACD,CAAC;IACe,YAAO,GAAG,CAAC,KAAY;;MACvC,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;QAClD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAC,KAAK,CAAC,CAAC;OAC/B;KACD,CAAC;;yBA2BoD,IAAI;iBAEf,EAAE;;EA3BtC,MAAM;IACZ,QACC,YAAM,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,YAAY,EAAC,KAAK,EAAC,UAAU,UAC/F,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,IAAI,IACjC,aACC,6BAAoB,SAAS,CAAC,sBAAsB,CAAC,CAAqB,CACvE,IACD,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IACtF,aACC,6BAAoB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAqB,CAC9D,IACD,IAAI,EACR,eAAQ,CACF,EACN;GACF;EAeM,UAAU,CAAC,KAA4B;IAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;MAChD,IAAI,CAAC,KAAK,mCACN,IAAI,CAAC,KAAK,KACb,GAAG,EAAE,KAAK,GACV,CAAC;KACF;GACD;EAGM,oBAAoB,CAAC,KAA4B;IACvD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;MAC/B,YAAY,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;KAC3C;SAAM;MACN,WAAW,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;KAC1C;GACD;EAEM,iBAAiB;IACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolForm"],"sources":["src/components/form/component.tsx"],"sourcesContent":["import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { KoliBriFormAPI, KoliBriFormCallbacks, KoliBriFormStates } from './types';\n\n/*\n @slot - Inhalt der Form.\n /\n@Component({\n\ttag: 'kol-form',\n\tshadow: true,\n})\nexport class KolForm implements KoliBriFormAPI {\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t};\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<form method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete=\"off\" noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{translate('kol-form-description')}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{this.state._requiredText}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\t/\n\t Gibt die EventCallback-Funktionen für die Form-Events an.\n\t /\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/\n\t Gibt an, ob der Pflichtfeld-Hinweis eingeblendet werden soll. Ein String überschreibt den Standardtext.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\n\t@State() public state: KoliBriFormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{w as watchValidator,b as watchString,v as propagateFocus,n as nonce}from"./prop.validators.js";import{g as getRenderStates}from"./controller.js";import{I as InputIconController}from"./controller-icon.js";import{v as validateSuggestions}from"./suggestions.js";import{d as defineCustomElement$9}from"./shadow.js";import{d as defineCustomElement$8}from"./component6.js";import{d as defineCustomElement$7}from"./component5.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component13.js";import{d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$2}from"./component.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(){}validateSuggestions(t){validateSuggestions(this.component,t)}validateValue(t){watchString(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateSuggestions(this.component._suggestions||this.component._list),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}div.input{cursor:pointer}",KolInputColor$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,i=!1===this.state._label;return h(Host,null,h("kol-input",{class:{color:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_suggestions:this.state._suggestions,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},h("span",{slot:"label"},i?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,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)),h("kol-tooltip",{"aria-hidden":"true",hidden:i||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propagateFocus(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._label=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:`id-${nonce()}`,_label:!1,_suggestions:[]},this.controller=new InputColorController(this,"input-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)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(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"],_label:["validateLabel"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_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:[4],_error:[1],_hideLabel:[4,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_label:[8],_list:[1],_name:[1],_on:[16],_smartButton:[1,"_smart-button"],_suggestions:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-color","kol-alert","kol-alert-wc","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-alert-wc":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{w as watchValidator,b as watchString,v as propagateFocus,n as nonce}from"./prop.validators.js";import{g as getRenderStates}from"./controller.js";import{v as validateSuggestions}from"./suggestions.js";import{I as InputIconController}from"./controller-icon.js";import{d as defineCustomElement$9}from"./shadow.js";import{d as defineCustomElement$8}from"./component6.js";import{d as defineCustomElement$7}from"./component5.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component13.js";import{d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$2}from"./component.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(){}validateSuggestions(t){validateSuggestions(this.component,t)}validateValue(t){watchString(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateSuggestions(this.component._suggestions||this.component._list),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}div.input{cursor:pointer}",KolInputColor$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,i=!1===this.state._label;return h(Host,null,h("kol-input",{class:{color:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_suggestions:this.state._suggestions,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},h("span",{slot:"label"},i?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,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)),h("kol-tooltip",{"aria-hidden":"true",hidden:i||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propagateFocus(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._label=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:`id-${nonce()}`,_label:!1,_suggestions:[]},this.controller=new InputColorController(this,"input-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)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(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"],_label:["validateLabel"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_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:[4],_error:[1],_hideLabel:[4,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_label:[8],_list:[1],_name:[1],_on:[16],_smartButton:[1,"_smart-button"],_suggestions:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-color","kol-alert","kol-alert-wc","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-alert-wc":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};

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

	@@ -1 +1 @@
1	- {"file":"kol-input-color.js","mappings":"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","names":["KolInputColor"],"sources":["src/components/input-color/controller.ts","src/components/input-color/style.css?tag=kol-input-color&mode=default&encapsulation=shadow","src/components/input-color/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { InputTypeOnOff } from '../../types/input/types';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\n\nexport class InputColorController extends InputIconController 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\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' \|\| value === 'off'),\n\t\t\tnew Set(['on \| off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/*\n\t @deprecated remains to satisfy `Watches` interface\n\t /\n\t// eslint-disable-next-line @typescript-eslint/no-empty-function\n\tpublic validateList(): void {}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateSuggestions(this.component._suggestions \|\| this.component._list);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\ndiv.input {\n\tcursor: pointer;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { Align } from '../../types/props/align';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputColorController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { SuggestionsPropType } from '../../types/props/suggestions';\n\n/\n @slot - Die Beschriftung des Eingabefeldes.\n /\n@Component({\n\ttag: 'kol-input-color',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputColor implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputColorElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\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\tcolor: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\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_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_suggestions={this.state._suggestions}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/ TODO: der folgende Slot ohne Name muss später entfernt werden /}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\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\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\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\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t /\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot \|\| !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_id={`${this.state._id}-tooltip`}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\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: InputColorController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t /\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/\n\t Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop() 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 Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop() public _hideLabel?: boolean;\n\n\t/\n\t Gibt den Hinweistext an.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die interne ID des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Gibt die Liste der Vorschlagswörter an.\n\t * @deprecated Use _suggestions instead.\n\t /\n\t@Prop() public _list?: SuggestionsPropType;\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 Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t /\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/\n\t Suggestions to provide for the input.\n\t /\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Align = 'top';\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 den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputColorController(this, 'input-color', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: SuggestionsPropType): void {\n\t\tthis.validateSuggestions(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps \| string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\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"],"version":3}
1	+ {"file":"kol-input-color.js","mappings":"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","names":["KolInputColor"],"sources":["src/components/input-color/controller.ts","src/components/input-color/style.css?tag=kol-input-color&mode=default&encapsulation=shadow","src/components/input-color/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { InputTypeOnOff } from '../../types/input/types';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputColorController extends InputIconController 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\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' \|\| value === 'off'),\n\t\t\tnew Set(['on \| off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/*\n\t @deprecated remains to satisfy `Watches` interface\n\t /\n\t// eslint-disable-next-line @typescript-eslint/no-empty-function\n\tpublic validateList(): void {}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateSuggestions(this.component._suggestions \|\| this.component._list);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\ndiv.input {\n\tcursor: pointer;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { Align } from '../../types/props/align';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { SuggestionsPropType } from '../../types/props/suggestions';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputColorController } from './controller';\nimport { ComponentApi, States } from './types';\n\n/\n @slot - Die Beschriftung des Eingabefeldes.\n /\n@Component({\n\ttag: 'kol-input-color',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputColor implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputColorElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\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\tcolor: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\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_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_suggestions={this.state._suggestions}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/ TODO: der folgende Slot ohne Name muss später entfernt werden /}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\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\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\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\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t /\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot \|\| !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_id={`${this.state._id}-tooltip`}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\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: InputColorController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t /\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/\n\t Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop() 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 Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop() public _hideLabel?: boolean;\n\n\t/\n\t Gibt den Hinweistext an.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die interne ID des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Gibt die Liste der Vorschlagswörter an.\n\t * @deprecated Use _suggestions instead.\n\t /\n\t@Prop() public _list?: SuggestionsPropType;\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 Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t /\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/\n\t Suggestions to provide for the input.\n\t /\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Align = 'top';\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 den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputColorController(this, 'input-color', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: SuggestionsPropType): void {\n\t\tthis.validateSuggestions(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps \| string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\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"],"version":3}

package/dist/components/kol-input-date.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{f as watchBoolean,w as watchValidator,m as setState,B as watchNumber,v as propagateFocus,n as nonce}from"./prop.validators.js";import{p as propagateSubmitEventToForm,d as defineCustomElement$7}from"./component5.js";import{g as getRenderStates}from"./controller.js";import{I as InputIconController}from"./controller-icon.js";import{v as validateSuggestions}from"./suggestions.js";import{d as defineCustomElement$9}from"./shadow.js";import{d as defineCustomElement$8}from"./component6.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component13.js";import{d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$2}from"./component.js";const validateReadOnly=(t,e)=>{watchBoolean(t,"_readOnly",e)};class InputDateController extends InputIconController{constructor(t,e,a){super(t,e,a),this.validateIso8601=(t,e,a)=>watchValidator(this.component,t,(t=>void 0===t||null==t||""===t||this.validateDateString(t)),new Set(["Date","string{ISO-8601}"]),this.tryParseToString(e),{hooks:{afterPatch:t=>{"string"==typeof t&&a&&a(t)}}}),this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(){}validateSuggestions(t){validateSuggestions(this.component,t)}tryParseToString(t,e){const a=null!=t?t:e;if("string"==typeof a)return a;if("object"==typeof a&&a instanceof Date)switch(this.component._type){case"date":return`${a.getFullYear()}-${a.getMonth()+1}-${a.getDate()}`;case"datetime-local":return`${a.getFullYear()}-${a.getMonth()+1}-${a.getDate()}T${a.getHours()}:${a.getMinutes()}:${a.getSeconds()}`;case"month":return`${a.getFullYear()}-${a.getMonth()+1}`;case"time":return void 0===this.component._step||"string"==typeof this.component._step&&"60"===this.component._step||"number"==typeof this.component._step&&60===this.component._step?`${a.getHours()}:${a.getMinutes()}`:`${a.getHours()}:${a.getMinutes()}:${a.getSeconds()}`;case"week":throw new Error("Auto convert to week is not supported!")}return null===t?null:void 0}validateDateString(t){switch(this.component._type){case"date":return InputDateController.isoDateRegex.test(t);case"datetime-local":return InputDateController.isoLocalDateTimeRegex.test(t);case"month":return InputDateController.isoMonthRegex.test(t);case"time":return InputDateController.isoTimeRegex.test(t);case"week":return InputDateController.isoWeekRegex.test(t);default:return!1}}onChange(t){super.onChange(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){watchValidator(this.component,"_max",(t=>void 0===t||null!==t&&this.validateDateString(t)),new Set(["Iso8601","Date"]),this.tryParseToString(t,"date"===this.component._type||"month"===this.component._type||"datetime-local"===this.component._type?InputDateController.DEFAULT_MAX_DATE:void 0))}validateMin(t){watchValidator(this.component,"_min",(t=>void 0===t||null!==t&&this.validateDateString(t)),new Set(["Iso8601","Date"]),this.tryParseToString(t))}validateOn(t){setState(this.component,"_on",Object.assign(Object.assign({},t),{onChange:(e,a)=>{!!a!=!!this.component._value&&(this.component._value=a),(null==t?void 0:t.onChange)&&t.onChange(e,a)}}))}validateReadOnly(t){validateReadOnly(this.component,t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateStep(t){watchNumber(this.component,"_step",t)}validateType(t){watchValidator(this.component,"_type",(t=>"string"==typeof t&&("date"===t||"datetime-local"===t||"month"===t||"number"===t||"time"===t||"week"===t)),new Set(["String {date, datetime-local, month, number, time, week}"]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateLabel(this.component._label),this.validateSuggestions(this.component._suggestions||this.component._list),this.validateOn(this.component._on),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}InputDateController.isoDateRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])/,InputDateController.isoLocalDateTimeRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])[T ][0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,InputDateController.isoMonthRegex=/^\d{4}-([0]\d|1[0-2])/,InputDateController.isoTimeRegex=/^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,InputDateController.isoWeekRegex=/^\d{4}-W(?:[0-4]\d|5[0-3])$/,InputDateController.DEFAULT_MAX_DATE=new Date(9999,11,31,23,59,59);const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input-number{display:block}",KolInputDate$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,a=!1===this.state._label;return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_suggestions:this.state._suggestions,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched},h("span",{slot:"label"},a?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,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:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,step:this.state._step,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})),h("kol-tooltip",{"aria-hidden":"true",hidden:a||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},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._label=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._readOnly=void 0,this._required=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._step=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="date",this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_id:`id-${nonce()}`,_label:!1,_suggestions:[],_type:"datetime-local"},this.controller=new InputDateController(this,"input-date",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)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateStep(t){this.controller.validateStep(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValueEx(t,(t=>{""===t&&this.ref&&(this.ref.value="")}))}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}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"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-date",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[4],_error:[1],_hideLabel:[4,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_label:[8],_list:[1],_max:[1],_min:[1],_name:[1],_on:[16],_readOnly:[4,"_read-only"],_required:[4],_smartButton:[1,"_smart-button"],_suggestions:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_step:[2],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_type:[1],_value:[1025],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-date","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-input-date":customElements.get(t)||customElements.define(t,KolInputDate$1);break;case"kol-alert":customElements.get(t)||defineCustomElement$9();break;case"kol-alert-wc":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 KolInputDate=KolInputDate$1,defineCustomElement=defineCustomElement$1;export{KolInputDate,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{f as watchBoolean,w as watchValidator,m as setState,B as watchNumber,v as propagateFocus,n as nonce}from"./prop.validators.js";import{p as propagateSubmitEventToForm,d as defineCustomElement$7}from"./component5.js";import{g as getRenderStates}from"./controller.js";import{v as validateSuggestions}from"./suggestions.js";import{I as InputIconController}from"./controller-icon.js";import{d as defineCustomElement$9}from"./shadow.js";import{d as defineCustomElement$8}from"./component6.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component13.js";import{d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$2}from"./component.js";const validateReadOnly=(t,e)=>{watchBoolean(t,"_readOnly",e)};class InputDateController extends InputIconController{constructor(t,e,a){super(t,e,a),this.validateIso8601=(t,e,a)=>watchValidator(this.component,t,(t=>void 0===t||null==t||""===t||this.validateDateString(t)),new Set(["Date","string{ISO-8601}"]),this.tryParseToString(e),{hooks:{afterPatch:t=>{"string"==typeof t&&a&&a(t)}}}),this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(){}validateSuggestions(t){validateSuggestions(this.component,t)}tryParseToString(t,e){const a=null!=t?t:e;if("string"==typeof a)return a;if("object"==typeof a&&a instanceof Date)switch(this.component._type){case"date":return`${a.getFullYear()}-${a.getMonth()+1}-${a.getDate()}`;case"datetime-local":return`${a.getFullYear()}-${a.getMonth()+1}-${a.getDate()}T${a.getHours()}:${a.getMinutes()}:${a.getSeconds()}`;case"month":return`${a.getFullYear()}-${a.getMonth()+1}`;case"time":return void 0===this.component._step||"string"==typeof this.component._step&&"60"===this.component._step||"number"==typeof this.component._step&&60===this.component._step?`${a.getHours()}:${a.getMinutes()}`:`${a.getHours()}:${a.getMinutes()}:${a.getSeconds()}`;case"week":throw new Error("Auto convert to week is not supported!")}return null===t?null:void 0}validateDateString(t){switch(this.component._type){case"date":return InputDateController.isoDateRegex.test(t);case"datetime-local":return InputDateController.isoLocalDateTimeRegex.test(t);case"month":return InputDateController.isoMonthRegex.test(t);case"time":return InputDateController.isoTimeRegex.test(t);case"week":return InputDateController.isoWeekRegex.test(t);default:return!1}}onChange(t){super.onChange(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){watchValidator(this.component,"_max",(t=>void 0===t||null!==t&&this.validateDateString(t)),new Set(["Iso8601","Date"]),this.tryParseToString(t,"date"===this.component._type||"month"===this.component._type||"datetime-local"===this.component._type?InputDateController.DEFAULT_MAX_DATE:void 0))}validateMin(t){watchValidator(this.component,"_min",(t=>void 0===t||null!==t&&this.validateDateString(t)),new Set(["Iso8601","Date"]),this.tryParseToString(t))}validateOn(t){setState(this.component,"_on",Object.assign(Object.assign({},t),{onChange:(e,a)=>{!!a!=!!this.component._value&&(this.component._value=a),(null==t?void 0:t.onChange)&&t.onChange(e,a)}}))}validateReadOnly(t){validateReadOnly(this.component,t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateStep(t){watchNumber(this.component,"_step",t)}validateType(t){watchValidator(this.component,"_type",(t=>"string"==typeof t&&("date"===t||"datetime-local"===t||"month"===t||"number"===t||"time"===t||"week"===t)),new Set(["String {date, datetime-local, month, number, time, week}"]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateLabel(this.component._label),this.validateSuggestions(this.component._suggestions||this.component._list),this.validateOn(this.component._on),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}InputDateController.isoDateRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])/,InputDateController.isoLocalDateTimeRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])[T ][0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,InputDateController.isoMonthRegex=/^\d{4}-([0]\d|1[0-2])/,InputDateController.isoTimeRegex=/^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,InputDateController.isoWeekRegex=/^\d{4}-W(?:[0-4]\d|5[0-3])$/,InputDateController.DEFAULT_MAX_DATE=new Date(9999,11,31,23,59,59);const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input-number{display:block}",KolInputDate$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,a=!1===this.state._label;return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_suggestions:this.state._suggestions,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched},h("span",{slot:"label"},a?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,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:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,step:this.state._step,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})),h("kol-tooltip",{"aria-hidden":"true",hidden:a||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},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._label=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._readOnly=void 0,this._required=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._step=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="date",this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_id:`id-${nonce()}`,_label:!1,_suggestions:[],_type:"datetime-local"},this.controller=new InputDateController(this,"input-date",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)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateStep(t){this.controller.validateStep(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValueEx(t,(t=>{""===t&&this.ref&&(this.ref.value="")}))}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}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"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-date",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[4],_error:[1],_hideLabel:[4,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_label:[8],_list:[1],_max:[1],_min:[1],_name:[1],_on:[16],_readOnly:[4,"_read-only"],_required:[4],_smartButton:[1,"_smart-button"],_suggestions:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_step:[2],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_type:[1],_value:[1025],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-date","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-input-date":customElements.get(t)||customElements.define(t,KolInputDate$1);break;case"kol-alert":customElements.get(t)||defineCustomElement$9();break;case"kol-alert-wc":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 KolInputDate=KolInputDate$1,defineCustomElement=defineCustomElement$1;export{KolInputDate,defineCustomElement};