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

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","createProgressSVG","state","_type","h","width","viewBox","xmlns","fill","stroke","cx","cy","r","class","Math","round","_value","_max","x1","y1","x2","y2","KolProcess","_unit","_liveValue","render","Host","this","max","value","validateMax","watchNumber","required","validateType","Object","assign","validateUnit","watchString","validateValue","componentWillLoad","interval","setInterval","disconnectedCallback","clearInterval"],"sources":["./src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","./src/components/progress/component.tsx"],"sourcesContent":["@import '../style.css';\n\nprogress,\nspan {\n\tdisplay: block;\n\theight: 0px;\n\toverflow: hidden;\n\twidth: 0px;\n}\n\n.bar,\n.cycle {\n\ttransition: all 0.5s ease-in-out 0s;\n\ttransition-property: all;\n\ttransition-duration: 0.5s;\n\ttransition-timing-function: ease-in-out;\n\ttransition-delay: 0.25s;\n}\n\n.cycle {\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriProgressType } from '../../types/progress';\nimport { watchNumber, watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tmax: number;\n\tvalue: number;\n};\ntype OptionalProps = {\n\ttype: KoliBriProgressType;\n\tunit: string;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & {\n\tliveValue: number;\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tswitch (state._type) {\n\t\tcase 'cycle':\n\t\t\treturn (\n\t\t\t\t<svg width=\"100\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle fill=\"none\" stroke=\"#efefef\" cx=\"6px\" cy=\"6px\" r=\"5px\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"cycle\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * 32)}px 32px`}\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\tcx=\"6px\"\n\t\t\t\t\t\tcy=\"6px\"\n\t\t\t\t\t\tr=\"5px\"\n\t\t\t\t\t></circle>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<svg width=\"100\" viewBox=\"0 0 24 2\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<line stroke-width=\"2\" x1=\"1\" stroke-linecap=\"round\" y1=\"1\" x2=\"23\" y2=\"1\" fill=\"#efefef\" stroke=\"#efefef\"></line>\n\t\t\t\t\t<line\n\t\t\t\t\t\tclass=\"bar\"\n\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\tx1=\"1\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\ty1=\"1\"\n\t\t\t\t\t\tx2={`${1 + Math.round((state._value / state._max) * 22)}`}\n\t\t\t\t\t\ty2=\"1\"\n\t\t\t\t\t\tfill=\"#0075ff\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t></line>\n\t\t\t\t</svg>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate interval?: NodeJS.Timer;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\">\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t */\n\t@Prop() public _type?: KoliBriProgressType;\n\n\t/**\n\t * Gibt die Einheit der Fortschrittswerte an.\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Gibt an, wie weit die Anzeige fortgeschritten ist.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_type: 'bar',\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_liveValue: 0,\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressType): void {\n\t\tswitch (value) {\n\t\t\tcase 'cycle':\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tvalue = 'bar';\n\t\t}\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_type: value,\n\t\t};\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateMax(this._max);\n\t\tthis.validateType(this._type);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval as unknown as number);\n\t}\n}\n"],"mappings":";;;wOAAA,MAAMA,EAAkB,wjCC0BxB,MAAMC,EAAqBC,IAC1B,OAAQA,EAAMC,OACb,IAAK,QACJ,OACCC,EAAA,OAAKC,MAAM,MAAMC,QAAQ,YAAYC,MAAM,8BAC1CH,EAAA,UAAQI,KAAK,OAAOC,OAAO,UAAUC,GAAG,MAAMC,GAAG,MAAMC,EAAE,QACzDR,EAAA,UACCS,MAAM,QAAO,iBACE,QAAO,mBACJ,GAAGC,KAAKC,MAAOb,EAAMc,OAASd,EAAMe,KAAQ,aAC9DT,KAAK,OACLC,OAAO,UACPC,GAAG,MACHC,GAAG,MACHC,EAAE,SAIN,QACC,OACCR,EAAA,OAAKC,MAAM,MAAMC,QAAQ,WAAWC,MAAM,8BACzCH,EAAA,uBAAmB,IAAIc,GAAG,IAAG,iBAAgB,QAAQC,GAAG,IAAIC,GAAG,KAAKC,GAAG,IAAIb,KAAK,UAAUC,OAAO,YACjGL,EAAA,QACCS,MAAM,MAAK,eACE,IACbK,GAAG,IAAG,iBACS,QACfC,GAAG,IACHC,GAAI,GAAG,EAAIN,KAAKC,MAAOb,EAAMc,OAASd,EAAMe,KAAQ,MACpDI,GAAG,IACHb,KAAK,UACLC,OAAO,a,QAcAa,EAAU,M,6EA6BU,I,iCAUA,CAC/BL,KAAM,IACNd,MAAO,MACPoB,MAAO,IACPP,OAAQ,EACRQ,WAAY,E,CAxCNC,SACN,OACCrB,EAACsB,EAAI,KACHzB,EAAkB0B,KAAKzB,OACxBE,EAAA,wBAAqBuB,KAAKzB,MAAMc,OAASW,KAAKzB,MAAMe,KAAO,OAAS,QAASW,IAAKD,KAAKzB,MAAMe,KAAMY,MAAOF,KAAKzB,MAAMc,SACrHZ,EAAA,oBAAgB,SAAQ,gBAAe,iBACrCuB,KAAKzB,MAAMsB,WAAU,QAAOG,KAAKzB,MAAMe,KAAI,IAAGU,KAAKzB,MAAMqB,O,CAyCvDO,YAAYD,GAClB,UAAWA,IAAU,SAAU,CAC9BA,EAAQ,G,CAETE,EAAYJ,KAAM,OAAQE,EAAO,CAChCG,SAAU,M,CAQLC,aAAaJ,GACnB,OAAQA,GACP,IAAK,QACJ,MACD,QACCA,EAAQ,MAEVF,KAAKzB,MAAKgC,OAAAC,OAAAD,OAAAC,OAAA,GACNR,KAAKzB,OAAK,CACbC,MAAO0B,G,CAQFO,aAAaP,GACnBQ,EAAYV,KAAM,QAASE,E,CAOrBS,cAAcT,GACpB,UAAWA,IAAU,SAAU,CAC9BA,EAAQ,C,CAETE,EAAYJ,KAAM,SAAUE,EAAO,CAElCG,SAAU,M,CAOLO,oBACNZ,KAAKG,YAAYH,KAAKV,MACtBU,KAAKM,aAAaN,KAAKxB,OACvBwB,KAAKS,aAAaT,KAAKJ,OACvBI,KAAKW,cAAcX,KAAKX,QAExBW,KAAKa,SAAWC,aAAY,KAC3B,GAAId,KAAKzB,MAAMsB,aAAeG,KAAKzB,MAAMc,OAAQ,CAChDW,KAAKzB,MAAKgC,OAAAC,OAAAD,OAAAC,OAAA,GACNR,KAAKzB,OAAK,CACbsB,WAAYG,KAAKzB,MAAMc,Q,IAGvB,I,CAGG0B,uBACNC,cAAchB,KAAKa,S"}
+{"version":3,"names":["defaultStyleCss","createProgressSVG","state","_type","h","width","viewBox","xmlns","fill","stroke","cx","cy","r","class","Math","round","_value","_max","x1","y1","x2","y2","KolProcess","_unit","_liveValue","render","Host","this","max","value","validateMax","watchNumber","required","validateType","Object","assign","validateUnit","watchString","validateValue","componentWillLoad","interval","setInterval","disconnectedCallback","clearInterval"],"sources":["./src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","./src/components/progress/component.tsx"],"sourcesContent":["@import '../style.css';\n\nprogress,\nspan {\n\tdisplay: block;\n\theight: 0px;\n\toverflow: hidden;\n\twidth: 0px;\n}\n\n.bar,\n.cycle {\n\ttransition: all 0.5s ease-in-out 0s;\n\ttransition-property: all;\n\ttransition-duration: 0.5s;\n\ttransition-timing-function: ease-in-out;\n\ttransition-delay: 0.25s;\n}\n\n.cycle {\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriProgressType } from '../../types/progress';\nimport { watchNumber, watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tmax: number;\n\tvalue: number;\n};\ntype OptionalProps = {\n\ttype: KoliBriProgressType;\n\tunit: string;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & {\n\tliveValue: number;\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tswitch (state._type) {\n\t\tcase 'cycle':\n\t\t\treturn (\n\t\t\t\t<svg width=\"100\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle fill=\"none\" stroke=\"#efefef\" cx=\"6px\" cy=\"6px\" r=\"5px\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"cycle\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * 32)}px 32px`}\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\tcx=\"6px\"\n\t\t\t\t\t\tcy=\"6px\"\n\t\t\t\t\t\tr=\"5px\"\n\t\t\t\t\t></circle>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<svg width=\"100\" viewBox=\"0 0 24 2\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<line stroke-width=\"2\" x1=\"1\" stroke-linecap=\"round\" y1=\"1\" x2=\"23\" y2=\"1\" fill=\"#efefef\" stroke=\"#efefef\"></line>\n\t\t\t\t\t<line\n\t\t\t\t\t\tclass=\"bar\"\n\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\tx1=\"1\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\ty1=\"1\"\n\t\t\t\t\t\tx2={`${1 + Math.round((state._value / state._max) * 22)}`}\n\t\t\t\t\t\ty2=\"1\"\n\t\t\t\t\t\tfill=\"#0075ff\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t></line>\n\t\t\t\t</svg>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate interval?: NodeJS.Timer;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\">\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t */\n\t@Prop() public _type?: KoliBriProgressType;\n\n\t/**\n\t * Gibt die Einheit der Fortschrittswerte an.\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Gibt an, wie weit die Anzeige fortgeschritten ist.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_type: 'bar',\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_liveValue: 0,\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressType): void {\n\t\tswitch (value) {\n\t\t\tcase 'cycle':\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tvalue = 'bar';\n\t\t}\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_type: value,\n\t\t};\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateMax(this._max);\n\t\tthis.validateType(this._type);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval as unknown as number);\n\t}\n}\n"],"mappings":";;;wOAAA,MAAMA,EAAkB,8oCC0BxB,MAAMC,EAAqBC,IAC1B,OAAQA,EAAMC,OACb,IAAK,QACJ,OACCC,EAAA,OAAKC,MAAM,MAAMC,QAAQ,YAAYC,MAAM,8BAC1CH,EAAA,UAAQI,KAAK,OAAOC,OAAO,UAAUC,GAAG,MAAMC,GAAG,MAAMC,EAAE,QACzDR,EAAA,UACCS,MAAM,QAAO,iBACE,QAAO,mBACJ,GAAGC,KAAKC,MAAOb,EAAMc,OAASd,EAAMe,KAAQ,aAC9DT,KAAK,OACLC,OAAO,UACPC,GAAG,MACHC,GAAG,MACHC,EAAE,SAIN,QACC,OACCR,EAAA,OAAKC,MAAM,MAAMC,QAAQ,WAAWC,MAAM,8BACzCH,EAAA,uBAAmB,IAAIc,GAAG,IAAG,iBAAgB,QAAQC,GAAG,IAAIC,GAAG,KAAKC,GAAG,IAAIb,KAAK,UAAUC,OAAO,YACjGL,EAAA,QACCS,MAAM,MAAK,eACE,IACbK,GAAG,IAAG,iBACS,QACfC,GAAG,IACHC,GAAI,GAAG,EAAIN,KAAKC,MAAOb,EAAMc,OAASd,EAAMe,KAAQ,MACpDI,GAAG,IACHb,KAAK,UACLC,OAAO,a,QAcAa,EAAU,M,6EA6BU,I,iCAUA,CAC/BL,KAAM,IACNd,MAAO,MACPoB,MAAO,IACPP,OAAQ,EACRQ,WAAY,E,CAxCNC,SACN,OACCrB,EAACsB,EAAI,KACHzB,EAAkB0B,KAAKzB,OACxBE,EAAA,wBAAqBuB,KAAKzB,MAAMc,OAASW,KAAKzB,MAAMe,KAAO,OAAS,QAASW,IAAKD,KAAKzB,MAAMe,KAAMY,MAAOF,KAAKzB,MAAMc,SACrHZ,EAAA,oBAAgB,SAAQ,gBAAe,iBACrCuB,KAAKzB,MAAMsB,WAAU,QAAOG,KAAKzB,MAAMe,KAAI,IAAGU,KAAKzB,MAAMqB,O,CAyCvDO,YAAYD,GAClB,UAAWA,IAAU,SAAU,CAC9BA,EAAQ,G,CAETE,EAAYJ,KAAM,OAAQE,EAAO,CAChCG,SAAU,M,CAQLC,aAAaJ,GACnB,OAAQA,GACP,IAAK,QACJ,MACD,QACCA,EAAQ,MAEVF,KAAKzB,MAAKgC,OAAAC,OAAAD,OAAAC,OAAA,GACNR,KAAKzB,OAAK,CACbC,MAAO0B,G,CAQFO,aAAaP,GACnBQ,EAAYV,KAAM,QAASE,E,CAOrBS,cAAcT,GACpB,UAAWA,IAAU,SAAU,CAC9BA,EAAQ,C,CAETE,EAAYJ,KAAM,SAAUE,EAAO,CAElCG,SAAU,M,CAOLO,oBACNZ,KAAKG,YAAYH,KAAKV,MACtBU,KAAKM,aAAaN,KAAKxB,OACvBwB,KAAKS,aAAaT,KAAKJ,OACvBI,KAAKW,cAAcX,KAAKX,QAExBW,KAAKa,SAAWC,aAAY,KAC3B,GAAId,KAAKzB,MAAMsB,aAAeG,KAAKzB,MAAMc,OAAQ,CAChDW,KAAKzB,MAAKgC,OAAAC,OAAAD,OAAAC,OAAA,GACNR,KAAKzB,OAAK,CACbsB,WAAYG,KAAKzB,MAAMc,Q,IAGvB,I,CAGG0B,uBACNC,cAAchB,KAAKa,S"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as i}from"./index-50adf9a0.js";import{w as n,a}from"./prop.validators-daa14517.js";import"./a11y.tipps-e0a65f3c.js";import"./dev.utils-bedce29d.js";import"./reuse-56bb5a4b.js";import"./index-81bd9b41.js";const s=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}cite,figure,q+figcaption{display:inline;margin:0;padding:0}quote::before{content:'»';padding-right:0.5em}quote::after{content:'«';padding-left:0.5em}cite::before{content:'—'}.block cite::before{padding-right:0.5em}.inline cite::before{padding:0.5em}",o=class{constructor(e){t(this,e),this._caption=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){n(this,"_caption",t)}validateHref(t){n(this,"_href",t)}validateQuote(t){n(this,"_quote",t)}validateVariant(t){a(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateCaption(this._caption),this.validateHref(this._href),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=""!==this.state._quote;return e(i,null,e("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?e("blockquote",{cite:this.state._href},this.state._quote,e("span",{"aria-hidden":t?"true":void 0,hidden:t},e("slot",{name:"expert"}))):e("q",{cite:this.state._href},this.state._quote,e("span",{"aria-hidden":t?"true":void 0,hidden:t},e("slot",{name:"expert"}))),"string"==typeof this.state._caption&&this.state._caption.length>0&&e("figcaption",null,e("cite",null,e("kol-link",{_href:this.state._href,_label:this.state._caption,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};o.style={default:s};export{o as kol_quote};
+import{r as t,h as e,H as i}from"./index-50adf9a0.js";import{w as n,a}from"./prop.validators-daa14517.js";import"./a11y.tipps-e0a65f3c.js";import"./dev.utils-bedce29d.js";import"./reuse-56bb5a4b.js";import"./index-81bd9b41.js";const o=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}: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,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}cite,figure,q+figcaption{display:inline;margin:0;padding:0}blockquote::before{content:open-quote}blockquote::after{content:close-quote}cite::before{content:'—'}.block cite::before{padding-right:0.5em}.inline cite::before{padding:0.5em}",r=class{constructor(e){t(this,e),this._caption=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){n(this,"_caption",t)}validateHref(t){n(this,"_href",t,{required:!0})}validateQuote(t){n(this,"_quote",t,{required:!0})}validateVariant(t){a(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateCaption(this._caption),this.validateHref(this._href),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=""!==this.state._quote;return e(i,null,e("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?e("blockquote",{cite:this.state._href},this.state._quote,e("span",{"aria-hidden":t?"true":void 0,hidden:t},e("slot",{name:"expert"}))):e("q",{cite:this.state._href},this.state._quote,e("span",{"aria-hidden":t?"true":void 0,hidden:t},e("slot",{name:"expert"}))),"string"==typeof this.state._caption&&this.state._caption.length>0&&e("figcaption",null,e("cite",null,e("kol-link",{_href:this.state._href,_label:this.state._caption,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};r.style={default:o};export{r as kol_quote};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolQuote","_href","_quote","_variant","validateCaption","value","watchString","this","validateHref","validateQuote","validateVariant","watchValidator","Set","componentWillLoad","_caption","render","hideExpertSlot","state","h","Host","class","cite","undefined","hidden","name","length","_label","_target"],"sources":["./src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","./src/components/quote/component.tsx"],"sourcesContent":["@import '../style.css';\n\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nquote::before {\n\tcontent: '»';\n\tpadding-right: 0.5em;\n}\nquote::after {\n\tcontent: '«';\n\tpadding-left: 0.5em;\n}\n\ncite::before {\n\tcontent: '—';\n}\n.block cite::before {\n\tpadding-right: 0.5em;\n}\n.inline cite::before {\n\tpadding: 0.5em;\n}\n","import { h, Component, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { ComponentApi, KoliBriQuoteVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements ComponentApi {\n\t/**\n\t * The caption of the quote.\n\t */\n\t@Prop() public _caption?: string;\n\n\t/**\n\t * The href is a URL that designates a source document or message for the information quoted.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * The text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * The variant of the quote.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: States = {\n\t\t_href: '…', // ⚠ required\n\t\t_quote: '…', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: string): void {\n\t\twatchString(this, '_href', value);\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'block' || value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateHref(this._href);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._quote !== '';\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._caption === 'string' && this.state._caption.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._caption} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;mOAAA,MAAMA,EAAkB,yhC,MCWXC,EAAQ,M,0GAmB4B,S,WAEhB,CAC/BC,MAAO,IACPC,OAAQ,IACRC,SAAU,S,CAIJC,gBAAgBC,GACtBC,EAAYC,KAAM,WAAYF,E,CAIxBG,aAAaH,GACnBC,EAAYC,KAAM,QAASF,E,CAIrBI,cAAcJ,GACpBC,EAAYC,KAAM,SAAUF,E,CAItBK,gBAAgBL,GACtBM,EAAeJ,KAAM,YAAaF,GAAUA,IAAU,SAAWA,IAAU,UAAU,IAAIO,IAAI,CAAC,QAAS,WAAYP,E,CAG7GQ,oBACNN,KAAKH,gBAAgBG,KAAKO,UAC1BP,KAAKC,aAAaD,KAAKN,OACvBM,KAAKE,cAAcF,KAAKL,QACxBK,KAAKG,gBAAgBH,KAAKJ,S,CAGpBY,SACN,MAAMC,EAAiBT,KAAKU,MAAMf,SAAW,GAC7C,OACCgB,EAACC,EAAI,KACJD,EAAA,UACCE,MAAO,CACN,CAACb,KAAKU,MAAMd,UAAW,OAGvBI,KAAKU,MAAMd,WAAa,QACxBe,EAAA,cAAYG,KAAMd,KAAKU,MAAMhB,OAC3BM,KAAKU,MAAMf,OACZgB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,aAIbN,EAAA,KAAGG,KAAMd,KAAKU,MAAMhB,OAClBM,KAAKU,MAAMf,OACZgB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,oBAINjB,KAAKU,MAAMH,WAAa,UAAYP,KAAKU,MAAMH,SAASW,OAAS,GACxEP,EAAA,kBACCA,EAAA,YACCA,EAAA,YAAUjB,MAAOM,KAAKU,MAAMhB,MAAOyB,OAAQnB,KAAKU,MAAMH,SAAUa,QAAQ,c"}
+{"version":3,"names":["defaultStyleCss","KolQuote","_href","_quote","_variant","validateCaption","value","watchString","this","validateHref","required","validateQuote","validateVariant","watchValidator","Set","componentWillLoad","_caption","render","hideExpertSlot","state","h","Host","class","cite","undefined","hidden","name","length","_label","_target"],"sources":["./src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","./src/components/quote/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nblockquote::before {\n\tcontent: open-quote;\n}\nblockquote::after {\n\tcontent: close-quote;\n}\n\ncite::before {\n\tcontent: '—';\n}\n.block cite::before {\n\tpadding-right: 0.5em;\n}\n.inline cite::before {\n\tpadding: 0.5em;\n}\n","import { h, Component, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { ComponentApi, KoliBriQuoteVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements ComponentApi {\n\t/**\n\t * The caption of the quote.\n\t */\n\t@Prop() public _caption?: string;\n\n\t/**\n\t * The href is a URL that designates a source document or message for the information quoted.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * The text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * The variant of the quote.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: States = {\n\t\t_href: '…', // ⚠ required\n\t\t_quote: '…', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: string): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'block' || value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateHref(this._href);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._quote !== '';\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._caption === 'string' && this.state._caption.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._caption} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;mOAAA,MAAMA,EAAkB,imC,MCWXC,EAAQ,M,0GAmB4B,S,WAEhB,CAC/BC,MAAO,IACPC,OAAQ,IACRC,SAAU,S,CAIJC,gBAAgBC,GACtBC,EAAYC,KAAM,WAAYF,E,CAIxBG,aAAaH,GACnBC,EAAYC,KAAM,QAASF,EAAO,CACjCI,SAAU,M,CAKLC,cAAcL,GACpBC,EAAYC,KAAM,SAAUF,EAAO,CAClCI,SAAU,M,CAKLE,gBAAgBN,GACtBO,EAAeL,KAAM,YAAaF,GAAUA,IAAU,SAAWA,IAAU,UAAU,IAAIQ,IAAI,CAAC,QAAS,WAAYR,E,CAG7GS,oBACNP,KAAKH,gBAAgBG,KAAKQ,UAC1BR,KAAKC,aAAaD,KAAKN,OACvBM,KAAKG,cAAcH,KAAKL,QACxBK,KAAKI,gBAAgBJ,KAAKJ,S,CAGpBa,SACN,MAAMC,EAAiBV,KAAKW,MAAMhB,SAAW,GAC7C,OACCiB,EAACC,EAAI,KACJD,EAAA,UACCE,MAAO,CACN,CAACd,KAAKW,MAAMf,UAAW,OAGvBI,KAAKW,MAAMf,WAAa,QACxBgB,EAAA,cAAYG,KAAMf,KAAKW,MAAMjB,OAC3BM,KAAKW,MAAMhB,OACZiB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,aAIbN,EAAA,KAAGG,KAAMf,KAAKW,MAAMjB,OAClBM,KAAKW,MAAMhB,OACZiB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,oBAINlB,KAAKW,MAAMH,WAAa,UAAYR,KAAKW,MAAMH,SAASW,OAAS,GACxEP,EAAA,kBACCA,EAAA,YACCA,EAAA,YAAUlB,MAAOM,KAAKW,MAAMjB,MAAO0B,OAAQpB,KAAKW,MAAMH,SAAUa,QAAQ,c"}

package/dist/kolibri/kol-select.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-50adf9a0.js";import{S as a,a as n}from"./reuse-56bb5a4b.js";import{g as l}from"./controller-6ba588d9.js";import{w as r,d as o,b as d,e as h}from"./prop.validators-daa14517.js";import{I as u}from"./controller-icon-4bce436b.js";import{f as p}from"./controller-0b6f277d.js";import{a as c}from"./a11y.tipps-e0a65f3c.js";import{h as f,c as y}from"./label-f8bdc301.js";import"./tab-index-dc6e8ba5.js";import"./dev.utils-bedce29d.js";import"./index-81bd9b41.js";import"./icon-a88dcc85.js";const m=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===f(t.label,3)&&!1===y(t.label)&&c(`Ein abweichendes Aria-Label (${t.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===m(t)));if("number"==typeof t.label)return!0}return!1};class v extends u{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchListValue=(t,e)=>{const i=e.has("_list")?e.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),p(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHeight(t){r(this.component,"_height",t)}validateList(t){o(this.component,"_list",m,t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(t){d(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(t){d(this.component,"_required",t)}validateSize(t){h(this.component,"_size",t,{min:1})}validateValue(t){o(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(a)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const b=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}.kol-required span::after{content:'*'}:host{display:block}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select[multiple] option,select:not([multiple]),textarea{font-size:1rem;padding:0 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}:is(button,input,option,select,textarea):disabled,.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}kol-input{display:grid}input,option,select,textarea{display:block;line-height:2.5em;width:100%}input,select:not([multiple]){height:2.75em}.required label>span::after{content:'*'}.icons{display:flex;justify-content:space-between;height:0}.icons>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}.icon-left input,.icon-left select{padding-left:var(--a11y-min-size)}kol-button-wc{position:relative;float:right;z-index:1000;margin-top:calc(-1 * var(--a11y-min-size))}.icon-right kol-button-wc{margin-right:var(--a11y-min-size)}.disabled{opacity:0.5}",_=(t,e)=>Array.isArray(t)&&t.includes(e),g=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:!0===e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const l=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,l):t("option",{disabled:!0===e.disabled,key:l,selected:_(this.state._value,e.value),value:l},e.label)})))}render(){const{ariaDiscribedBy:i}=l(this.state);return t(e,null,t("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched},t("span",{slot:"label"},t("slot",null)),t("select",Object.assign({ref:this.catchRef,part:"select",title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:!0===e.disabled,key:a,selected:_(this.state._value,e.value),value:a},e.label)})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,n(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_height:"",_id:"…",_list:[],_multiple:!1,_value:[]},this.controller=new v(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(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(this.onChange)}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:b};export{g as kol_select};
+import{h as t,H as e,r as i,g as s}from"./index-50adf9a0.js";import{S as a,a as n}from"./reuse-56bb5a4b.js";import{g as l}from"./controller-6ba588d9.js";import{w as r,d,b as o,e as h}from"./prop.validators-daa14517.js";import{I as u}from"./controller-icon-4bce436b.js";import{f as p}from"./controller-0b6f277d.js";import{a as c}from"./a11y.tipps-e0a65f3c.js";import{h as f,c as m}from"./label-f8bdc301.js";import"./tab-index-dc6e8ba5.js";import"./dev.utils-bedce29d.js";import"./index-81bd9b41.js";import"./icon-a88dcc85.js";const y=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===f(t.label,3)&&!1===m(t.label)&&c(`Ein abweichendes Aria-Label (${t.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===y(t)));if("number"==typeof t.label)return!0}return!1};class b extends u{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchListValue=(t,e)=>{const i=e.has("_list")?e.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),p(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHeight(t){r(this.component,"_height",t)}validateList(t){d(this.component,"_list",y,t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(t){o(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(t){o(this.component,"_required",t)}validateSize(t){h(this.component,"_size",t,{min:1})}validateValue(t){d(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(a)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const v=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}: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,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}.required *[id*='-label']>span::after{content:'*';padding-left:0.125em}:host{display:block}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select[multiple] option,select:not([multiple]),textarea{font-size:1rem;padding:0 0.5em}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}:is(button,input,option,select,textarea):disabled,.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}kol-input{display:grid}input,option,select,textarea{display:block;line-height:2.5em;width:100%}input,select:not([multiple]){height:2.75em}.icons{display:flex;justify-content:space-between;height:0}.icons>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center;width:2.5em}.icon-left input,.icon-left select{padding-left:var(--a11y-min-size)}kol-button-wc{position:relative;float:right;z-index:1000;margin-top:calc(-1 * var(--a11y-min-size))}.icon-right kol-button-wc{margin-right:var(--a11y-min-size)}.disabled{opacity:0.5}",_=(t,e)=>Array.isArray(t)&&t.includes(e),g=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:!0===e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const l=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,l):t("option",{disabled:!0===e.disabled,key:l,selected:_(this.state._value,e.value),value:l},e.label)})))}render(){const{ariaDiscribedBy:i}=l(this.state);return t(e,null,t("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched},t("span",{slot:"label"},t("slot",null)),t("select",Object.assign({ref:this.catchRef,part:"select",title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:!0===e.disabled,key:a,selected:_(this.state._value,e.value),value:a},e.label)})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,n(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_height:"",_id:"…",_list:[],_multiple:!1,_value:[]},this.controller=new b(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(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(this.onChange)}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:v};export{g as kol_select};

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

@@ -1 +1 @@
-{"version":3,"names":["validateInputSelectList","option","label","length","disabled","trim","hasEnoughReadableChars","containsOnlyNumbers","a11yHint","Array","isArray","options","find","item","undefined","SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","filterValuesInOptions","values","filter","beforePatchListValue","_value","nextState","list","has","state","_list","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateList","watchJsonArrayString","hooks","beforePatch","validateMultiple","watchBoolean","validateRequired","validateSize","watchNumber","min","validateValue","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_required","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","_a","map","index","render","ariaDiscribedBy","getRenderStates","Host","_disabled","_error","_hideLabel","_hint","_icon","_id","_touched","slot","Object","assign","ref","catchRef","part","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","onClick","controller","onFacade","onBlur","onFocus","hostRef","propergateFocus","event","from","_b","_on","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateTabIndex","validateTouched","_alert"],"sources":["./src/utils/validators/list.ts","./src/components/select/controller.ts","./src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","./src/components/select/component.tsx"],"sourcesContent":["import { Optgroup, SelectOption } from '../../types/input/types';\nimport { a11yHint } from '../a11y.tipps';\nimport { containsOnlyNumbers, hasEnoughReadableChars } from './label';\n\nexport const validateInputSelectList = <T>(option: SelectOption<T>): boolean => {\n\tif (typeof option === 'object' && option !== null) {\n\t\tif (typeof option.label === 'string' && option.label.length > 0) {\n\t\t\toption.disabled = option.disabled === true;\n\t\t\toption.label = `${option.label}`.trim();\n\t\t\tif (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {\n\t\t\t\ta11yHint(\n\t\t\t\t\t`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (Array.isArray((option as Optgroup<T>).options)) {\n\t\t\t\treturn (\n\t\t\t\t\t(option as Optgroup<T>).options.find((item) => {\n\t\t\t\t\t\treturn validateInputSelectList(item) === false;\n\t\t\t\t\t}) === undefined\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn true;\n\t\t} else if (typeof option.label === 'number') {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n};\n","import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\nimport { validateInputSelectList } from '../../utils/validators/list';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\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 getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t: false\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprivate readonly beforePatchListValue = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst list = nextState.has('_list') ? nextState.get('_list') : this.component.state._list;\n\t\tif (Array.isArray(list) && list.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, list as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(Array.isArray(value) && value.length > 0 ? (value as string[]) : [], list as SelectOption<W3CInputValue>[]);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\tlist[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateList<T>(value?: SelectOption<T>[] | string): void {\n\t\twatchJsonArrayString(this.component, '_list', validateInputSelectList, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateSize(value?: number): void {\n\t\twatchNumber(this.component, '_size', value, {\n\t\t\tmin: 1,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSize(this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { propergateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { ComponentApi, States } from './types';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @part select - Ermöglicht das Stylen des select-Knotens.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled === true} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\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_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\tpart=\"select\"\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})}\n\t\t\t\t\t</select>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t *\n\t * @deprecated Use _size instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _list!: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean = false;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt an, ob die Selectbox ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt an, wie viele Optionen im Drop-Down-Menü sichtbar sein sollen.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _value?: Stringified<W3CInputValue[]>;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_height: '',\n\t\t_id: '…', // ⚠ required\n\t\t_list: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'textarea', this.host);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\t/**\n\t\t * TODO: Find values via value keys.\n\t\t */\n\t\tthis._value = Array.from(this.ref?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateInputSelectList","option","label","length","disabled","trim","hasEnoughReadableChars","containsOnlyNumbers","a11yHint","Array","isArray","options","find","item","undefined","SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","filterValuesInOptions","values","filter","beforePatchListValue","_value","nextState","list","has","state","_list","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateList","watchJsonArrayString","hooks","beforePatch","validateMultiple","watchBoolean","validateRequired","validateSize","watchNumber","min","validateValue","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_required","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","_a","map","index","render","ariaDiscribedBy","getRenderStates","Host","_disabled","_error","_hideLabel","_hint","_icon","_id","_touched","slot","Object","assign","ref","catchRef","part","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","onClick","controller","onFacade","onBlur","onFocus","hostRef","propergateFocus","event","from","_b","_on","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateTabIndex","validateTouched","_alert"],"sources":["./src/utils/validators/list.ts","./src/components/select/controller.ts","./src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","./src/components/select/component.tsx"],"sourcesContent":["import { Optgroup, SelectOption } from '../../types/input/types';\nimport { a11yHint } from '../a11y.tipps';\nimport { containsOnlyNumbers, hasEnoughReadableChars } from './label';\n\nexport const validateInputSelectList = <T>(option: SelectOption<T>): boolean => {\n\tif (typeof option === 'object' && option !== null) {\n\t\tif (typeof option.label === 'string' && option.label.length > 0) {\n\t\t\toption.disabled = option.disabled === true;\n\t\t\toption.label = `${option.label}`.trim();\n\t\t\tif (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {\n\t\t\t\ta11yHint(\n\t\t\t\t\t`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (Array.isArray((option as Optgroup<T>).options)) {\n\t\t\t\treturn (\n\t\t\t\t\t(option as Optgroup<T>).options.find((item) => {\n\t\t\t\t\t\treturn validateInputSelectList(item) === false;\n\t\t\t\t\t}) === undefined\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn true;\n\t\t} else if (typeof option.label === 'number') {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n};\n","import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\nimport { validateInputSelectList } from '../../utils/validators/list';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\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 getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t: false\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprivate readonly beforePatchListValue = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst list = nextState.has('_list') ? nextState.get('_list') : this.component.state._list;\n\t\tif (Array.isArray(list) && list.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, list as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(Array.isArray(value) && value.length > 0 ? (value as string[]) : [], list as SelectOption<W3CInputValue>[]);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\tlist[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateList<T>(value?: SelectOption<T>[] | string): void {\n\t\twatchJsonArrayString(this.component, '_list', validateInputSelectList, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateSize(value?: number): void {\n\t\twatchNumber(this.component, '_size', value, {\n\t\t\tmin: 1,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSize(this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { propergateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { ComponentApi, States } from './types';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @part select - Ermöglicht das Stylen des select-Knotens.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled === true} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\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_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\tpart=\"select\"\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})}\n\t\t\t\t\t</select>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t *\n\t * @deprecated Use _size instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _list!: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean = false;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt an, ob die Selectbox ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt an, wie viele Optionen im Drop-Down-Menü sichtbar sein sollen.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _value?: Stringified<W3CInputValue[]>;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_height: '',\n\t\t_id: '…', // ⚠ required\n\t\t_list: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'textarea', this.host);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\t/**\n\t\t * TODO: Find values via value keys.\n\t\t */\n\t\tthis._value = Array.from(this.ref?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

package/dist/kolibri/kol-skip-nav.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i}from"./index-50adf9a0.js";import{b as e}from"./a11y.tipps-e0a65f3c.js";import{w as a}from"./prop.validators-daa14517.js";import{w as n}from"./validation-8f8d53e5.js";import"./dev.utils-bedce29d.js";import"./reuse-56bb5a4b.js";import"./index-81bd9b41.js";const s=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}",r=class{constructor(i){t(this,i),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return i("nav",{"aria-label":this.state._ariaLabel},i("ul",null,this.state._links.map(((t,e)=>i("li",{key:e},i("kol-link",Object.assign({},t,{_stealth:!0})))))))}validateAriaLabel(t){a(this,"_ariaLabel",t,{required:!0}),e(t)}validateLinks(t){n("KolSkipNav",this,t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};r.style={default:s};export{r as kol_skip_nav};
+import{r as t,h as i}from"./index-50adf9a0.js";import{b as e}from"./a11y.tipps-e0a65f3c.js";import{w as a}from"./prop.validators-daa14517.js";import{w as n}from"./validation-8f8d53e5.js";import"./dev.utils-bedce29d.js";import"./reuse-56bb5a4b.js";import"./index-81bd9b41.js";const s=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}: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,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}",r=class{constructor(i){t(this,i),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return i("nav",{"aria-label":this.state._ariaLabel},i("ul",null,this.state._links.map(((t,e)=>i("li",{key:e},i("kol-link",Object.assign({},t,{_stealth:!0})))))))}validateAriaLabel(t){a(this,"_ariaLabel",t,{required:!0}),e(t)}validateLinks(t){n("KolSkipNav",this,t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};r.style={default:s};export{r as kol_skip_nav};

package/dist/kolibri/kol-skip-nav.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNav","_ariaLabel","_links","render","h","this","state","map","link","index","key","Object","assign","_stealth","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","./src/components/skip-nav/component.tsx"],"sourcesContent":["@import '../style.css';\n\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\nimport { Stringified } from '../../types/common';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @part link - Ermöglicht das Stylen der Links.\n */\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: NavLinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link {...link} _stealth={true}></kol-link>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Ist die Liste der unsichtbaren Links.\n\t */\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mRAAA,MAAMA,EAAkB,k2B,MCoCXC,EAAU,M,oFA8BU,CAC/BC,WAAY,IACZC,OAAQ,G,CA/BFC,SACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,YAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAoBC,IAE1CL,EAAA,MAAIM,IAAKD,GACRL,EAAA,WAAAO,OAAAC,OAAA,GAAcJ,EAAI,CAAEK,SAAU,Y,CA+B9BC,kBAAkBC,GACxBC,EAAYX,KAAM,aAAcU,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAOpBI,cAAcJ,GACpBK,EAAc,aAAcf,KAAMU,E,CAM5BM,oBACNhB,KAAKS,kBAAkBT,KAAKJ,YAC5BI,KAAKc,cAAcd,KAAKH,O"}
+{"version":3,"names":["defaultStyleCss","KolSkipNav","_ariaLabel","_links","render","h","this","state","map","link","index","key","Object","assign","_stealth","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","./src/components/skip-nav/component.tsx"],"sourcesContent":["@import '../style.css';\n\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\nimport { Stringified } from '../../types/common';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @part link - Ermöglicht das Stylen der Links.\n */\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: NavLinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link {...link} _stealth={true}></kol-link>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Ist die Liste der unsichtbaren Links.\n\t */\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mRAAA,MAAMA,EAAkB,w7B,MCoCXC,EAAU,M,oFA8BU,CAC/BC,WAAY,IACZC,OAAQ,G,CA/BFC,SACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,YAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAoBC,IAE1CL,EAAA,MAAIM,IAAKD,GACRL,EAAA,WAAAO,OAAAC,OAAA,GAAcJ,EAAI,CAAEK,SAAU,Y,CA+B9BC,kBAAkBC,GACxBC,EAAYX,KAAM,aAAcU,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAOpBI,cAAcJ,GACpBK,EAAc,aAAcf,KAAMU,E,CAM5BM,oBACNhB,KAAKS,kBAAkBT,KAAKJ,YAC5BI,KAAKc,cAAcd,KAAKH,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e}from"./index-50adf9a0.js";const i=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}",n=class{constructor(e){t(this,e),this._icon=void 0,this._iconOnly=!1,this._label=void 0}render(){return e("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label},e("slot",{name:"expert",slot:"expert"}))}};n.style={default:i};export{n as kol_span};
+import{r as t,h as e}from"./index-50adf9a0.js";const n=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}: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,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}",i=class{constructor(e){t(this,e),this._icon=void 0,this._iconOnly=!1,this._label=void 0}render(){return e("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label},e("slot",{name:"expert",slot:"expert"}))}};i.style={default:n};export{i as kol_span};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSpan","render","h","_icon","this","_iconOnly","_label","name","slot"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import '../style.css';\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt einen beschreibenden Text für das Text-Element an.\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,gyB,MCaXC,EAAO,M,6DAiBmC,M,sBAhB/CC,SACN,OACCC,EAAA,eAAaC,MAAOC,KAAKD,MAAOE,UAAWD,KAAKC,UAAWC,OAAQF,KAAKE,QACvEJ,EAAA,QAAMK,KAAK,SAASC,KAAK,W"}
+{"version":3,"names":["defaultStyleCss","KolSpan","render","h","_icon","this","_iconOnly","_label","name","slot"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import '../style.css';\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt einen beschreibenden Text für das Text-Element an.\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,s3B,MCaXC,EAAO,M,6DAiBmC,M,sBAhB/CC,SACN,OACCC,EAAA,eAAaC,MAAOC,KAAKD,MAAOE,UAAWD,KAAKC,UAAWC,OAAQF,KAAKE,QACvEJ,EAAA,QAAMK,KAAK,SAASC,KAAK,W"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as e}from"./index-50adf9a0.js";import{b as n}from"./prop.validators-daa14517.js";import{a as s}from"./i18n-7c335368.js";import"./a11y.tipps-e0a65f3c.js";import"./dev.utils-bedce29d.js";import"./reuse-56bb5a4b.js";import"./index-81bd9b41.js";import"./index-7c114790.js";const a=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-color:#fff;border-radius:50%;border-style:solid;border-width:0.1rem;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin span:nth-child(1){background-color:#fc0;z-index:0;animation:spin1 2s infinite;left:0.1rem}.spin span:nth-child(2){background-color:#f00;z-index:1;animation:spin2 2s infinite;left:0.1rem}.spin span:nth-child(3){background-color:#000;z-index:1;animation:spin2 2s infinite;left:1.1rem}.spin span:nth-child(4){background-color:#666;z-index:0;animation:spin3 2s infinite;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}",r=class{constructor(t){i(this,t),this.showToggled=!1,this._show=!1,this.state={}}render(){return t(e,null,this.state._show?t("span",{"aria-busy":"true","aria-label":s("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},t("span",{class:"bg-spin-1"}),t("span",{class:"bg-spin-2"}),t("span",{class:"bg-spin-3"}),t("span",{class:"bg-neutral"})):this.showToggled&&t("span",{"aria-label":s("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(t){this.showToggled=!0===this.state._show&&!1===this._show,n(this,"_show",t)}componentWillLoad(){this.validateShow(this._show)}static get watchers(){return{_show:["validateShow"]}}};r.style={default:a};export{r as kol_spin};
+import{r as i,h as t,H as n}from"./index-50adf9a0.js";import{b as e}from"./prop.validators-daa14517.js";import{a}from"./i18n-bc1e0dfd.js";import"./a11y.tipps-e0a65f3c.js";import"./dev.utils-bedce29d.js";import"./reuse-56bb5a4b.js";import"./index-81bd9b41.js";import"./index-f3c76945.js";const s=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}: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,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-color:#fff;border-radius:50%;border-style:solid;border-width:0.1rem;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin span:nth-child(1){background-color:#fc0;z-index:0;animation:spin1 2s infinite;left:0.1rem}.spin span:nth-child(2){background-color:#f00;z-index:1;animation:spin2 2s infinite;left:0.1rem}.spin span:nth-child(3){background-color:#000;z-index:1;animation:spin2 2s infinite;left:1.1rem}.spin span:nth-child(4){background-color:#666;z-index:0;animation:spin3 2s infinite;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}",r=class{constructor(t){i(this,t),this.showToggled=!1,this._show=!1,this.state={}}render(){return t(n,null,this.state._show?t("span",{"aria-busy":"true","aria-label":a("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},t("span",{class:"bg-spin-1"}),t("span",{class:"bg-spin-2"}),t("span",{class:"bg-spin-3"}),t("span",{class:"bg-neutral"})):this.showToggled&&t("span",{"aria-label":a("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(t){this.showToggled=!0===this.state._show&&!1===this._show,e(this,"_show",t)}componentWillLoad(){this.validateShow(this._show)}static get watchers(){return{_show:["validateShow"]}}};r.style={default:s};export{r as kol_spin};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSpin","this","showToggled","render","h","Host","state","_show","translate","class","role","validateShow","value","watchBoolean","componentWillLoad"],"sources":["./src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","./src/components/spin/component.tsx"],"sourcesContent":["@import '../style.css';\n\n.spin {\n\tdisplay: inline-block;\n\theight: 1rem;\n\tposition: relative;\n\twidth: 3rem;\n}\n.spin span {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tborder-color: #fff;\n\tborder-radius: 50%;\n\tborder-style: solid;\n\tborder-width: 0.1rem;\n\theight: 0.8rem;\n\tposition: absolute;\n\ttop: 0.1rem;\n\twidth: 0.8rem;\n}\n.spin span:nth-child(1) {\n\tbackground-color: #fc0;\n\tz-index: 0;\n\tanimation: spin1 2s infinite;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(2) {\n\tbackground-color: #f00;\n\tz-index: 1;\n\tanimation: spin2 2s infinite;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(3) {\n\tbackground-color: #000;\n\tz-index: 1;\n\tanimation: spin2 2s infinite;\n\tleft: 1.1rem;\n}\n.spin span:nth-child(4) {\n\tbackground-color: #666;\n\tz-index: 0;\n\tanimation: spin3 2s infinite;\n\tleft: 2.1rem;\n}\n\n@keyframes spin1 {\n\t0% {\n\t\ttransform: scale(0);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n\n@keyframes spin2 {\n\t0% {\n\t\ttransform: translate(0, 0);\n\t}\n\t100% {\n\t\ttransform: translate(1rem, 0);\n\t}\n}\n\n@keyframes spin3 {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { translate } from '../../i18n';\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tshow: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span aria-busy=\"true\" aria-label={translate('kol-action-running')} aria-live=\"polite\" class=\"spin\" role=\"alert\">\n\t\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {};\n\n\tprivate showToggled = false;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"mappings":";;;oSAAA,MAAMA,EAAkB,snD,MC0BXC,EAAO,M,yBA4BXC,KAAAC,YAAc,M,WAP4B,M,WAKlB,E,CAzBzBC,SACN,OACCC,EAACC,EAAI,KACHJ,KAAKK,MAAMC,MACXH,EAAA,oBAAgB,OAAM,aAAaI,EAAU,sBAAqB,YAAY,SAASC,MAAM,OAAOC,KAAK,SACxGN,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,gBAGbR,KAAKC,aAAeE,EAAA,qBAAkBI,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAsB3GC,aAAaC,GACnBX,KAAKC,YAAcD,KAAKK,MAAMC,QAAU,MAAQN,KAAKM,QAAU,MAC/DM,EAAaZ,KAAM,QAASW,E,CAMtBE,oBACNb,KAAKU,aAAaV,KAAKM,M"}
+{"version":3,"names":["defaultStyleCss","KolSpin","this","showToggled","render","h","Host","state","_show","translate","class","role","validateShow","value","watchBoolean","componentWillLoad"],"sources":["./src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","./src/components/spin/component.tsx"],"sourcesContent":["@import '../style.css';\n\n.spin {\n\tdisplay: inline-block;\n\theight: 1rem;\n\tposition: relative;\n\twidth: 3rem;\n}\n.spin span {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tborder-color: #fff;\n\tborder-radius: 50%;\n\tborder-style: solid;\n\tborder-width: 0.1rem;\n\theight: 0.8rem;\n\tposition: absolute;\n\ttop: 0.1rem;\n\twidth: 0.8rem;\n}\n.spin span:nth-child(1) {\n\tbackground-color: #fc0;\n\tz-index: 0;\n\tanimation: spin1 2s infinite;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(2) {\n\tbackground-color: #f00;\n\tz-index: 1;\n\tanimation: spin2 2s infinite;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(3) {\n\tbackground-color: #000;\n\tz-index: 1;\n\tanimation: spin2 2s infinite;\n\tleft: 1.1rem;\n}\n.spin span:nth-child(4) {\n\tbackground-color: #666;\n\tz-index: 0;\n\tanimation: spin3 2s infinite;\n\tleft: 2.1rem;\n}\n\n@keyframes spin1 {\n\t0% {\n\t\ttransform: scale(0);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n\n@keyframes spin2 {\n\t0% {\n\t\ttransform: translate(0, 0);\n\t}\n\t100% {\n\t\ttransform: translate(1rem, 0);\n\t}\n}\n\n@keyframes spin3 {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { translate } from '../../i18n';\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tshow: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span aria-busy=\"true\" aria-label={translate('kol-action-running')} aria-live=\"polite\" class=\"spin\" role=\"alert\">\n\t\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {};\n\n\tprivate showToggled = false;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"mappings":";;;+RAAA,MAAMA,EAAkB,4sD,MC0BXC,EAAO,M,yBA4BXC,KAAAC,YAAc,M,WAP4B,M,WAKlB,E,CAzBzBC,SACN,OACCC,EAACC,EAAI,KACHJ,KAAKK,MAAMC,MACXH,EAAA,oBAAgB,OAAM,aAAaI,EAAU,sBAAqB,YAAY,SAASC,MAAM,OAAOC,KAAK,SACxGN,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,cACZL,EAAA,QAAMK,MAAM,gBAGbR,KAAKC,aAAeE,EAAA,qBAAkBI,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAsB3GC,aAAaC,GACnBX,KAAKC,YAAcD,KAAKK,MAAMC,QAAU,MAAQN,KAAKM,QAAU,MAC/DM,EAAaZ,KAAM,QAASW,E,CAMtBE,oBACNb,KAAKU,aAAaV,KAAKM,M"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as a,h as i,H as t}from"./index-50adf9a0.js";import{w as r}from"./prop.validators-daa14517.js";import{a as s}from"./i18n-7c335368.js";import"./a11y.tipps-e0a65f3c.js";import"./dev.utils-bedce29d.js";import"./reuse-56bb5a4b.js";import"./index-81bd9b41.js";import"./index-7c114790.js";const e=class{constructor(i){a(this,i),this._ariaLabel=void 0,this._symbol=void 0,this.state={_ariaLabel:s("kol-warning"),_symbol:"…"}}render(){return i(t,null,i("span",{"aria-label":this.state._ariaLabel,role:"term"},this.state._symbol))}validateAriaLabel(a){r(this,"_ariaLabel",a,{required:!0})}validateSymbol(a){r(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_symbol:["validateSymbol"]}}};export{e as kol_symbol};
+import{r as a,h as i,H as t}from"./index-50adf9a0.js";import{w as e}from"./prop.validators-daa14517.js";import{a as r}from"./i18n-bc1e0dfd.js";import"./a11y.tipps-e0a65f3c.js";import"./dev.utils-bedce29d.js";import"./reuse-56bb5a4b.js";import"./index-81bd9b41.js";import"./index-f3c76945.js";const s=class{constructor(i){a(this,i),this._ariaLabel=void 0,this._symbol=void 0,this.state={_ariaLabel:r("kol-warning"),_symbol:"…"}}render(){return i(t,null,i("span",{"aria-label":this.state._ariaLabel,role:"term"},this.state._symbol))}validateAriaLabel(a){e(this,"_ariaLabel",a,{required:!0})}validateSymbol(a){e(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_symbol:["validateSymbol"]}}};export{s as kol_symbol};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-50adf9a0.js";import{s as n,w as o,g as s,p as a,a as l,o as r}from"./prop.validators-daa14517.js";import{a as h}from"./i18n-7c335368.js";import"./a11y.tipps-e0a65f3c.js";import"./dev.utils-bedce29d.js";import"./reuse-56bb5a4b.js";import"./index-81bd9b41.js";import"./index-7c114790.js";const d=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host>div{overflow-x:auto;overflow-y:hidden}table{width:100%}th>div{display:grid;grid-template-columns:1fr auto;place-items:center;gap:0.25em}div.pagination{padding:0.5em}div.pagination,div.pagination>div:last-child{display:grid;place-items:center;gap:0.5em}@media (min-width: 1024px){div.pagination,div.pagination>div:last-child{grid-auto-flow:column}div.pagination kol-pagination{display:flex}}",c=[10,20,50,100],p=new Map,f=class{constructor(i){t(this,i),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),n(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,e,a)=>{"_pagination"===a&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=()=>{let t=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"NOS":t=[...this.state._data];break;case"ASC":t=this.sortFunction([...this.state._data]);break;default:t=this.sortFunction([...this.state._data]).reverse()}n(this,"_sortedData",t)},this._caption=void 0,this._data=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"…",_data:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){o(this,"_caption",t,{required:!0})}validateData(t){s(t,(()=>{r(t,(()=>{void 0===t&&(t=[]);try{t=a(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&n(this,"_data",t,{afterPatch:()=>{const t=setTimeout((()=>{clearTimeout(t),this.updateSortedData()}))}})}))}))}validateHeaders(t){s(t,(()=>{r(t,(()=>{try{t=a(t)}catch(t){}l(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,e;const a=t;null===(i=a.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(e=a.vertical)||void 0===e||e.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))}))}}})}))}))}validateMinWidth(t){o(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=a(t)}catch(t){}l(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.colSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}getNumberOfRows(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.rowSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,e;let a=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(e=t.vertical)&&void 0!==e?e:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,i){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const e=this.getPrimaryHeader(i),a=this.getNumberOfCols(i.horizontal,t),o=this.getNumberOfRows(i.vertical,t),n=[],s=[],r=[];i.vertical.forEach(((t,i)=>{s[i]=0,r[i]=[]}));for(let l=0;l<o;l++){const o=[];i.vertical.forEach(((t,i)=>{let e=0;if(r[i].forEach((t=>e+=t)),e<=l){const a=t[l-e+s[i]];if("object"==typeof a){o.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),r[i].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let e=1;e<a.colSpan;e++)r[i+e].push(t);s[i]++}}}));for(let i=0;i<a;i++)!0===this.horizontal?"object"==typeof e[i]&&null!==e[i]&&"string"==typeof e[i].key&&"object"==typeof t[l]&&null!==t[l]&&o.push(Object.assign(Object.assign({},e[i]),{colSpan:void 0,data:t[l],label:t[l][e[i].key],rowSpan:void 0})):"object"==typeof e[l]&&null!==e[l]&&"string"==typeof e[l].key&&"object"==typeof t[i]&&null!==t[i]&&o.push(Object.assign(Object.assign({},e[l]),{colSpan:void 0,data:t[i],label:t[i][e[l].key],rowSpan:void 0}));n.push(o)}if(0===t.length){let t=0,e=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{e+=t.rowSpan||1})));const a={colSpan:t,label:h("kol-no-entries"),render:void 0,rowSpan:Math.max(e,1)};0===n.length?n.push([a]):n[0].push(a)}return n}selectDisplayedData(t,i,e){return"number"==typeof i&&i>0&&"number"==typeof e&&e>0?(this.pageStartSlice=i*(e-1),this.pageEndSlice=i*e>t.length?t.length:i*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(p.get(i)),p.set(i,setTimeout((()=>{if(clearTimeout(p.get(i)),"function"==typeof t.render){const e=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof e&&(i.innerHTML=e)}}))))}render(){var t,a;const o=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(a=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==a?a:10:this.state._sortedData.length,this.state._pagination._page||1),n=this.createDataField(o,this.state._headers);return i(e,null,i("div",{tabindex:"0"},i("table",{style:{minWidth:this.state._minWidth}},i("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&i("thead",null,this.state._headers.horizontal.map(((t,e)=>i("tr",{key:`thead-${e}`},t.map(((t,a)=>!0===t.asTd?i("td",{key:`thead-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}):i("th",{key:`thead-${e}-${a}-${t.label}`,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"button,ghost",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))))))))),i("tbody",null,n.map(((t,e)=>i("tr",{key:`tbody-${e}`},t.map(((t,a)=>!1===t.asTd?i("th",{key:`tbody-${e}-${a}-${t.label}`,scope:"number"==typeof t.rowSpan&&t.rowSpan>1?"rowgroup":"row",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"button,ghost",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))):i("td",{key:`tbody-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}))))))))),this.pageEndSlice>0&&this.showPagination&&i("div",{class:"pagination"},i("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),i("div",null,i("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||c,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};f.style={default:d};export{f as kol_table};
+import{r as t,h as i,H as e}from"./index-50adf9a0.js";import{s as n,w as o,g as s,p as a,a as l,o as r}from"./prop.validators-daa14517.js";import{a as d}from"./i18n-bc1e0dfd.js";import"./a11y.tipps-e0a65f3c.js";import"./dev.utils-bedce29d.js";import"./reuse-56bb5a4b.js";import"./index-81bd9b41.js";import"./index-f3c76945.js";const h=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}: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,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host>div{overflow-x:auto;overflow-y:hidden}table{width:100%}th>div{display:grid;grid-template-columns:1fr auto;place-items:center;gap:0.25em}div.pagination{padding:0.5em}div.pagination,div.pagination>div:last-child{display:grid;place-items:center;gap:0.5em}@media (min-width: 1024px){div.pagination,div.pagination>div:last-child{grid-auto-flow:column}div.pagination kol-pagination{display:flex}}",c=[10,20,50,100],p=new Map,f=class{constructor(i){t(this,i),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),n(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,e,a)=>{"_pagination"===a&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=()=>{let t=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"NOS":t=[...this.state._data];break;case"ASC":t=this.sortFunction([...this.state._data]);break;default:t=this.sortFunction([...this.state._data]).reverse()}n(this,"_sortedData",t)},this._caption=void 0,this._data=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"…",_data:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){o(this,"_caption",t,{required:!0})}validateData(t){s(t,(()=>{r(t,(()=>{void 0===t&&(t=[]);try{t=a(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&n(this,"_data",t,{afterPatch:()=>{const t=setTimeout((()=>{clearTimeout(t),this.updateSortedData()}))}})}))}))}validateHeaders(t){s(t,(()=>{r(t,(()=>{try{t=a(t)}catch(t){}l(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,e;const a=t;null===(i=a.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(e=a.vertical)||void 0===e||e.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))}))}}})}))}))}validateMinWidth(t){o(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=a(t)}catch(t){}l(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.colSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}getNumberOfRows(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.rowSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,e;let a=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(e=t.vertical)&&void 0!==e?e:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,i){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const e=this.getPrimaryHeader(i),a=this.getNumberOfCols(i.horizontal,t),o=this.getNumberOfRows(i.vertical,t),n=[],s=[],r=[];i.vertical.forEach(((t,i)=>{s[i]=0,r[i]=[]}));for(let l=0;l<o;l++){const o=[];i.vertical.forEach(((t,i)=>{let e=0;if(r[i].forEach((t=>e+=t)),e<=l){const a=t[l-e+s[i]];if("object"==typeof a){o.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),r[i].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let e=1;e<a.colSpan;e++)r[i+e].push(t);s[i]++}}}));for(let i=0;i<a;i++)!0===this.horizontal?"object"==typeof e[i]&&null!==e[i]&&"string"==typeof e[i].key&&"object"==typeof t[l]&&null!==t[l]&&o.push(Object.assign(Object.assign({},e[i]),{colSpan:void 0,data:t[l],label:t[l][e[i].key],rowSpan:void 0})):"object"==typeof e[l]&&null!==e[l]&&"string"==typeof e[l].key&&"object"==typeof t[i]&&null!==t[i]&&o.push(Object.assign(Object.assign({},e[l]),{colSpan:void 0,data:t[i],label:t[i][e[l].key],rowSpan:void 0}));n.push(o)}if(0===t.length){let t=0,e=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{e+=t.rowSpan||1})));const a={colSpan:t,label:d("kol-no-entries"),render:void 0,rowSpan:Math.max(e,1)};0===n.length?n.push([a]):n[0].push(a)}return n}selectDisplayedData(t,i,e){return"number"==typeof i&&i>0&&"number"==typeof e&&e>0?(this.pageStartSlice=i*(e-1),this.pageEndSlice=i*e>t.length?t.length:i*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(p.get(i)),p.set(i,setTimeout((()=>{if(clearTimeout(p.get(i)),"function"==typeof t.render){const e=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof e&&(i.innerHTML=e)}}))))}render(){var t,a;const o=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(a=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==a?a:10:this.state._sortedData.length,this.state._pagination._page||1),n=this.createDataField(o,this.state._headers);return i(e,null,i("div",{tabindex:"0"},i("table",{style:{minWidth:this.state._minWidth}},i("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&i("thead",null,this.state._headers.horizontal.map(((t,e)=>i("tr",{key:`thead-${e}`},t.map(((t,a)=>!0===t.asTd?i("td",{key:`thead-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}):i("th",{key:`thead-${e}-${a}-${t.label}`,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"button,ghost",_ariaLabel:d("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_iconOnly:!0,_label:d("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))))))))),i("tbody",null,n.map(((t,e)=>i("tr",{key:`tbody-${e}`},t.map(((t,a)=>!1===t.asTd?i("th",{key:`tbody-${e}-${a}-${t.label}`,scope:"number"==typeof t.rowSpan&&t.rowSpan>1?"rowgroup":"row",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"button,ghost",_ariaLabel:d("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_iconOnly:!0,_label:d("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))):i("td",{key:`tbody-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}))))))))),this.pageEndSlice>0&&this.showPagination&&i("div",{class:"pagination"},i("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),i("div",null,i("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||c,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};f.style={default:h};export{f as kol_table};