@public-ui/components 1.6.0-rc.24 → 1.6.0-rc.26

package/dist/kolibri/kol-icon.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolIcon","_icon","render","ariaShow","this","state","_label","length","h","Host","exportparts","undefined","class","part","role","validateAriaLabel","value","validateLabel","validateIcon","watchString","required","validatePart","devHint","componentWillLoad","_ariaLabel","_part"],"sources":["src/components/icon/style.css?tag=kol-icon&mode=default&encapsulation=shadow","src/components/icon/component.tsx"],"sourcesContent":["@import url(../../assets/codicons/codicon.css);\n:host {\n\tcolor: inherit;\n\tdisplay: contents;\n\theight: 1em;\n\tline-height: inherit;\n\twidth: 1em;\n}\n:host > i {\n\theight: 1em;\n\twidth: 1em;\n}\n/*\n * The <code>:important</code> is important, because we should always override the font icon style.\n */\n:host > i,\n:host > i:before {\n\tfont-size: inherit !important;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { KoliBriIconAPI, KoliBriIconStates } from './types';\n\n/**\n * @part icon - Ermöglicht das Styling des inneren Icons.\n */\n@Component({\n\ttag: 'kol-icon',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolIcon implements KoliBriIconAPI {\n\tpublic render(): JSX.Element {\n\t\tconst ariaShow = typeof this.state._label === 'string' && this.state._label.length > 0;\n\t\treturn (\n\t\t\t<Host exportparts=\"icon\">\n\t\t\t\t<i\n\t\t\t\t\taria-hidden={ariaShow ? undefined : 'true'}\n\t\t\t\t\t/**\n\t\t\t\t\t * Die Auszeichnung `aria-hidden` ist eigentlich nicht erforderlich, da die aktuellen\n\t\t\t\t\t * Screenreader, wie NVDA und JAWS, es auch ohne `aria-hidden` nicht vorlesen.\n\t\t\t\t\t *\n\t\t\t\t\t * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden\n\t\t\t\t\t */\n\t\t\t\t\taria-label={ariaShow ? this.state._label : undefined}\n\t\t\t\t\tclass={this.state._icon}\n\t\t\t\t\tpart=\"icon\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t></i>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon!: 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?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop() public _part?: string;\n\n\t@State() public state: KoliBriIconStates = {\n\t\t_icon: 'codicon codicon-home',\n\t\t// _label: false, // ⚠ required TODO: required in v2\n\t};\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: string): void {\n\t\twatchString(this, '_icon', value, { required: true });\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_part')\n\tpublic validatePart(value?: string): void {\n\t\tif (value) {\n\t\t\tdevHint(`ICON: The usage of the part attribute is deprecated and has no effect.`);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validatePart(this._part);\n\t}\n}\n"],"mappings":";;;qRAAA,MAAMA,EAAkB,4lvB,MCiBXC,EAAO,M,8HA6CwB,CAC1CC,MAAO,uB,CA7CD,MAAAC,GACN,MAAMC,SAAkBC,KAAKC,MAAMC,SAAW,UAAYF,KAAKC,MAAMC,OAAOC,OAAS,EACrF,OACCC,EAACC,EAAI,CAACC,YAAY,QACjBF,EAAA,mBACcL,EAAWQ,UAAY,OAAM,aAO9BR,EAAWC,KAAKC,MAAMC,OAASK,UAC3CC,MAAOR,KAAKC,MAAMJ,MAClBY,KAAK,OACLC,KAAK,Q,CAsCF,iBAAAC,CAAkBC,GACxBZ,KAAKa,cAAcD,E,CAIb,YAAAE,CAAaF,GACnBG,EAAYf,KAAM,QAASY,EAAO,CAAEI,SAAU,M,CAIxC,aAAAH,CAAcD,GACpBC,EAAcb,KAAMY,E,CAOd,YAAAK,CAAaL,GACnB,GAAIA,EAAO,CACVM,EAAQ,yE,EAIH,iBAAAC,GACNnB,KAAKc,aAAad,KAAKH,OACvBG,KAAKa,cAAcb,KAAKE,QAAUF,KAAKoB,YACvCpB,KAAKiB,aAAajB,KAAKqB,M"}
+{"version":3,"names":["defaultStyleCss","KolIcon","_icon","render","ariaShow","this","state","_label","length","h","Host","exportparts","undefined","class","part","role","validateAriaLabel","value","validateLabel","validateIcon","watchString","required","validatePart","devHint","componentWillLoad","_ariaLabel","_part"],"sources":["src/components/icon/style.css?tag=kol-icon&mode=default&encapsulation=shadow","src/components/icon/component.tsx"],"sourcesContent":["@import url(../../assets/codicons/codicon.css);\n:host {\n\tcolor: inherit;\n\tdisplay: contents;\n\theight: 1em;\n\tline-height: inherit;\n\twidth: 1em;\n}\n:host > i {\n\theight: 1em;\n\twidth: 1em;\n}\n/*\n * The <code>:important</code> is important, because we should always override the font icon style.\n */\n:host > i,\n:host > i:before {\n\tfont-size: inherit !important;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\n/**\n * @part icon - Ermöglicht das Styling des inneren Icons.\n */\n@Component({\n\ttag: 'kol-icon',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolIcon implements API {\n\tpublic render(): JSX.Element {\n\t\tconst ariaShow = typeof this.state._label === 'string' && this.state._label.length > 0;\n\t\treturn (\n\t\t\t<Host exportparts=\"icon\">\n\t\t\t\t<i\n\t\t\t\t\taria-hidden={ariaShow ? undefined : 'true'}\n\t\t\t\t\t/**\n\t\t\t\t\t * Die Auszeichnung `aria-hidden` ist eigentlich nicht erforderlich, da die aktuellen\n\t\t\t\t\t * Screenreader, wie NVDA und JAWS, es auch ohne `aria-hidden` nicht vorlesen.\n\t\t\t\t\t *\n\t\t\t\t\t * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden\n\t\t\t\t\t */\n\t\t\t\t\taria-label={ariaShow ? this.state._label : undefined}\n\t\t\t\t\tclass={this.state._icon}\n\t\t\t\t\tpart=\"icon\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t></i>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon!: 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?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop() public _part?: string;\n\n\t@State() public state: States = {\n\t\t_icon: 'codicon codicon-home',\n\t\t// _label: false, // ⚠ required TODO: required in v2\n\t};\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: string): void {\n\t\twatchString(this, '_icon', value, { required: true });\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_part')\n\tpublic validatePart(value?: string): void {\n\t\tif (value) {\n\t\t\tdevHint(`ICON: The usage of the part attribute is deprecated and has no effect.`);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validatePart(this._part);\n\t}\n}\n"],"mappings":";;;qRAAA,MAAMA,EAAkB,4lvB,MCiBXC,EAAO,M,8HA6Ca,CAC/BC,MAAO,uB,CA7CD,MAAAC,GACN,MAAMC,SAAkBC,KAAKC,MAAMC,SAAW,UAAYF,KAAKC,MAAMC,OAAOC,OAAS,EACrF,OACCC,EAACC,EAAI,CAACC,YAAY,QACjBF,EAAA,mBACcL,EAAWQ,UAAY,OAAM,aAO9BR,EAAWC,KAAKC,MAAMC,OAASK,UAC3CC,MAAOR,KAAKC,MAAMJ,MAClBY,KAAK,OACLC,KAAK,Q,CAsCF,iBAAAC,CAAkBC,GACxBZ,KAAKa,cAAcD,E,CAIb,YAAAE,CAAaF,GACnBG,EAAYf,KAAM,QAASY,EAAO,CAAEI,SAAU,M,CAIxC,aAAAH,CAAcD,GACpBC,EAAcb,KAAMY,E,CAOd,YAAAK,CAAaL,GACnB,GAAIA,EAAO,CACVM,EAAQ,yE,EAIH,iBAAAC,GACNnB,KAAKc,aAAad,KAAKH,OACvBG,KAAKa,cAAcb,KAAKE,QAAUF,KAAKoB,YACvCpB,KAAKiB,aAAajB,KAAKqB,M"}

package/dist/kolibri/kol-image.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-5ab2ea42.js";import{v as e}from"./image-source-abdd2521.js";import{w as a,d as r}from"./prop.validators-286b41b1.js";import"./a11y.tipps-010cc7bb.js";import"./dev.utils-2f404ce5.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const d=new Set(['"eager", "lazy"']);function l(t,s){a(t,"_loading",(t=>"eager"===t||"lazy"===t),d,s)}const h="img{max-height:100%;max-width:100%}",o=class{constructor(s){t(this,s),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"…",_loading:"lazy",_src:"…"}}validateAlt(t){r(this,"_alt",t,{required:!0})}validateLoading(t){l(this,t)}validateSizes(t){r(this,"_sizes",t)}validateSrc(t){e(this,t,{required:!0})}validateSrcset(t){r(this,"_srcset",t)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return i(s,null,i("img",{alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset}))}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}};o.style={default:h};export{o as kol_image};
+import{r as t,h as i,H as s}from"./index-5ab2ea42.js";import{v as e}from"./image-source-ed1d1f7a.js";import{w as a,d as r}from"./prop.validators-f76b82ff.js";import"./a11y.tipps-d11c3322.js";import"./dev.utils-38b5f4df.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const d=new Set(['"eager", "lazy"']);function l(t,s){a(t,"_loading",(t=>"eager"===t||"lazy"===t),d,s)}const h="img{max-height:100%;max-width:100%}",o=class{constructor(s){t(this,s),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"…",_loading:"lazy",_src:"…"}}validateAlt(t){r(this,"_alt",t,{required:!0})}validateLoading(t){l(this,t)}validateSizes(t){r(this,"_sizes",t)}validateSrc(t){e(this,t,{required:!0})}validateSrcset(t){r(this,"_srcset",t)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return i(s,null,i("img",{alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset}))}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}};o.style={default:h};export{o as kol_image};

package/dist/kolibri/kol-image.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["AVAILABLE_LOADING_VALUES","Set","validateLoading","component","value","watchValidator","defaultStyleCss","KolImage","_alt","_loading","_src","validateAlt","watchString","this","required","validateSizes","validateSrc","validateImageSource","validateSrcset","componentWillLoad","_sizes","_srcset","render","h","Host","alt","state","loading","sizes","src","srcset"],"sources":["src/utils/validators/loading.ts","src/components/image/style.css?tag=kol-image&mode=default&encapsulation=shadow","src/components/image/shadow.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchValidator } from '../prop.validators';\n\nexport type Loading = 'eager' | 'lazy';\n\nconst AVAILABLE_LOADING_VALUES = new Set(['\"eager\", \"lazy\"']);\nexport function validateLoading(component: Generic.Element.Component, value?: Loading): void {\n\twatchValidator<Loading>(component, '_loading', (value) => value === 'eager' || value === 'lazy', AVAILABLE_LOADING_VALUES, value);\n}\n","img {\n\tmax-height: 100%;\n\tmax-width: 100%;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { ImageSourcePropType, validateImageSource } from '../../types/props/image-source';\nimport { watchString } from '../../utils/prop.validators';\nimport { Loading, validateLoading } from '../../utils/validators/loading';\nimport { ComponentApi, States } from './types';\n\n@Component({\n\ttag: 'kol-image',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolImage implements ComponentApi {\n\t/**\n\t * Setzt den alternativen Text.\n\t */\n\t@Prop() public _alt!: string;\n\n\t/**\n\t * Setzt den Lademodus.\n\t */\n\t@Prop() public _loading?: Loading = 'lazy';\n\n\t/**\n\t * Setzt Größen für unterschiedliche Auflösungen, unterstützend für _srcset.\n\t */\n\t@Prop() public _sizes?: string;\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src!: ImageSourcePropType;\n\n\t/**\n\t * Setzt eine Liste von Quell-URLs mit Breiten der Bilder.\n\t */\n\t@Prop() public _srcset?: string;\n\n\t@State() public state: States = {\n\t\t_alt: '…', // ⚠ required\n\t\t_loading: 'lazy',\n\t\t_src: '…', // ⚠ required\n\t};\n\n\t@Watch('_alt')\n\tpublic validateAlt(value?: string): void {\n\t\twatchString(this, '_alt', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_loading')\n\tpublic validateLoading(value?: Loading): void {\n\t\tvalidateLoading(this, value);\n\t}\n\n\t@Watch('_sizes')\n\tpublic validateSizes(value?: string): void {\n\t\twatchString(this, '_sizes', value);\n\t}\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_srcset')\n\tpublic validateSrcset(value?: string): void {\n\t\twatchString(this, '_srcset', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlt(this._alt);\n\t\tthis.validateLoading(this._loading);\n\t\tthis.validateSizes(this._sizes);\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateSrcset(this._srcset);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<img alt={this.state._alt} loading={this.state._loading} sizes={this.state._sizes} src={this.state._src} srcset={this.state._srcset}></img>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;uRAMA,MAAMA,EAA2B,IAAIC,IAAI,CAAC,oB,SAC1BC,EAAgBC,EAAsCC,GACrEC,EAAwBF,EAAW,YAAaC,GAAUA,IAAU,SAAWA,IAAU,QAAQJ,EAA0BI,EAC5H,CCTA,MAAME,EAAkB,sC,MCcXC,EAAQ,M,2DASgB,O,4EAiBJ,CAC/BC,KAAM,IACNC,SAAU,OACVC,KAAM,I,CAIA,WAAAC,CAAYP,GAClBQ,EAAYC,KAAM,OAAQT,EAAO,CAChCU,SAAU,M,CAKL,eAAAZ,CAAgBE,GACtBF,EAAgBW,KAAMT,E,CAIhB,aAAAW,CAAcX,GACpBQ,EAAYC,KAAM,SAAUT,E,CAItB,WAAAY,CAAYZ,GAClBa,EAAoBJ,KAAMT,EAAO,CAChCU,SAAU,M,CAKL,cAAAI,CAAed,GACrBQ,EAAYC,KAAM,UAAWT,E,CAGvB,iBAAAe,GACNN,KAAKF,YAAYE,KAAKL,MACtBK,KAAKX,gBAAgBW,KAAKJ,UAC1BI,KAAKE,cAAcF,KAAKO,QACxBP,KAAKG,YAAYH,KAAKH,MACtBG,KAAKK,eAAeL,KAAKQ,Q,CAGnB,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,OAAKE,IAAKZ,KAAKa,MAAMlB,KAAMmB,QAASd,KAAKa,MAAMjB,SAAUmB,MAAOf,KAAKa,MAAMN,OAAQS,IAAKhB,KAAKa,MAAMhB,KAAMoB,OAAQjB,KAAKa,MAAML,U"}
+{"version":3,"names":["AVAILABLE_LOADING_VALUES","Set","validateLoading","component","value","watchValidator","defaultStyleCss","KolImage","_alt","_loading","_src","validateAlt","watchString","this","required","validateSizes","validateSrc","validateImageSource","validateSrcset","componentWillLoad","_sizes","_srcset","render","h","Host","alt","state","loading","sizes","src","srcset"],"sources":["src/utils/validators/loading.ts","src/components/image/style.css?tag=kol-image&mode=default&encapsulation=shadow","src/components/image/shadow.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchValidator } from '../prop.validators';\n\nexport type Loading = 'eager' | 'lazy';\n\nconst AVAILABLE_LOADING_VALUES = new Set(['\"eager\", \"lazy\"']);\nexport function validateLoading(component: Generic.Element.Component, value?: Loading): void {\n\twatchValidator<Loading>(component, '_loading', (value) => value === 'eager' || value === 'lazy', AVAILABLE_LOADING_VALUES, value);\n}\n","img {\n\tmax-height: 100%;\n\tmax-width: 100%;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { ImageSourcePropType, validateImageSource } from '../../types/props/image-source';\nimport { watchString } from '../../utils/prop.validators';\nimport { Loading, validateLoading } from '../../utils/validators/loading';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-image',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolImage implements API {\n\t/**\n\t * Setzt den alternativen Text.\n\t */\n\t@Prop() public _alt!: string;\n\n\t/**\n\t * Setzt den Lademodus.\n\t */\n\t@Prop() public _loading?: Loading = 'lazy';\n\n\t/**\n\t * Setzt Größen für unterschiedliche Auflösungen, unterstützend für _srcset.\n\t */\n\t@Prop() public _sizes?: string;\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src!: ImageSourcePropType;\n\n\t/**\n\t * Setzt eine Liste von Quell-URLs mit Breiten der Bilder.\n\t */\n\t@Prop() public _srcset?: string;\n\n\t@State() public state: States = {\n\t\t_alt: '…', // ⚠ required\n\t\t_loading: 'lazy',\n\t\t_src: '…', // ⚠ required\n\t};\n\n\t@Watch('_alt')\n\tpublic validateAlt(value?: string): void {\n\t\twatchString(this, '_alt', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_loading')\n\tpublic validateLoading(value?: Loading): void {\n\t\tvalidateLoading(this, value);\n\t}\n\n\t@Watch('_sizes')\n\tpublic validateSizes(value?: string): void {\n\t\twatchString(this, '_sizes', value);\n\t}\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_srcset')\n\tpublic validateSrcset(value?: string): void {\n\t\twatchString(this, '_srcset', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlt(this._alt);\n\t\tthis.validateLoading(this._loading);\n\t\tthis.validateSizes(this._sizes);\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateSrcset(this._srcset);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<img alt={this.state._alt} loading={this.state._loading} sizes={this.state._sizes} src={this.state._src} srcset={this.state._srcset}></img>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;uRAMA,MAAMA,EAA2B,IAAIC,IAAI,CAAC,oB,SAC1BC,EAAgBC,EAAsCC,GACrEC,EAAwBF,EAAW,YAAaC,GAAUA,IAAU,SAAWA,IAAU,QAAQJ,EAA0BI,EAC5H,CCTA,MAAME,EAAkB,sC,MCcXC,EAAQ,M,2DASgB,O,4EAiBJ,CAC/BC,KAAM,IACNC,SAAU,OACVC,KAAM,I,CAIA,WAAAC,CAAYP,GAClBQ,EAAYC,KAAM,OAAQT,EAAO,CAChCU,SAAU,M,CAKL,eAAAZ,CAAgBE,GACtBF,EAAgBW,KAAMT,E,CAIhB,aAAAW,CAAcX,GACpBQ,EAAYC,KAAM,SAAUT,E,CAItB,WAAAY,CAAYZ,GAClBa,EAAoBJ,KAAMT,EAAO,CAChCU,SAAU,M,CAKL,cAAAI,CAAed,GACrBQ,EAAYC,KAAM,UAAWT,E,CAGvB,iBAAAe,GACNN,KAAKF,YAAYE,KAAKL,MACtBK,KAAKX,gBAAgBW,KAAKJ,UAC1BI,KAAKE,cAAcF,KAAKO,QACxBP,KAAKG,YAAYH,KAAKH,MACtBG,KAAKK,eAAeL,KAAKQ,Q,CAGnB,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,OAAKE,IAAKZ,KAAKa,MAAMlB,KAAMmB,QAASd,KAAKa,MAAMjB,SAAUmB,MAAOf,KAAKa,MAAMN,OAAQS,IAAKhB,KAAKa,MAAMhB,KAAMoB,OAAQjB,KAAKa,MAAML,U"}

package/dist/kolibri/kol-indented-text.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolIndentedText","render","h","Host"],"sources":["src/components/indented-text/style.css?tag=kol-indented-text&mode=default&encapsulation=shadow","src/components/indented-text/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n:host > div {\n\tborder-left-style: solid;\n\tpadding-left: 0.5em;\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, State } from '@stencil/core';\n\ntype RequiredProps = unknown;\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @slot - Der Text.\n */\n@Component({\n\ttag: 'kol-indented-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolIndentedText implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t@State() public state: States = {};\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\t{/* TODO: Für was wird dieses div benötigt? */}\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,gwB,MCqBXC,EAAe,M,oCACK,E,CAEzB,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,WAECA,EAAA,c"}
+{"version":3,"names":["defaultStyleCss","KolIndentedText","render","h","Host"],"sources":["src/components/indented-text/style.css?tag=kol-indented-text&mode=default&encapsulation=shadow","src/components/indented-text/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n:host > div {\n\tborder-left-style: solid;\n\tpadding-left: 0.5em;\n}\n","import { Component, h, Host, JSX, State } from '@stencil/core';\nimport { API, States } from './types';\n\n/**\n * @slot - Der Text.\n */\n@Component({\n\ttag: 'kol-indented-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolIndentedText implements API {\n\t@State() public state: States = {};\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\t{/* TODO: Für was wird dieses div benötigt? */}\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,gwB,MCaXC,EAAe,M,oCACK,E,CAEzB,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,WAECA,EAAA,c"}

package/dist/kolibri/kol-input-adapter-leanup.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as i,H as t}from"./index-5ab2ea42.js";import{e as o}from"./a11y.tipps-010cc7bb.js";import"./dev.utils-2f404ce5.js";import"./reuse-c2156413.js";const n=class{constructor(i){e(this,i)}componentWillLoad(){o("Die Komponente 'kol-input-adapter-leanup' mit dem Release v1.1.7 umgezogen. Lesen Sie hier, wie Sie sie migrieren: https://public-ui.github.io/docs/changelog/#117---30092022")}render(){return i(t,null,i("kol-alert",{_type:"warning"},"Die Komponente ",i("code",null,"kol-input-adapter-leanup")," ist umgezogen. Lesen Sie hier, wie Sie sie migrieren:"," ",i("kol-link",{_href:"https://public-ui.github.io/docs/changelog#118---07102022",_label:"https://public-ui.github.io/docs/changelog#118---07102022",_target:"documentation"})))}};export{n as kol_input_adapter_leanup};
+import{r as e,h as i,H as t}from"./index-5ab2ea42.js";import{e as o}from"./a11y.tipps-d11c3322.js";import"./dev.utils-38b5f4df.js";import"./reuse-c2156413.js";const n=class{constructor(i){e(this,i)}componentWillLoad(){o("Die Komponente 'kol-input-adapter-leanup' mit dem Release v1.1.7 umgezogen. Lesen Sie hier, wie Sie sie migrieren: https://public-ui.github.io/docs/changelog/#117---30092022")}render(){return i(t,null,i("kol-alert",{_type:"warning"},"Die Komponente ",i("code",null,"kol-input-adapter-leanup")," ist umgezogen. Lesen Sie hier, wie Sie sie migrieren:"," ",i("kol-link",{_href:"https://public-ui.github.io/docs/changelog#118---07102022",_label:"https://public-ui.github.io/docs/changelog#118---07102022",_target:"documentation"})))}};export{n as kol_input_adapter_leanup};

package/dist/kolibri/kol-input-checkbox.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-5ab2ea42.js";import{n}from"./dev.utils-2f404ce5.js";import{s,t as o}from"./associated.controller-9d8da408.js";import{i as l,a as d}from"./reuse-c2156413.js";import{g as r}from"./controller-108aa205.js";import{a as h,w as c,s as p}from"./prop.validators-286b41b1.js";import{d as u}from"./a11y.tipps-010cc7bb.js";import{I as b}from"./controller-76742dfc.js";import"./label-8596593d.js";import"./tab-index-a7766f42.js";import"./index-37b5cbcf.js";const m=(t,e)=>{h(t,"_checked",e)},f=(t,e)=>{h(t,"_indeterminate",e)};class y extends b{constructor(t,e,i){super(t,e,i),this.setFormAssociatedCheckboxValue=t=>{this.component._checked?this.setFormAssociatedValue(t):this.setFormAssociatedValue(null)},this.component=t}validateChecked(t){m(this.component,t),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateIcon(t){c(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&(l(t.checked,1)||l(t.indeterminate,1)||l(t.unchecked,1))),new Set(["InputCheckboxIcons"]),t)}validateIndeterminate(t){f(this.component,t)}validateType(t){u('The "_type" prop is deprecated. Use "_variant" instead.'),this.validateVariant(t)}validateValue(t){p(this.component,"_value",t),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateVariant(t){"checkbox"===t&&(u("[KolCheckbox] The \"_variant\" value 'checkbox' is deprecated. Use the new value 'default' instead."),t="default"),c(this.component,"_variant",(t=>"string"==typeof t&&("button"===t||"default"===t||"switch"===t)),new Set(["String {button, default, switch}"]),t)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcon(this.component._icon),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant||this.component._type)}}const k=":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}label{cursor:pointer}kol-input{align-items:center;display:grid;justify-items:left;width:100}kol-input.default,kol-input.switch{grid-template-columns:auto 1fr}kol-input .input{align-items:center;display:grid;order:1}kol-input .input div{display:inline-flex}kol-input .input input{margin:0}kol-input label{order:2}kol-input .hint,kol-input.error>kol-alert{grid-column:span 2}kol-input kol-alert.error{order:3}kol-input .hint{order:4}input{border-width:2px;border-style:solid;line-height:24px}input[type='checkbox']{appearance:none;background-color:#fff;cursor:pointer;transition:0.5s}input[type='checkbox'].kol-disabled:before{cursor:not-allowed}input[type='checkbox']:before{content:'';cursor:pointer}.default kol-icon,.switch kol-icon{display:none}.button{cursor:pointer;display:inline-flex;width:auto}.button input{display:none}.default input[type='checkbox']{height:1.5em;width:1.5em}.default input[type='checkbox']:before{display:block;height:1.5em;position:relative;width:1.5em}.default input[type='checkbox']:checked:before{border-radius:1px;border-style:solid;border-width:0 3px 3px 0;height:0.75em;left:calc(0.375em - 2px);transform:rotate(40deg) translate(-50%, -50%);top:calc(0.7125em - 2px);width:0.375em}.default input[type='checkbox']:indeterminate:before{background-color:#000;height:0.2em;left:0.24em;top:0.575em;width:0.8em}.switch input[type='checkbox']{display:inline-block;height:1.7em;min-width:3.2em;position:relative;width:3.2em}.switch input[type='checkbox']:before{background-color:#000;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);position:absolute;-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;transition:0.5s;width:1.2em}.switch input[type='checkbox']:checked:before{-webkit-transform:translateX(1.5em);-moz-transform:translateX(1.5em);-ms-transform:translateX(1.5em);transform:translateX(1.5em)}.switch input[type='checkbox']:indeterminate:before{transform:translateX(0.75em)}",v=class{render(){const{ariaDescribedBy:i}=r(this.state),a=!1===this.state._label;return t(e,null,t("kol-input",{class:{checkbox:!0,[this.state._variant]:!0,"hide-label":!!this.state._hideLabel},"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_required:this.state._required,_touched:this.state._touched},t("span",{slot:"label"},a?t("slot",null):this.state._label),t("div",{slot:"input"},t("kol-icon",{onClick:this.onChange,_ariaLabel:"",_icon:this.state._indeterminate?this.state._icon.indeterminate:this.state._checked?this.state._icon.checked:this.state._icon.unchecked}),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,checked:this.state._checked,disabled:this.state._disabled,id:this.state._id,indeterminate:this.state._indeterminate,name:this.state._name,required:this.state._required,tabIndex:this.state._tabIndex,type:"checkbox"},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})),t("kol-tooltip",{"aria-hidden":"true",hidden:a||!this.state._hideLabel,_align:this._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,d(this.host,this.ref)},this.onChange=t=>{var e;this._checked=!this._checked,this._indeterminate=!1;const i=this._checked?this.state._value:null;s(t),o("change",this.host,i),this.controller.setFormAssociatedValue(i),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,i)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._indeterminate=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type=void 0,this._value=void 0,this._variant=void 0,this.state={_checked:!1,_icon:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-add"},_id:`id-${n()}`,_indeterminate:!1,_label:!1,_value:null,_variant:"default"},this.controller=new y(this,"input-checkbox",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateChecked(t){this.controller.validateChecked(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)}validateIndeterminate(t){this.controller.validateIndeterminate(t)}validateLabel(t){this.controller.validateLabel(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(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.validateValue(t)}validateVariant(t){this.controller.validateVariant(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};v.style={default:k};export{v as kol_input_checkbox};
+import{h as t,H as e,r as i,g as a}from"./index-5ab2ea42.js";import{n}from"./dev.utils-38b5f4df.js";import{s,t as o}from"./associated.controller-d175340e.js";import{i as l,a as d}from"./reuse-c2156413.js";import{g as r}from"./controller-db9c89e4.js";import{a as h,w as c,s as p}from"./prop.validators-f76b82ff.js";import{d as u}from"./a11y.tipps-d11c3322.js";import{I as b}from"./controller-607473a1.js";import"./label-07fc28f5.js";import"./tab-index-96981cc3.js";import"./index-37b5cbcf.js";const f=(t,e)=>{h(t,"_checked",e)},m=(t,e)=>{h(t,"_indeterminate",e)};class y extends b{constructor(t,e,i){super(t,e,i),this.setFormAssociatedCheckboxValue=t=>{this.component._checked?this.setFormAssociatedValue(t):this.setFormAssociatedValue(null)},this.component=t}validateChecked(t){f(this.component,t),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateIcon(t){c(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&(l(t.checked,1)||l(t.indeterminate,1)||l(t.unchecked,1))),new Set(["InputCheckboxIcons"]),t)}validateIndeterminate(t){m(this.component,t)}validateType(t){u('The "_type" prop is deprecated. Use "_variant" instead.'),this.validateVariant(t)}validateValue(t){p(this.component,"_value",t),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateVariant(t){"checkbox"===t&&(u("[KolCheckbox] The \"_variant\" value 'checkbox' is deprecated. Use the new value 'default' instead."),t="default"),c(this.component,"_variant",(t=>"string"==typeof t&&("button"===t||"default"===t||"switch"===t)),new Set(["String {button, default, switch}"]),t)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcon(this.component._icon),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant||this.component._type)}}const k=":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}label{cursor:pointer}kol-input{align-items:center;display:grid;justify-items:left;width:100}kol-input.default,kol-input.switch{grid-template-columns:auto 1fr}kol-input .input{align-items:center;display:grid;order:1}kol-input .input div{display:inline-flex}kol-input .input input{margin:0}kol-input label{order:2}kol-input .hint,kol-input.error>kol-alert{grid-column:span 2}kol-input kol-alert.error{order:3}kol-input .hint{order:4}input{border-width:2px;border-style:solid;line-height:24px}input[type='checkbox']{appearance:none;background-color:#fff;cursor:pointer;transition:0.5s}input[type='checkbox'].kol-disabled:before{cursor:not-allowed}input[type='checkbox']:before{content:'';cursor:pointer}.default kol-icon,.switch kol-icon{display:none}.button{cursor:pointer;display:inline-flex;width:auto}.button input{display:none}.default input[type='checkbox']{height:1.5em;width:1.5em}.default input[type='checkbox']:before{display:block;height:1.5em;position:relative;width:1.5em}.default input[type='checkbox']:checked:before{border-radius:1px;border-style:solid;border-width:0 3px 3px 0;height:0.75em;left:calc(0.375em - 2px);transform:rotate(40deg) translate(-50%, -50%);top:calc(0.7125em - 2px);width:0.375em}.default input[type='checkbox']:indeterminate:before{background-color:#000;height:0.2em;left:0.24em;top:0.575em;width:0.8em}.switch input[type='checkbox']{display:inline-block;height:1.7em;min-width:3.2em;position:relative;width:3.2em}.switch input[type='checkbox']:before{background-color:#000;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);position:absolute;-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;transition:0.5s;width:1.2em}.switch input[type='checkbox']:checked:before{-webkit-transform:translateX(1.5em);-moz-transform:translateX(1.5em);-ms-transform:translateX(1.5em);transform:translateX(1.5em)}.switch input[type='checkbox']:indeterminate:before{transform:translateX(0.75em)}",v=class{render(){const{ariaDescribedBy:i}=r(this.state),a=!1===this.state._label;return t(e,null,t("kol-input",{class:{checkbox:!0,[this.state._variant]:!0,"hide-label":!!this.state._hideLabel},"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_required:this.state._required,_touched:this.state._touched},t("span",{slot:"label"},a?t("slot",null):this.state._label),t("div",{slot:"input"},t("kol-icon",{onClick:this.onChange,_ariaLabel:"",_icon:this.state._indeterminate?this.state._icon.indeterminate:this.state._checked?this.state._icon.checked:this.state._icon.unchecked}),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,checked:this.state._checked,disabled:this.state._disabled,id:this.state._id,indeterminate:this.state._indeterminate,name:this.state._name,required:this.state._required,tabIndex:this.state._tabIndex,type:"checkbox"},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})),t("kol-tooltip",{"aria-hidden":"true",hidden:a||!this.state._hideLabel,_align:this._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,d(this.host,this.ref)},this.onChange=t=>{var e;this._checked=!this._checked,this._indeterminate=!1;const i=this._checked?this.state._value:null;s(t),o("change",this.host,i),this.controller.setFormAssociatedValue(i),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,i)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._indeterminate=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type=void 0,this._value=void 0,this._variant=void 0,this.state={_checked:!1,_icon:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-add"},_id:`id-${n()}`,_indeterminate:!1,_label:!1,_value:null,_variant:"default"},this.controller=new y(this,"input-checkbox",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateChecked(t){this.controller.validateChecked(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)}validateIndeterminate(t){this.controller.validateIndeterminate(t)}validateLabel(t){this.controller.validateLabel(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(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.validateValue(t)}validateVariant(t){this.controller.validateVariant(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};v.style={default:k};export{v as kol_input_checkbox};

package/dist/kolibri/kol-input-checkbox.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["validateChecked","component","value","watchBoolean","validateIndeterminate","InputCheckboxController","InputCheckboxRadioController","constructor","name","host","super","this","setFormAssociatedCheckboxValue","_checked","setFormAssociatedValue","state","_value","validateIcon","watchValidator","isString","checked","indeterminate","unchecked","Set","validateType","devHint","validateVariant","validateValue","setState","componentWillLoad","_icon","_indeterminate","_variant","_type","defaultStyleCss","KolInputCheckbox","render","ariaDescribedBy","getRenderStates","hasExpertSlot","_label","h","Host","class","checkbox","_hideLabel","undefined","onKeyPress","onChange","tabIndex","_alert","_disabled","_error","_hint","_id","_required","_touched","slot","onClick","_ariaLabel","Object","assign","ref","catchRef","title","accessKey","_accessKey","length","join","disabled","id","_name","required","_tabIndex","type","controller","onFacade","hidden","_align","_tooltipAlign","hostRef","propagateFocus","event","stopPropagation","tryToDispatchKoliBriEvent","_a","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateLabel","validateName","validateOn","validateRequired","validateSyncValueBySelector","validateTabIndex","validateTouched"],"sources":["src/types/props/checked.ts","src/types/props/indeterminate.ts","src/components/input-checkbox/controller.ts","src/components/input-checkbox/style.css?tag=kol-input-checkbox&mode=default&encapsulation=shadow","src/components/input-checkbox/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type CheckedPropType = boolean;\n\n/**\n * Defines whether the checkbox is checked or not. Can be read and written.\n */\nexport type PropChecked = {\n\tchecked: CheckedPropType;\n};\n\n/* validator */\nexport const validateChecked = (component: Generic.Element.Component, value?: CheckedPropType): void => {\n\twatchBoolean(component, '_checked', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type IndeterminatePropType = boolean;\n\n/**\n * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n */\nexport type PropIndeterminate = {\n\tindeterminate: IndeterminatePropType;\n};\n\n/* validator */\nexport const validateIndeterminate = (component: Generic.Element.Component, value?: IndeterminatePropType): void => {\n\twatchBoolean(component, '_indeterminate', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { CheckedPropType, validateChecked } from '../../types/props/checked';\nimport { IndeterminatePropType, validateIndeterminate } from '../../types/props/indeterminate';\nimport { StencilUnknown } from '../../types/unknown';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { setState, watchValidator } from '../../utils/prop.validators';\nimport { isString } from '../../utils/validator';\nimport { InputCheckboxRadioController } from '../input-radio/controller';\nimport { InputCheckboxIcon, InputCheckboxVariant, Props, Watches } from './types';\n\nexport class InputCheckboxController extends InputCheckboxRadioController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly setFormAssociatedCheckboxValue = (value: StencilUnknown) => {\n\t\tif (this.component._checked) {\n\t\t\tthis.setFormAssociatedValue(value);\n\t\t} else {\n\t\t\tthis.setFormAssociatedValue(null);\n\t\t}\n\t};\n\n\tpublic validateChecked(value?: CheckedPropType): void {\n\t\tvalidateChecked(this.component, value);\n\t\tthis.setFormAssociatedCheckboxValue(this.component.state._value as StencilUnknown);\n\t}\n\n\tpublic validateIcon(value?: Stringified<InputCheckboxIcon>): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_icons',\n\t\t\t(value): boolean => {\n\t\t\t\treturn typeof value === 'object' && value !== null && (isString(value.checked, 1) || isString(value.indeterminate, 1) || isString(value.unchecked, 1));\n\t\t\t},\n\t\t\tnew Set(['InputCheckboxIcons']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateIndeterminate(value?: IndeterminatePropType): void {\n\t\tvalidateIndeterminate(this.component, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tdevHint(`The \"_type\" prop is deprecated. Use \"_variant\" instead.`);\n\t\tthis.validateVariant(value);\n\t}\n\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tsetState(this.component, '_value', value);\n\t\tthis.setFormAssociatedCheckboxValue(this.component.state._value as StencilUnknown);\n\t}\n\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\tif (value === 'checkbox') {\n\t\t\tdevHint(`[KolCheckbox] The \"_variant\" value 'checkbox' is deprecated. Use the new value 'default' instead.`);\n\t\t\tvalue = 'default';\n\t\t}\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_variant',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'button' || value === 'default' || value === 'switch'),\n\t\t\tnew Set(['String {button, default, switch}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateChecked(this.component._checked);\n\t\tthis.validateIcon(this.component._icon);\n\t\tthis.validateIndeterminate(this.component._indeterminate);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validateVariant(this.component._variant || this.component._type);\n\t}\n}\n","@import url(../input.css);\n@import url(common.css);\n@import url(button.css);\n@import url(checkbox.css);\n@import url(switch.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { AlignPropType } from '../../types/props/align';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { StencilUnknown } from '../../types/unknown';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputCheckboxController } from './controller';\nimport { ComponentApi, InputCheckboxIcon, InputCheckboxVariant, States } from './types';\nimport { CheckedPropType } from '../../types/props/checked';\nimport { IndeterminatePropType } from '../../types/props/indeterminate';\n\n/**\n * @slot - Die Beschriftung der Checkbox.\n */\n@Component({\n\ttag: 'kol-input-checkbox',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputCheckbox implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputCheckboxElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\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\tcheckbox: true,\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\tdata-role={this.state._variant === 'button' ? 'button' : undefined}\n\t\t\t\t\tonKeyPress={this.state._variant === 'button' ? this.onChange : undefined}\n\t\t\t\t\ttabIndex={this.state._variant === 'button' ? 0 : undefined}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t{/*  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<kol-icon\n\t\t\t\t\t\t\tonClick={this.onChange}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._indeterminate ? this.state._icon.indeterminate : this.state._checked ? this.state._icon.checked : this.state._icon.unchecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by checkbox?!\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tchecked={this.state._checked}\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tindeterminate={this.state._indeterminate}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\tonClick={undefined} // onClick is not needed since onChange already triggers the correct event\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_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: InputCheckboxController;\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 * Defines whether the checkbox is checked or not. Can be read and written.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _checked?: CheckedPropType = false;\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<InputCheckboxIcon>;\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 * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _indeterminate?: IndeterminatePropType;\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 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 * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\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 * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: AlignPropType = '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 an, welche Variante der Darstellung genutzt werden soll.\n\t *\n\t * @deprecated Verwende stattdessen das Attribute _variant.\n\t */\n\t@Prop() public _type?: InputCheckboxVariant;\n\n\t/**\n\t * Gibt den Schlüssel/Namen der Checkbox an. ({ [value]: [checked] })\n\t */\n\t@Prop() public _value!: Stringified<StencilUnknown>;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: InputCheckboxVariant; // TODO: = 'default'; in v2 setzen\n\n\t@State() public state: States = {\n\t\t_checked: false,\n\t\t_icon: {\n\t\t\tchecked: 'codicon codicon-check',\n\t\t\tindeterminate: 'codicon codicon-remove',\n\t\t\tunchecked: 'codicon codicon-add',\n\t\t},\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_indeterminate: false,\n\t\t_label: false, // ⚠ required\n\t\t_value: null, // ⚠ required\n\t\t_variant: 'default',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputCheckboxController(this, 'input-checkbox', 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('_checked')\n\tpublic validateChecked(value?: CheckedPropType): void {\n\t\tthis.controller.validateChecked(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<InputCheckboxIcon>): 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('_indeterminate')\n\tpublic validateIndeterminate(value?: IndeterminatePropType): void {\n\t\tthis.controller.validateIndeterminate(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('_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('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(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('_type')\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateVariant(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\tprivate onChange = (event: Event): void => {\n\t\tthis._checked = !this._checked;\n\t\tthis._indeterminate = false;\n\n\t\tconst value = this._checked ? this.state._value : null;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(value);\n\t\tthis.controller.setFormAssociatedCheckboxValue;\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, value);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateChecked","component","value","watchBoolean","validateIndeterminate","InputCheckboxController","InputCheckboxRadioController","constructor","name","host","super","this","setFormAssociatedCheckboxValue","_checked","setFormAssociatedValue","state","_value","validateIcon","watchValidator","isString","checked","indeterminate","unchecked","Set","validateType","devHint","validateVariant","validateValue","setState","componentWillLoad","_icon","_indeterminate","_variant","_type","defaultStyleCss","KolInputCheckbox","render","ariaDescribedBy","getRenderStates","hasExpertSlot","_label","h","Host","class","checkbox","_hideLabel","undefined","onKeyPress","onChange","tabIndex","_alert","_disabled","_error","_hint","_id","_required","_touched","slot","onClick","_ariaLabel","Object","assign","ref","catchRef","title","accessKey","_accessKey","length","join","disabled","id","_name","required","_tabIndex","type","controller","onFacade","hidden","_align","_tooltipAlign","hostRef","propagateFocus","event","stopPropagation","tryToDispatchKoliBriEvent","_a","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateLabel","validateName","validateOn","validateRequired","validateSyncValueBySelector","validateTabIndex","validateTouched"],"sources":["src/types/props/checked.ts","src/types/props/indeterminate.ts","src/components/input-checkbox/controller.ts","src/components/input-checkbox/style.css?tag=kol-input-checkbox&mode=default&encapsulation=shadow","src/components/input-checkbox/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type CheckedPropType = boolean;\n\n/**\n * Defines whether the checkbox is checked or not. Can be read and written.\n */\nexport type PropChecked = {\n\tchecked: CheckedPropType;\n};\n\n/* validator */\nexport const validateChecked = (component: Generic.Element.Component, value?: CheckedPropType): void => {\n\twatchBoolean(component, '_checked', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type IndeterminatePropType = boolean;\n\n/**\n * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n */\nexport type PropIndeterminate = {\n\tindeterminate: IndeterminatePropType;\n};\n\n/* validator */\nexport const validateIndeterminate = (component: Generic.Element.Component, value?: IndeterminatePropType): void => {\n\twatchBoolean(component, '_indeterminate', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { CheckedPropType, validateChecked } from '../../types/props/checked';\nimport { IndeterminatePropType, validateIndeterminate } from '../../types/props/indeterminate';\nimport { StencilUnknown } from '../../types/unknown';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { setState, watchValidator } from '../../utils/prop.validators';\nimport { isString } from '../../utils/validator';\nimport { InputCheckboxRadioController } from '../input-radio/controller';\nimport { InputCheckboxIcon, InputCheckboxVariant, Props, Watches } from './types';\n\nexport class InputCheckboxController extends InputCheckboxRadioController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly setFormAssociatedCheckboxValue = (value: StencilUnknown) => {\n\t\tif (this.component._checked) {\n\t\t\tthis.setFormAssociatedValue(value);\n\t\t} else {\n\t\t\tthis.setFormAssociatedValue(null);\n\t\t}\n\t};\n\n\tpublic validateChecked(value?: CheckedPropType): void {\n\t\tvalidateChecked(this.component, value);\n\t\tthis.setFormAssociatedCheckboxValue(this.component.state._value as StencilUnknown);\n\t}\n\n\tpublic validateIcon(value?: Stringified<InputCheckboxIcon>): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_icons',\n\t\t\t(value): boolean => {\n\t\t\t\treturn typeof value === 'object' && value !== null && (isString(value.checked, 1) || isString(value.indeterminate, 1) || isString(value.unchecked, 1));\n\t\t\t},\n\t\t\tnew Set(['InputCheckboxIcons']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateIndeterminate(value?: IndeterminatePropType): void {\n\t\tvalidateIndeterminate(this.component, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tdevHint(`The \"_type\" prop is deprecated. Use \"_variant\" instead.`);\n\t\tthis.validateVariant(value);\n\t}\n\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tsetState(this.component, '_value', value);\n\t\tthis.setFormAssociatedCheckboxValue(this.component.state._value as StencilUnknown);\n\t}\n\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\tif (value === 'checkbox') {\n\t\t\tdevHint(`[KolCheckbox] The \"_variant\" value 'checkbox' is deprecated. Use the new value 'default' instead.`);\n\t\t\tvalue = 'default';\n\t\t}\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_variant',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'button' || value === 'default' || value === 'switch'),\n\t\t\tnew Set(['String {button, default, switch}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateChecked(this.component._checked);\n\t\tthis.validateIcon(this.component._icon);\n\t\tthis.validateIndeterminate(this.component._indeterminate);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validateVariant(this.component._variant || this.component._type);\n\t}\n}\n","@import url(../input.css);\n@import url(common.css);\n@import url(button.css);\n@import url(checkbox.css);\n@import url(switch.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { StencilUnknown } from '../../types/unknown';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputCheckboxController } from './controller';\nimport { API, InputCheckboxIcon, InputCheckboxVariant, States } from './types';\nimport { CheckedPropType } from '../../types/props/checked';\nimport { IndeterminatePropType } from '../../types/props/indeterminate';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { IdPropType } from '../../types/props/id';\nimport { NamePropType } from '../../types/props/name';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\n\n/**\n * @slot - Die Beschriftung der Checkbox.\n */\n@Component({\n\ttag: 'kol-input-checkbox',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputCheckbox implements API {\n\t@Element() private readonly host?: HTMLKolInputCheckboxElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\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\tcheckbox: true,\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\tdata-role={this.state._variant === 'button' ? 'button' : undefined}\n\t\t\t\t\tonKeyPress={this.state._variant === 'button' ? this.onChange : undefined}\n\t\t\t\t\ttabIndex={this.state._variant === 'button' ? 0 : undefined}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t{/*  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<kol-icon\n\t\t\t\t\t\t\tonClick={this.onChange}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._indeterminate ? this.state._icon.indeterminate : this.state._checked ? this.state._icon.checked : this.state._icon.unchecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by checkbox?!\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tchecked={this.state._checked}\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tindeterminate={this.state._indeterminate}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\tonClick={undefined} // onClick is not needed since onChange already triggers the correct event\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_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: InputCheckboxController;\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 * Defines whether the checkbox is checked or not. Can be read and written.\n\t * TODO: Change type back to `CheckedPropType` after Stencil#4663 has been resolved\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _checked?: boolean = false;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved\n\t */\n\t@Prop() public _disabled?: boolean;\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 * Hides the label and shows the description in a Tooltip instead.\n\t * TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\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 * Defines the icon classnames.\n\t */\n\t@Prop() public _icon?: Stringified<InputCheckboxIcon>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n\t * TODO: Change type back to `IndeterminatePropType` after Stencil#4663 has been resolved\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _indeterminate?: boolean;\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 * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Makes the input element required.\n\t * TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved\n\t */\n\t@Prop() public _required?: boolean;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * 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 * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t *\n\t * @deprecated Verwende stattdessen das Attribute _variant.\n\t */\n\t@Prop() public _type?: InputCheckboxVariant;\n\n\t/**\n\t * Gibt den Schlüssel/Namen der Checkbox an. ({ [value]: [checked] })\n\t */\n\t@Prop() public _value!: Stringified<StencilUnknown>;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: InputCheckboxVariant; // TODO: = 'default'; in v2 setzen\n\n\t@State() public state: States = {\n\t\t_checked: false,\n\t\t_icon: {\n\t\t\tchecked: 'codicon codicon-check',\n\t\t\tindeterminate: 'codicon codicon-remove',\n\t\t\tunchecked: 'codicon codicon-add',\n\t\t},\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_indeterminate: false,\n\t\t_label: false, // ⚠ required\n\t\t_value: null, // ⚠ required\n\t\t_variant: 'default',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputCheckboxController(this, 'input-checkbox', 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('_checked')\n\tpublic validateChecked(value?: CheckedPropType): void {\n\t\tthis.controller.validateChecked(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<InputCheckboxIcon>): 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('_indeterminate')\n\tpublic validateIndeterminate(value?: IndeterminatePropType): void {\n\t\tthis.controller.validateIndeterminate(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('_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('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): 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('_type')\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateVariant(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\tprivate onChange = (event: Event): void => {\n\t\tthis._checked = !this._checked;\n\t\tthis._indeterminate = false;\n\n\t\tconst value = this._checked ? this.state._value : null;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(value);\n\t\tthis.controller.setFormAssociatedCheckboxValue;\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, value);\n\t\t}\n\t};\n}\n"],"mappings":";;;4eAeO,MAAMA,EAAkB,CAACC,EAAsCC,KACrEC,EAAaF,EAAW,WAAYC,EAAM,ECDpC,MAAME,EAAwB,CAACH,EAAsCC,KAC3EC,EAAaF,EAAW,iBAAkBC,EAAM,E,MCJpCG,UAAgCC,EAG5C,WAAAC,CAAmBN,EAA8CO,EAAcC,GAC9EC,MAAMT,EAAWO,EAAMC,GAIRE,KAAAC,+BAAkCV,IACjD,GAAIS,KAAKV,UAAUY,SAAU,CAC5BF,KAAKG,uBAAuBZ,E,KACtB,CACNS,KAAKG,uBAAuB,K,GAP7BH,KAAKV,UAAYA,C,CAWX,eAAAD,CAAgBE,GACtBF,EAAgBW,KAAKV,UAAWC,GAChCS,KAAKC,+BAA+BD,KAAKV,UAAUc,MAAMC,O,CAGnD,YAAAC,CAAaf,GACnBgB,EACCP,KAAKV,UACL,UACCC,UACcA,IAAU,UAAYA,IAAU,OAASiB,EAASjB,EAAMkB,QAAS,IAAMD,EAASjB,EAAMmB,cAAe,IAAMF,EAASjB,EAAMoB,UAAW,KAEpJ,IAAIC,IAAI,CAAC,uBACTrB,E,CAIK,qBAAAE,CAAsBF,GAC5BE,EAAsBO,KAAKV,UAAWC,E,CAOhC,YAAAsB,CAAatB,GACnBuB,EAAQ,2DACRd,KAAKe,gBAAgBxB,E,CAGf,aAAAyB,CAAczB,GACpB0B,EAASjB,KAAKV,UAAW,SAAUC,GACnCS,KAAKC,+BAA+BD,KAAKV,UAAUc,MAAMC,O,CAGnD,eAAAU,CAAgBxB,GACtB,GAAIA,IAAU,WAAY,CACzBuB,EAAQ,qGACRvB,EAAQ,S,CAETgB,EACCP,KAAKV,UACL,YACCC,UAA0BA,IAAU,WAAaA,IAAU,UAAYA,IAAU,WAAaA,IAAU,WACzG,IAAIqB,IAAI,CAAC,qCACTrB,E,CAIK,iBAAA2B,GACNnB,MAAMmB,oBACNlB,KAAKX,gBAAgBW,KAAKV,UAAUY,UACpCF,KAAKM,aAAaN,KAAKV,UAAU6B,OACjCnB,KAAKP,sBAAsBO,KAAKV,UAAU8B,gBAC1CpB,KAAKgB,cAAchB,KAAKV,UAAUe,QAClCL,KAAKe,gBAAgBf,KAAKV,UAAU+B,UAAYrB,KAAKV,UAAUgC,M,ECnFjE,MAAMC,EAAkB,66G,MC6BXC,EAAgB,MASrB,MAAAC,GACN,MAAMC,gBAAEA,GAAoBC,EAAgB3B,KAAKI,OACjD,MAAMwB,EAAgB5B,KAAKI,MAAMyB,SAAW,MAE5C,OACCC,EAACC,EAAI,KACJD,EAAA,aACCE,MAAO,CACNC,SAAU,KACV,CAACjC,KAAKI,MAAMiB,UAAW,KACvB,eAAgBrB,KAAKI,MAAM8B,YAC3B,YACUlC,KAAKI,MAAMiB,WAAa,SAAW,SAAWc,UACzDC,WAAYpC,KAAKI,MAAMiB,WAAa,SAAWrB,KAAKqC,SAAWF,UAC/DG,SAAUtC,KAAKI,MAAMiB,WAAa,SAAW,EAAIc,UACjDI,OAAQvC,KAAKI,MAAMmC,OACnBC,UAAWxC,KAAKI,MAAMoC,UACtBC,OAAQzC,KAAKI,MAAMqC,OACnBP,WAAYlC,KAAKI,MAAM8B,WACvBQ,MAAO1C,KAAKI,MAAMsC,MAClBC,IAAK3C,KAAKI,MAAMuC,IAChBC,UAAW5C,KAAKI,MAAMwC,UACtBC,SAAU7C,KAAKI,MAAMyC,UAGrBf,EAAA,QAAMgB,KAAK,SAASlB,EAAgBE,EAAA,aAAgB9B,KAAKI,MAAMyB,QAC/DC,EAAA,OAAKgB,KAAK,SACThB,EAAA,YACCiB,QAAS/C,KAAKqC,SACdW,WAAW,GACX7B,MAAOnB,KAAKI,MAAMgB,eAAiBpB,KAAKI,MAAMe,MAAMT,cAAgBV,KAAKI,MAAMF,SAAWF,KAAKI,MAAMe,MAAMV,QAAUT,KAAKI,MAAMe,MAAMR,YAEvImB,EAAA,QAAAmB,OAAAC,OAAA,CACCC,IAAKnD,KAAKoD,SACVC,MAAM,GACNC,UAAWtD,KAAKI,MAAMmD,WAAU,mBACd7B,EAAgB8B,OAAS,EAAI9B,EAAgB+B,KAAK,KAAOtB,UAAS,aACxEnC,KAAKI,MAAM8B,mBAAqBlC,KAAKI,MAAMyB,SAAW,SAAW7B,KAAKI,MAAMyB,OAASM,UACjG1B,QAAST,KAAKI,MAAMF,SACpBwD,SAAU1D,KAAKI,MAAMoC,UACrBmB,GAAI3D,KAAKI,MAAMuC,IACfjC,cAAeV,KAAKI,MAAMgB,eAC1BvB,KAAMG,KAAKI,MAAMwD,MACjBC,SAAU7D,KAAKI,MAAMwC,UACrBN,SAAUtC,KAAKI,MAAM0D,UACrBC,KAAK,YACD/D,KAAKgE,WAAWC,SAAQ,CAC5B5B,SAAUrC,KAAKqC,SACfU,QAASZ,aAEVL,EAAA,6BAKa,OACZoC,OAAQtC,IAAkB5B,KAAKI,MAAM8B,WACrCiC,OAAQnE,KAAKoE,cACbvC,cAAe7B,KAAKI,MAAMyB,SAAW,SAAW7B,KAAKI,MAAMyB,OAAS,O,CA0I1E,WAAAjC,CAAAyE,G,UAzMiBrE,KAAAoD,SAAYD,IAC5BnD,KAAKmD,IAAMA,EACXmB,EAAetE,KAAKF,KAAME,KAAKmD,IAAI,EAqT5BnD,KAAAqC,SAAYkC,I,MACnBvE,KAAKE,UAAYF,KAAKE,SACtBF,KAAKoB,eAAiB,MAEtB,MAAM7B,EAAQS,KAAKE,SAAWF,KAAKI,MAAMC,OAAS,KAGlDmE,EAAgBD,GAChBE,EAA0B,SAAUzE,KAAKF,KAAMP,GAG/CS,KAAKgE,WAAW7D,uBAAuBZ,GAIvC,WAAWmF,EAAA1E,KAAKI,MAAMuE,OAAG,MAAAD,SAAA,SAAAA,EAAErC,YAAa,WAAY,CACnDrC,KAAKI,MAAMuE,IAAItC,SAASkC,EAAOhF,E,yCAtPiC,K,cAME,M,oFAsBpC,G,6OAqDsB,M,cAMc,M,8EAmBpC,CAC/BW,SAAU,MACViB,MAAO,CACNV,QAAS,wBACTC,cAAe,yBACfC,UAAW,uBAEZgC,IAAK,MAAMiC,MACXxD,eAAgB,MAChBS,OAAQ,MACRxB,OAAQ,KACRgB,SAAU,WAIVrB,KAAKgE,WAAa,IAAItE,EAAwBM,KAAM,iBAAkBA,KAAKF,K,CAIrE,iBAAA+E,CAAkBtF,GACxBS,KAAKgE,WAAWa,kBAAkBtF,E,CAI5B,aAAAuF,CAAcvF,GACpBS,KAAKgE,WAAWc,cAAcvF,E,CAIxB,eAAAF,CAAgBE,GACtBS,KAAKgE,WAAW3E,gBAAgBE,E,CAI1B,gBAAAwF,CAAiBxF,GACvBS,KAAKgE,WAAWe,iBAAiBxF,E,CAI3B,aAAAyF,CAAczF,GACpBS,KAAKgE,WAAWgB,cAAczF,E,CAIxB,iBAAA0F,CAAkB1F,GACxBS,KAAKgE,WAAWiB,kBAAkB1F,E,CAI5B,YAAA2F,CAAa3F,GACnBS,KAAKgE,WAAWkB,aAAa3F,E,CAIvB,YAAAe,CAAaf,GACnBS,KAAKgE,WAAW1D,aAAaf,E,CAIvB,UAAA4F,CAAW5F,GACjBS,KAAKgE,WAAWmB,WAAW5F,E,CAIrB,qBAAAE,CAAsBF,GAC5BS,KAAKgE,WAAWvE,sBAAsBF,E,CAIhC,aAAA6F,CAAc7F,GACpBS,KAAKgE,WAAWoB,cAAc7F,E,CAIxB,YAAA8F,CAAa9F,GACnBS,KAAKgE,WAAWqB,aAAa9F,E,CAIvB,UAAA+F,CAAW/F,GACjBS,KAAKgE,WAAWsB,WAAW/F,E,CAIrB,gBAAAgG,CAAiBhG,GACvBS,KAAKgE,WAAWuB,iBAAiBhG,E,CAI3B,2BAAAiG,CAA4BjG,GAClCS,KAAKgE,WAAWwB,4BAA4BjG,E,CAItC,gBAAAkG,CAAiBlG,GACvBS,KAAKgE,WAAWyB,iBAAiBlG,E,CAI3B,eAAAmG,CAAgBnG,GACtBS,KAAKgE,WAAW0B,gBAAgBnG,E,CAI1B,YAAAsB,CAAatB,GACnBS,KAAKgE,WAAWnD,aAAatB,E,CAIvB,aAAAyB,CAAczB,GACpBS,KAAKgE,WAAWhD,cAAczB,E,CAIxB,eAAAwB,CAAgBxB,GACtBS,KAAKgE,WAAWjD,gBAAgBxB,E,CAG1B,iBAAA2B,GACNlB,KAAKuC,OAASvC,KAAKuC,SAAW,KAC9BvC,KAAK6C,SAAW7C,KAAK6C,WAAa,KAClC7C,KAAKgE,WAAW9C,mB"}

package/dist/kolibri/kol-input-color.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as e,g as s}from"./index-5ab2ea42.js";import{n as a}from"./dev.utils-2f404ce5.js";import{a as n}from"./reuse-c2156413.js";import{g as o}from"./controller-108aa205.js";import{v as l}from"./suggestions-3df3e5fd.js";import{w as d,d as r}from"./prop.validators-286b41b1.js";import{I as h}from"./controller-icon-e6f72083.js";import"./label-8596593d.js";import"./a11y.tipps-010cc7bb.js";import"./associated.controller-9d8da408.js";import"./tab-index-a7766f42.js";import"./index-37b5cbcf.js";import"./icon-a0bacdc8.js";class p extends h{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){d(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(){}validateSuggestions(t){l(this.component,t)}validateValue(t){r(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 u=":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}",c=class{render(){const{ariaDescribedBy:e}=o(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=!1===this.state._label;return t(i,null,t("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()}},t("span",{slot:"label"},s?t("slot",null):this.state._label),t("div",{slot:"input"},t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,name:this.state._name,slot:"input",spellcheck:"false",type:"color",value:this.state._value},this.controller.onFacade)),t("kol-tooltip",{"aria-hidden":"true",hidden:s||!this.state._hideLabel,_align:this._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,n(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-${a()}`,_label:!1,_suggestions:[]},this.controller=new p(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 s(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"]}}};c.style={default:u};export{c as kol_input_color};
+import{h as t,H as i,r as e,g as s}from"./index-5ab2ea42.js";import{n as a}from"./dev.utils-38b5f4df.js";import{a as n}from"./reuse-c2156413.js";import{g as o}from"./controller-db9c89e4.js";import{v as l}from"./suggestions-17851efa.js";import{w as d,d as r}from"./prop.validators-f76b82ff.js";import{I as h}from"./controller-icon-9b323870.js";import"./label-07fc28f5.js";import"./a11y.tipps-d11c3322.js";import"./associated.controller-d175340e.js";import"./tab-index-96981cc3.js";import"./index-37b5cbcf.js";import"./icon-8fc8202c.js";class p extends h{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){d(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(){}validateSuggestions(t){l(this.component,t)}validateValue(t){r(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 u=":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}",c=class{render(){const{ariaDescribedBy:e}=o(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=!1===this.state._label;return t(i,null,t("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()}},t("span",{slot:"label"},s?t("slot",null):this.state._label),t("div",{slot:"input"},t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,name:this.state._name,slot:"input",spellcheck:"false",type:"color",value:this.state._value},this.controller.onFacade)),t("kol-tooltip",{"aria-hidden":"true",hidden:s||!this.state._hideLabel,_align:this._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,n(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-${a()}`,_label:!1,_suggestions:[]},this.controller=new p(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 s(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"]}}};c.style={default:u};export{c as kol_input_color};

package/dist/kolibri/kol-input-color.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["InputColorController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","validateSuggestions","validateValue","watchString","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_suggestions","_list","defaultStyleCss","KolInputColor","render","ariaDescribedBy","getRenderStates","hasSuggestions","Array","isArray","length","hasExpertSlot","_label","h","Host","class","color","_hideLabel","_disabled","_error","_hint","_icon","_id","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","id","list","_name","spellcheck","type","controller","onFacade","hidden","_align","_tooltipAlign","hostRef","propagateFocus","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateName","validateOn","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"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 { AlignPropType } 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-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\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}\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_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 * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: AlignPropType = '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"],"mappings":"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"}
+{"version":3,"names":["InputColorController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","validateSuggestions","validateValue","watchString","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_suggestions","_list","defaultStyleCss","KolInputColor","render","ariaDescribedBy","getRenderStates","hasSuggestions","Array","isArray","length","hasExpertSlot","_label","h","Host","class","color","_hideLabel","_disabled","_error","_hint","_icon","_id","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","id","list","_name","spellcheck","type","controller","onFacade","hidden","_align","_tooltipAlign","hostRef","propagateFocus","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateName","validateOn","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"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 { Props as ButtonProps } from '../button/types';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\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 { API, States } from './types';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { IdPropType } from '../../types/props/id';\nimport { NamePropType } from '../../types/props/name';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\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 API {\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-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\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}\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_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 * Makes the element not focusable and ignore all events.\n\t * TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved\n\t */\n\t@Prop() public _disabled?: boolean;\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 * Tells the element to hide the label.\n\t * TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\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 * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\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 * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für 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?: SyncValueBySelectorPropType;\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 * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved\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?: SyncValueBySelectorPropType): 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"],"mappings":"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"}

package/dist/kolibri/kol-input-date.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as s}from"./index-5ab2ea42.js";import{n as a}from"./dev.utils-2f404ce5.js";import{a as n}from"./reuse-c2156413.js";import{p as l}from"./controller-3213f6ba.js";import{g as d}from"./controller-108aa205.js";import{a as o,w as h,s as r,e as u}from"./prop.validators-286b41b1.js";import{v as p}from"./suggestions-3df3e5fd.js";import{I as c}from"./controller-icon-e6f72083.js";import"./a11y.tipps-010cc7bb.js";import"./label-8596593d.js";import"./associated.controller-9d8da408.js";import"./tab-index-a7766f42.js";import"./index-37b5cbcf.js";import"./icon-a0bacdc8.js";const f=(t,e)=>{o(t,"_readOnly",e)};class m extends c{constructor(t,e,i){super(t,e,i),this.validateIso8601=(t,e,i)=>h(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&&i&&i(t)}}}),this.component=t}validateAutoComplete(t){h(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(){}validateSuggestions(t){p(this.component,t)}tryParseToString(t,e){const i=null!=t?t:e;if("string"==typeof i)return i;if("object"==typeof i&&i instanceof Date)switch(this.component._type){case"date":return`${i.getFullYear()}-${i.getMonth()+1}-${i.getDate()}`;case"datetime-local":return`${i.getFullYear()}-${i.getMonth()+1}-${i.getDate()}T${i.getHours()}:${i.getMinutes()}:${i.getSeconds()}`;case"month":return`${i.getFullYear()}-${i.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?`${i.getHours()}:${i.getMinutes()}`:`${i.getHours()}:${i.getMinutes()}:${i.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 m.isoDateRegex.test(t);case"datetime-local":return m.isoLocalDateTimeRegex.test(t);case"month":return m.isoMonthRegex.test(t);case"time":return m.isoTimeRegex.test(t);case"week":return m.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){h(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?m.DEFAULT_MAX_DATE:void 0))}validateMin(t){h(this.component,"_min",(t=>void 0===t||null!==t&&this.validateDateString(t)),new Set(["Iso8601","Date"]),this.tryParseToString(t))}validateOn(t){r(this.component,"_on",Object.assign(Object.assign({},t),{onChange:(e,i)=>{!!i!=!!this.component._value&&(this.component._value=i),(null==t?void 0:t.onChange)&&t.onChange(e,i)}}))}validateReadOnly(t){f(this.component,t)}validateRequired(t){o(this.component,"_required",t)}validateStep(t){u(this.component,"_step",t)}validateType(t){h(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)}}m.isoDateRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])/,m.isoLocalDateTimeRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])[T ][0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,m.isoMonthRegex=/^\d{4}-([0]\d|1[0-2])/,m.isoTimeRegex=/^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,m.isoWeekRegex=/^\d{4}-W(?:[0-4]\d|5[0-3])$/,m.DEFAULT_MAX_DATE=new Date(9999,11,31,23,59,59);const v=":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}",y=class{render(){const{ariaDescribedBy:i}=d(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=!1===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("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},t("span",{slot:"label"},s?t("slot",null):this.state._label),t("div",{slot:"input"},t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${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})),t("kol-tooltip",{"aria-hidden":"true",hidden:s||!this.state._hideLabel,_align:this._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,n(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?l({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-${a()}`,_label:!1,_suggestions:[],_type:"datetime-local"},this.controller=new m(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 s(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"]}}};y.style={default:v};export{y as kol_input_date};
+import{h as t,H as e,r as i,g as s}from"./index-5ab2ea42.js";import{n as a}from"./dev.utils-38b5f4df.js";import{a as n}from"./reuse-c2156413.js";import{p as l}from"./controller-7ece1f6d.js";import{g as d}from"./controller-db9c89e4.js";import{a as o,w as h,s as r,e as u}from"./prop.validators-f76b82ff.js";import{v as p}from"./suggestions-17851efa.js";import{I as c}from"./controller-icon-9b323870.js";import"./a11y.tipps-d11c3322.js";import"./label-07fc28f5.js";import"./associated.controller-d175340e.js";import"./tab-index-96981cc3.js";import"./index-37b5cbcf.js";import"./icon-8fc8202c.js";const f=(t,e)=>{o(t,"_readOnly",e)};class m extends c{constructor(t,e,i){super(t,e,i),this.validateIso8601=(t,e,i)=>h(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&&i&&i(t)}}}),this.component=t}validateAutoComplete(t){h(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(){}validateSuggestions(t){p(this.component,t)}tryParseToString(t,e){const i=null!=t?t:e;if("string"==typeof i)return i;if("object"==typeof i&&i instanceof Date)switch(this.component._type){case"date":return`${i.getFullYear()}-${i.getMonth()+1}-${i.getDate()}`;case"datetime-local":return`${i.getFullYear()}-${i.getMonth()+1}-${i.getDate()}T${i.getHours()}:${i.getMinutes()}:${i.getSeconds()}`;case"month":return`${i.getFullYear()}-${i.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?`${i.getHours()}:${i.getMinutes()}`:`${i.getHours()}:${i.getMinutes()}:${i.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 m.isoDateRegex.test(t);case"datetime-local":return m.isoLocalDateTimeRegex.test(t);case"month":return m.isoMonthRegex.test(t);case"time":return m.isoTimeRegex.test(t);case"week":return m.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){h(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?m.DEFAULT_MAX_DATE:void 0))}validateMin(t){h(this.component,"_min",(t=>void 0===t||null!==t&&this.validateDateString(t)),new Set(["Iso8601","Date"]),this.tryParseToString(t))}validateOn(t){r(this.component,"_on",Object.assign(Object.assign({},t),{onChange:(e,i)=>{!!i!=!!this.component._value&&(this.component._value=i),(null==t?void 0:t.onChange)&&t.onChange(e,i)}}))}validateReadOnly(t){f(this.component,t)}validateRequired(t){o(this.component,"_required",t)}validateStep(t){u(this.component,"_step",t)}validateType(t){h(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)}}m.isoDateRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])/,m.isoLocalDateTimeRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])[T ][0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,m.isoMonthRegex=/^\d{4}-([0]\d|1[0-2])/,m.isoTimeRegex=/^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,m.isoWeekRegex=/^\d{4}-W(?:[0-4]\d|5[0-3])$/,m.DEFAULT_MAX_DATE=new Date(9999,11,31,23,59,59);const v=":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}",y=class{render(){const{ariaDescribedBy:i}=d(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=!1===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("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},t("span",{slot:"label"},s?t("slot",null):this.state._label),t("div",{slot:"input"},t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${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})),t("kol-tooltip",{"aria-hidden":"true",hidden:s||!this.state._hideLabel,_align:this._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,n(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?l({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-${a()}`,_label:!1,_suggestions:[],_type:"datetime-local"},this.controller=new m(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 s(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"]}}};y.style={default:v};export{y as kol_input_date};