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

package/dist/cjs/kol-progress.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),label=require("./label-b6d62008.js"),prop_validators=require("./prop.validators-8eed6b45.js");var KoliBriProgressVariantEnum;require("./a11y.tipps-8660049e.js"),require("./dev.utils-f772f088.js"),require("./reuse-5fad9b6e.js"),require("./index-6a24b8dc.js"),function(e){e.bar="bar",e.cycle="cycle",e["cycle-value-label"]="cycle-value-label",e["cycle-label-value"]="cycle-label-value"}(KoliBriProgressVariantEnum||(KoliBriProgressVariantEnum={}));const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}progress{display:block;height:0;overflow:hidden;width:0}.bar .border{fill:transparent;stroke:black}.bar .background{fill:lightgray;stroke:white}.bar .progress{fill:#0075ff;stroke:transparent;transition:250ms ease-in-out 50ms}.cycle .background{fill:transparent;stroke:lightgray}.cycle .border{fill:transparent;stroke:black}.cycle .whitespace{fill:transparent;stroke:white}.cycle .progress{fill:transparent;stroke:#0075ff;transform-origin:50% 50%;transform:rotate(-90deg);transition:250ms ease-in-out 50ms}@media (prefers-reduced-motion){.progress{transition-duration:0s;transition-delay:0s}}",VALID_VARIANTS=Object.keys(KoliBriProgressVariantEnum),createProgressSVG=e=>{let t="43%",r=e._label?"57%":"50%";switch(e._variant){case"cycle-value-label":e._label&&(t="57%",r="43%");case"cycle":case"cycle-label-value":return index.h("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),index.h("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),index.h("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),e._label&&index.h("text",{"aria-hidden":"true",x:"50%",y:t,"text-anchor":"middle",fill:"currentColor"},e._label),index.h("text",{"aria-hidden":"true",x:"50%",y:r,"text-anchor":"middle",fill:"currentColor"},e._value,e._unit));default:return index.h("div",{class:"bar"},e._label&&index.h("div",null,e._label),index.h("div",{style:{display:"flex",gap:"0.3em"}},index.h("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},index.h("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),index.h("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:e._value/e._max*95}),index.h("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),index.h("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},e._value,e._unit)))}},KolProcess=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return index.h(index.Host,null,createProgressSVG(this.state),index.h("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),index.h("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){label.validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),prop_validators.watchNumber(this,"_max",e,{required:!0})}validateType(e){this.validateVariant(e)}validateUnit(e){prop_validators.watchString(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),prop_validators.watchNumber(this,"_value",e,{required:!0})}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"string"==typeof e&&VALID_VARIANTS.includes(e)),new Set(VALID_VARIANTS),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant||this._type),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};KolProcess.style={default:defaultStyleCss},exports.kol_progress=KolProcess;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-18912bca.js"),label=require("./label-dea575c5.js"),prop_validators=require("./prop.validators-d3b07c9b.js");var KoliBriProgressVariantEnum;require("./a11y.tipps-410ee075.js"),require("./dev.utils-d6ba8e97.js"),require("./reuse-5fad9b6e.js"),require("./index-6a24b8dc.js"),function(e){e.bar="bar",e.cycle="cycle",e["cycle-value-label"]="cycle-value-label",e["cycle-label-value"]="cycle-label-value"}(KoliBriProgressVariantEnum||(KoliBriProgressVariantEnum={}));const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}progress{display:block;height:0;overflow:hidden;width:0}.bar .border{fill:transparent;stroke:black}.bar .background{fill:lightgray;stroke:white}.bar .progress{fill:#0075ff;stroke:transparent;transition:250ms ease-in-out 50ms}.cycle .background{fill:transparent;stroke:lightgray}.cycle .border{fill:transparent;stroke:black}.cycle .whitespace{fill:transparent;stroke:white}.cycle .progress{fill:transparent;stroke:#0075ff;transform-origin:50% 50%;transform:rotate(-90deg);transition:250ms ease-in-out 50ms}@media (prefers-reduced-motion){.progress{transition-duration:0s;transition-delay:0s}}",VALID_VARIANTS=Object.keys(KoliBriProgressVariantEnum),createProgressSVG=e=>{let t="43%",r=e._label?"57%":"50%";switch(e._variant){case"cycle-value-label":e._label&&(t="57%",r="43%");case"cycle":case"cycle-label-value":return index.h("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),index.h("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),index.h("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),e._label&&index.h("text",{"aria-hidden":"true",x:"50%",y:t,"text-anchor":"middle",fill:"currentColor"},e._label),index.h("text",{"aria-hidden":"true",x:"50%",y:r,"text-anchor":"middle",fill:"currentColor"},e._value,e._unit));default:return index.h("div",{class:"bar"},e._label&&index.h("div",null,e._label),index.h("div",{style:{display:"flex",gap:"0.3em"}},index.h("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},index.h("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),index.h("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:e._value/e._max*95}),index.h("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),index.h("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},e._value,e._unit)))}},KolProcess=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return index.h(index.Host,null,createProgressSVG(this.state),index.h("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),index.h("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){label.validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),prop_validators.watchNumber(this,"_max",e,{required:!0})}validateType(e){this.validateVariant(e)}validateUnit(e){prop_validators.watchString(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),prop_validators.watchNumber(this,"_value",e,{required:!0})}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"string"==typeof e&&VALID_VARIANTS.includes(e)),new Set(VALID_VARIANTS),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant||this._type),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};KolProcess.style={default:defaultStyleCss},exports.kol_progress=KolProcess;

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

@@ -1 +1 @@
-{"file":"kol-progress.entry.cjs.js","mappings":"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","names":["h","Host","validateLabel","watchNumber","watchString","watchValidator"],"sources":["src/types/progress.ts","src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n\t'cycle-value-label' = 'cycle-value-label',\n\t'cycle-label-value' = 'cycle-label-value',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import url(../style.css);\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.bar .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.bar .background {\n\tfill: lightgray;\n\tstroke: white;\n}\n.bar .progress {\n\tfill: #0075ff;\n\tstroke: transparent;\n\ttransition: 250ms ease-in-out 50ms;\n}\n.cycle .background {\n\tfill: transparent;\n\tstroke: lightgray;\n}\n.cycle .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.cycle .whitespace {\n\tfill: transparent;\n\tstroke: white;\n}\n.cycle .progress {\n\tfill: transparent;\n\tstroke: #0075ff;\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n\ttransition: 250ms ease-in-out 50ms;\n}\n/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n@media (prefers-reduced-motion) {\n\t.progress {\n\t\ttransition-duration: 0s;\n\t\ttransition-delay: 0s;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { KoliBriProgressVariantEnum, KoliBriProgressVariantType } from '../../types/progress';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriProgressAPI, KoliBriProgressStates } from './types';\n\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: KoliBriProgressStates): JSX.Element => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\n\tlet labelY = textPositionTop;\n\tlet valueY = state._label ? textPositionBottom : '50%';\n\tswitch (state._variant) {\n\t\tcase 'cycle-value-label':\n\t\t\tif (state._label) {\n\t\t\t\tlabelY = textPositionBottom;\n\t\t\t\tvalueY = textPositionTop;\n\t\t\t}\n\t\t// eslint-disable-next-line no-fallthrough\n\t\tcase 'cycle':\n\t\tcase 'cycle-label-value':\n\t\t\treturn (\n\t\t\t\t<svg class=\"cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle class=\"background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\t\t\tstroke-width=\"6\"\n\t\t\t\t\t\tcx=\"60\"\n\t\t\t\t\t\tcy=\"60\"\n\t\t\t\t\t\tr=\"54.5\"\n\t\t\t\t\t></circle>\n\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={labelY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div class=\"bar\">\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 102 8\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<rect class=\"background\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100\"></rect>\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\t\t\t\theight=\"7\"\n\t\t\t\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\t\t\t\twidth={95 * (state._value / state._max)}\n\t\t\t\t\t\t\t></rect>\n\t\t\t\t\t\t\t<rect class=\"border\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100\"></rect>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\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 KoliBriProgressAPI {\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\" hidden>\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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: LabelPropType;\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 * Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t * @deprecated will be removed in v2, use _variant\n\t */\n\t@Prop() public _type?: KoliBriProgressVariantType;\n\n\t/**\n\t * Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)\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 * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: KoliBriProgressStates = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\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// @deprecated remove with v2\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressVariantType): void {\n\t\tthis.validateVariant(value);\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\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@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant || this._type);\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);\n\t}\n}\n"],"version":3}
+{"file":"kol-progress.entry.cjs.js","mappings":"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","names":["h","Host","validateLabel","watchNumber","watchString","watchValidator"],"sources":["src/types/progress.ts","src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n\t'cycle-value-label' = 'cycle-value-label',\n\t'cycle-label-value' = 'cycle-label-value',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import url(../style.css);\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.bar .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.bar .background {\n\tfill: lightgray;\n\tstroke: white;\n}\n.bar .progress {\n\tfill: #0075ff;\n\tstroke: transparent;\n\ttransition: 250ms ease-in-out 50ms;\n}\n.cycle .background {\n\tfill: transparent;\n\tstroke: lightgray;\n}\n.cycle .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.cycle .whitespace {\n\tfill: transparent;\n\tstroke: white;\n}\n.cycle .progress {\n\tfill: transparent;\n\tstroke: #0075ff;\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n\ttransition: 250ms ease-in-out 50ms;\n}\n/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n@media (prefers-reduced-motion) {\n\t.progress {\n\t\ttransition-duration: 0s;\n\t\ttransition-delay: 0s;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { KoliBriProgressVariantEnum, KoliBriProgressVariantType } from '../../types/progress';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriProgressAPI, KoliBriProgressStates } from './types';\n\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: KoliBriProgressStates): JSX.Element => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\n\tlet labelY = textPositionTop;\n\tlet valueY = state._label ? textPositionBottom : '50%';\n\tswitch (state._variant) {\n\t\tcase 'cycle-value-label':\n\t\t\tif (state._label) {\n\t\t\t\tlabelY = textPositionBottom;\n\t\t\t\tvalueY = textPositionTop;\n\t\t\t}\n\t\t// eslint-disable-next-line no-fallthrough\n\t\tcase 'cycle':\n\t\tcase 'cycle-label-value':\n\t\t\treturn (\n\t\t\t\t<svg class=\"cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle class=\"background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\t\t\tstroke-width=\"6\"\n\t\t\t\t\t\tcx=\"60\"\n\t\t\t\t\t\tcy=\"60\"\n\t\t\t\t\t\tr=\"54.5\"\n\t\t\t\t\t></circle>\n\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={labelY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div class=\"bar\">\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 102 8\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<rect class=\"background\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100\"></rect>\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\t\t\t\theight=\"7\"\n\t\t\t\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\t\t\t\twidth={95 * (state._value / state._max)}\n\t\t\t\t\t\t\t></rect>\n\t\t\t\t\t\t\t<rect class=\"border\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100\"></rect>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\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 KoliBriProgressAPI {\n\tprivate interval?: number;\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\" hidden>\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 * Sets the visible or semantic label of the component (e.g. Aria label, Label, Headline, Caption, Summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\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 * Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t * @deprecated will be removed in v2, use _variant\n\t */\n\t@Prop() public _type?: KoliBriProgressVariantType;\n\n\t/**\n\t * Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)\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 * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: KoliBriProgressStates = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\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// @deprecated remove with v2\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressVariantType): void {\n\t\tthis.validateVariant(value);\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\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@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant || this._type);\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) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),label=require("./label-b6d62008.js"),prop_validators=require("./prop.validators-8eed6b45.js");require("./a11y.tipps-8660049e.js"),require("./dev.utils-f772f088.js"),require("./reuse-5fad9b6e.js"),require("./index-6a24b8dc.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}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}",KolQuote=class{constructor(e){index.registerInstance(this,e),this._caption=void 0,this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(e){this.validateLabel(e)}validateLabel(e){label.validateLabel(this,e)}validateHref(e){prop_validators.watchString(this,"_href",e,{required:!0})}validateQuote(e){prop_validators.watchString(this,"_quote",e,{required:!0})}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"block"===e||"inline"===e),new Set(["block","inline"]),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label||this._caption),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=""!==this.state._quote;return index.h(index.Host,null,index.h("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?index.h("blockquote",{cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?"true":void 0,hidden:e},index.h("slot",{name:"expert"}))):index.h("q",{cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?"true":void 0,hidden:e},index.h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&index.h("figcaption",null,index.h("cite",null,index.h("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-18912bca.js"),label=require("./label-dea575c5.js"),prop_validators=require("./prop.validators-d3b07c9b.js");require("./a11y.tipps-410ee075.js"),require("./dev.utils-d6ba8e97.js"),require("./reuse-5fad9b6e.js"),require("./index-6a24b8dc.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}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}",KolQuote=class{constructor(e){index.registerInstance(this,e),this._caption=void 0,this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(e){this.validateLabel(e)}validateLabel(e){label.validateLabel(this,e)}validateHref(e){prop_validators.watchString(this,"_href",e,{required:!0})}validateQuote(e){prop_validators.watchString(this,"_quote",e,{required:!0})}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"block"===e||"inline"===e),new Set(["block","inline"]),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label||this._caption),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=""!==this.state._quote;return index.h(index.Host,null,index.h("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?index.h("blockquote",{cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?"true":void 0,hidden:e},index.h("slot",{name:"expert"}))):index.h("q",{cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?"true":void 0,hidden:e},index.h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&index.h("figcaption",null,index.h("cite",null,index.h("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;

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

@@ -1 +1 @@
-{"file":"kol-quote.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,65BAA65B;;MCax6B,QAAQ;;;;;;;oBAyB4B,QAAQ;iBAEZ;MAC3C,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,GAAG;MACX,QAAQ,EAAE,QAAQ;KAClB;;EAGM,eAAe,CAAC,KAAc;IACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB;IACzCA,mBAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,YAAY,CAAC,KAAc;IACjCC,2BAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;MACjC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAGM,aAAa,CAAC,KAAc;IAClCA,2BAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MAClC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAGM,eAAe,CAAC,KAA2B;IACjDC,8BAAc,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;GAC1H;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;EAEM,MAAM;IACZ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC;IAChD,QACCC,QAACC,UAAI,QACJD,oBACC,KAAK,EAAE;QACN,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;OAC3B,IAEA,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/BA,wBAAY,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,cAAc,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,cAAc,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEbA,eAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvB,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,cAAc,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,cAAc,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrEA,4BACCA,sBACCA,sBAAU,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC3E,CACK,CACb,CACO,CACH,EACN;GACF;;;;;;;;;;;;;;;","names":["validateLabel","watchString","watchValidator","h","Host"],"sources":["src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["@import url(../style.css);\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\nblockquote:before {\n\tcontent: open-quote;\n}\nblockquote::after {\n\tcontent: close-quote;\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 { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriQuoteApi, KoliBriQuoteStates, KoliBriQuoteVariant } 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 KoliBriQuoteApi {\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _caption?: string;\n\n\t/**\n\t * Defines the label of the citation link.\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Gibt den Link zur Quelle des Zitates an.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * Setzt den Text, also das Zitat selbst.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: KoliBriQuoteStates = {\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\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_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.validateHref(this._href);\n\t\tthis.validateLabel(this._label || this._caption);\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._label === 'string' && this.state._label.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._label} _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"],"version":3}
+{"file":"kol-quote.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,65BAA65B;;MCcx6B,QAAQ;;;;;;;oBAyB4B,QAAQ;iBAEZ;MAC3C,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,GAAG;MACX,QAAQ,EAAE,QAAQ;KAClB;;EAGM,eAAe,CAAC,KAAc;IACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB;IACzCA,mBAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,YAAY,CAAC,KAAoB;IACvCC,2BAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;MACjC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAGM,aAAa,CAAC,KAAc;IAClCA,2BAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MAClC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAGM,eAAe,CAAC,KAA2B;IACjDC,8BAAc,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;GAC1H;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;EAEM,MAAM;IACZ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC;IAChD,QACCC,QAACC,UAAI,QACJD,oBACC,KAAK,EAAE;QACN,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;OAC3B,IAEA,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/BA,wBAAY,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,cAAc,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,cAAc,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEbA,eAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvB,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,cAAc,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,cAAc,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrEA,4BACCA,sBACCA,sBAAU,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC3E,CACK,CACb,CACO,CACH,EACN;GACF;;;;;;;;;;;;;;;","names":["validateLabel","watchString","watchValidator","h","Host"],"sources":["src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["@import url(../style.css);\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\nblockquote:before {\n\tcontent: open-quote;\n}\nblockquote::after {\n\tcontent: close-quote;\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 { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriQuoteApi, KoliBriQuoteStates, KoliBriQuoteVariant } from './types';\nimport { HrefPropType } from '../../types/props/href';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements KoliBriQuoteApi {\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _caption?: string;\n\n\t/**\n\t * Defines the label of the citation link.\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Defines the link the source of the quote.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Setzt den Text, also das Zitat selbst.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: KoliBriQuoteStates = {\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\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): 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.validateHref(this._href);\n\t\tthis.validateLabel(this._label || this._caption);\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._label === 'string' && this.state._label.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._label} _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"],"version":3}

package/dist/cjs/kol-select.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),dev_utils=require("./dev.utils-f772f088.js"),associated_controller=require("./associated.controller-bfb23ef2.js"),reuse=require("./reuse-5fad9b6e.js"),controller$1=require("./controller-acb9eac4.js"),controller=require("./controller-b1a83b39.js"),rows=require("./rows-68ac6b5e.js"),prop_validators=require("./prop.validators-8eed6b45.js"),controllerIcon=require("./controller-icon-412e99dd.js");require("./a11y.tipps-8660049e.js"),require("./label-b6d62008.js"),require("./tab-index-21bd316a.js"),require("./index-6a24b8dc.js"),require("./icon-0d834f60.js");class SelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.beforePatchOptions=(e,t)=>{const i=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);!1===this.component._multiple&&0===a.length?(t.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(e)&&a.length<e.length&&(t.set("_value",a),this.onStateChange())}},this.component=e}validateHeight(e){prop_validators.watchString(this.component,"_height",e)}validateOptions(e){controller.validateOptionsWithOptgroup(this.component,e,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(e){prop_validators.watchBoolean(this.component,"_multiple",e,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){prop_validators.watchJsonArrayString(this.component,"_value",(()=>!0),e,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(e){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof e){const t=setTimeout((()=>{clearTimeout(t),e(reuse.STATE_CHANGE_EVENT)}))}},this.validateHeight(this.component._height),this.validateOptions(this.component._options||this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows||this.component._size),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",isSelected=(e,t)=>Array.isArray(e)&&e.includes(t),KolSelect=class{renderOptgroup(e,t){var i;return index.h("optgroup",{disabled:e.disabled,label:e.label},null===(i=e.options)||void 0===i?void 0:i.map(((e,i)=>{const a=`${t}-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):index.h("option",{disabled:e.disabled,key:a,selected:isSelected(this.state._value,e.value),value:a},e.label)})))}render(){const{ariaDescribedBy:e}=controller$1.getRenderStates(this.state),t=!1===this.state._label;return index.h(index.Host,{class:{"has-value":this.state._hasValue}},index.h("kol-input",{class:{"hide-label":!!this.state._hideLabel,select:!0},_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,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()}},index.h("span",{slot:"label"},t?index.h("slot",null):this.state._label),index.h("div",{slot:"input"},index.h("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",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._rows,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._options.map(((e,t)=>{const i=`-${t}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):index.h("option",{disabled:e.disabled,key:i,selected:isSelected(this.state._value,e.value),value:i},e.label)}))),index.h("kol-tooltip",{"aria-hidden":"true",hidden:t||!this.state._hideLabel,_align:this._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.ref=e,reuse.propagateFocus(this.host,this.ref)},this.onChange=e=>{var t,i;this._value=Array.from((null===(t=this.ref)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),associated_controller.stopPropagation(e),associated_controller.tryToDispatchKoliBriEvent("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(e,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._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=void 0,this._rows=void 0,this._size=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:`id-${dev_utils.nonce()}`,_label:!1,_options:[],_multiple:!1,_value:[]},this.controller=new SelectController(this,"select",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHeight(e){this.controller.validateHeight(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcon(e){this.controller.validateIcon(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateList(e){this.validateOptions(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateSize(e){this.controller.validateRows(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_size:["validateSize"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:defaultStyleCss},exports.kol_select=KolSelect;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-18912bca.js"),dev_utils=require("./dev.utils-d6ba8e97.js"),associated_controller=require("./associated.controller-6beebfb6.js"),reuse=require("./reuse-5fad9b6e.js"),controller$1=require("./controller-15b2c983.js"),controller=require("./controller-d8e002ab.js"),rows=require("./rows-435bcf3a.js"),prop_validators=require("./prop.validators-d3b07c9b.js"),controllerIcon=require("./controller-icon-a7345929.js");require("./a11y.tipps-410ee075.js"),require("./label-dea575c5.js"),require("./tab-index-0767b320.js"),require("./index-6a24b8dc.js"),require("./icon-ccb23476.js");class SelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.beforePatchOptions=(e,t)=>{const i=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);!1===this.component._multiple&&0===a.length?(t.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(e)&&a.length<e.length&&(t.set("_value",a),this.onStateChange())}},this.component=e}validateHeight(e){prop_validators.watchString(this.component,"_height",e)}validateOptions(e){controller.validateOptionsWithOptgroup(this.component,e,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(e){prop_validators.watchBoolean(this.component,"_multiple",e,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){prop_validators.watchJsonArrayString(this.component,"_value",(()=>!0),e,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(e){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof e){const t=setTimeout((()=>{clearTimeout(t),e(reuse.STATE_CHANGE_EVENT)}))}},this.validateHeight(this.component._height),this.validateOptions(this.component._options||this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows||this.component._size),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",isSelected=(e,t)=>Array.isArray(e)&&e.includes(t),KolSelect=class{renderOptgroup(e,t){var i;return index.h("optgroup",{disabled:e.disabled,label:e.label},null===(i=e.options)||void 0===i?void 0:i.map(((e,i)=>{const a=`${t}-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):index.h("option",{disabled:e.disabled,key:a,selected:isSelected(this.state._value,e.value),value:a},e.label)})))}render(){const{ariaDescribedBy:e}=controller$1.getRenderStates(this.state),t=!1===this.state._label;return index.h(index.Host,{class:{"has-value":this.state._hasValue}},index.h("kol-input",{class:{"hide-label":!!this.state._hideLabel,select:!0},_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,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()}},index.h("span",{slot:"label"},t?index.h("slot",null):this.state._label),index.h("div",{slot:"input"},index.h("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",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._rows,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._options.map(((e,t)=>{const i=`-${t}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):index.h("option",{disabled:e.disabled,key:i,selected:isSelected(this.state._value,e.value),value:i},e.label)}))),index.h("kol-tooltip",{"aria-hidden":"true",hidden:t||!this.state._hideLabel,_align:this._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.ref=e,reuse.propagateFocus(this.host,this.ref)},this.onChange=e=>{var t,i;this._value=Array.from((null===(t=this.ref)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),associated_controller.stopPropagation(e),associated_controller.tryToDispatchKoliBriEvent("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(e,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._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=void 0,this._rows=void 0,this._size=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:`id-${dev_utils.nonce()}`,_label:!1,_options:[],_multiple:!1,_value:[]},this.controller=new SelectController(this,"select",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHeight(e){this.controller.validateHeight(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcon(e){this.controller.validateIcon(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateList(e){this.validateOptions(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateSize(e){this.controller.validateRows(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_size:["validateSize"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:defaultStyleCss},exports.kol_select=KolSelect;

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

@@ -1 +1 @@
-{"file":"kol-select.entry.cjs.js","mappings":"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","names":["InputIconController","fillKeyOptionMap","watchString","validateOptionsWithOptgroup","watchBoolean","validateRows","watchJsonArrayString","STATE_CHANGE_EVENT","h","index","getRenderStates","Host","propagateFocus","stopPropagation","tryToDispatchKoliBriEvent","nonce"],"sources":["src/components/select/controller.ts","src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { OptionsWithOptgroupPropType, validateOptionsWithOptgroup } from '../../types/props/options';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, 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';\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 beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options 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(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[]\n\t\t\t);\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\toptions[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\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\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\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\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.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\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.validateOptions(this.component._options || this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows || this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { Align } from '../../types/props/align';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { OptionsWithOptgroupPropType } from '../../types/props/options';\nimport { RowsPropType } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus } from '../../utils/reuse';\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 * @slot - Die Beschriftung des Eingabefeldes.\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\tpropagateFocus(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} 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}\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 { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t/**\n\t\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\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\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\t} else {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\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\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t *\n\t * @deprecated Use _rows instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t * @deprecated use _options\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() 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 * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options?: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Macht das Eingabeelementzu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: number;\n\n\t/**\n\t * Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_options: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\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\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\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"],"version":3}
+{"file":"kol-select.entry.cjs.js","mappings":"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","names":["InputIconController","fillKeyOptionMap","watchString","validateOptionsWithOptgroup","watchBoolean","validateRows","watchJsonArrayString","STATE_CHANGE_EVENT","h","index","getRenderStates","Host","propagateFocus","stopPropagation","tryToDispatchKoliBriEvent","nonce"],"sources":["src/components/select/controller.ts","src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { OptionsWithOptgroupPropType, validateOptionsWithOptgroup } from '../../types/props/options';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, 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';\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 beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options 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(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[]\n\t\t\t);\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\toptions[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\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\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\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\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.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\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.validateOptions(this.component._options || this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows || this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { AlignPropType } from '../../types/props/align';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { OptionsWithOptgroupPropType } from '../../types/props/options';\nimport { RowsPropType } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus } from '../../utils/reuse';\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 * @slot - Die Beschriftung des Eingabefeldes.\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\tpropagateFocus(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} 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}\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 { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t/**\n\t\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\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\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\t} else {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\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\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t *\n\t * @deprecated Use _rows instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t * @deprecated use _options\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() 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 * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options?: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Macht das Eingabeelementzu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: AlignPropType = 'top';\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_options: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\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\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),label=require("./label-b6d62008.js"),validation=require("./validation-bbe3284a.js");require("./a11y.tipps-8660049e.js"),require("./dev.utils-f772f088.js"),require("./reuse-5fad9b6e.js"),require("./prop.validators-8eed6b45.js"),require("./index-6a24b8dc.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",KolSkipNav=class{constructor(e){index.registerInstance(this,e),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return index.h("nav",{"aria-label":this.state._label},index.h("ul",null,this.state._links.map(((e,i)=>index.h("li",{key:i},index.h("kol-link-wc",Object.assign({},e)))))))}validateAriaLabel(e){this.validateLabel(e)}validateLabel(e){label.validateLabel(this,e)}validateLinks(e){validation.watchNavLinks("KolSkipNav",this,e)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};KolSkipNav.style={default:defaultStyleCss},exports.kol_skip_nav=KolSkipNav;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-18912bca.js"),label=require("./label-dea575c5.js"),validation=require("./validation-4106a2ad.js");require("./a11y.tipps-410ee075.js"),require("./dev.utils-d6ba8e97.js"),require("./reuse-5fad9b6e.js"),require("./prop.validators-d3b07c9b.js"),require("./index-6a24b8dc.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",KolSkipNav=class{constructor(e){index.registerInstance(this,e),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return index.h("nav",{"aria-label":this.state._label},index.h("ul",null,this.state._links.map(((e,i)=>index.h("li",{key:i},index.h("kol-link-wc",Object.assign({},e)))))))}validateAriaLabel(e){this.validateLabel(e)}validateLabel(e){label.validateLabel(this,e)}validateLinks(e){validation.watchNavLinks("KolSkipNav",this,e)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};KolSkipNav.style={default:defaultStyleCss},exports.kol_skip_nav=KolSkipNav;

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

@@ -1 +1 @@
-{"file":"kol-skip-nav.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,05BAA05B;;MCer6B,UAAU;;;;;;iBAkCwB;MAC7C,MAAM,EAAE,GAAG;MACX,MAAM,EAAE,EAAE;KACV;;EApCM,MAAM;IACZ,QACCA,+BAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjCA,oBACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAEC,OAAa;MACrD,QACCD,gBAAI,GAAG,EAAEC,OAAK,IACbD,yCAAiB,IAAI,EAAgB,CACjC,EACJ;KACF,CAAC,CACE,CACA,EACL;GACF;EA4BM,iBAAiB,CAAC,KAAc;IACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB;IACzCE,mBAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAgC;IACpDC,wBAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;GACzC;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;IACnD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;;","names":["h","index","validateLabel","watchNavLinks"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNavLinks } from '../nav/validation';\nimport { KoliBriSkipNavAPI, KoliBriSkipNavStates } from './types';\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 KoliBriSkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, 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-wc {...link}></kol-link-wc>\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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: KoliBriSkipNavStates = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"version":3}
+{"file":"kol-skip-nav.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,05BAA05B;;MCer6B,UAAU;;;;;;iBAkCwB;MAC7C,MAAM,EAAE,GAAG;MACX,MAAM,EAAE,EAAE;KACV;;EApCM,MAAM;IACZ,QACCA,+BAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjCA,oBACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAEC,OAAa;MACrD,QACCD,gBAAI,GAAG,EAAEC,OAAK,IACbD,yCAAiB,IAAI,EAAgB,CACjC,EACJ;KACF,CAAC,CACE,CACA,EACL;GACF;EA4BM,iBAAiB,CAAC,KAAc;IACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB;IACzCE,mBAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAgC;IACpDC,wBAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;GACzC;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;IACnD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;;","names":["h","index","validateLabel","watchNavLinks"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNavLinks } from '../nav/validation';\nimport { KoliBriSkipNavAPI, KoliBriSkipNavStates } from './types';\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 KoliBriSkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, 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-wc {...link}></kol-link-wc>\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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Sets the visible or semantic label of the component (e.g. Aria label, Label, Headline, Caption, Summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: KoliBriSkipNavStates = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"version":3}

package/dist/cjs/kol-span-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),hideLabel=require("./hide-label-4e7c335d.js"),icon=require("./icon-0d834f60.js"),label=require("./label-b6d62008.js");require("./prop.validators-8eed6b45.js"),require("./a11y.tipps-8660049e.js"),require("./dev.utils-f772f088.js"),require("./reuse-5fad9b6e.js"),require("./index-6a24b8dc.js");const KolSpanWc=class{constructor(e){index.registerInstance(this,e),this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this.state={_hideLabel:!1,_icon:{},_label:!1}}render(){const e="string"==typeof this.state._label;return index.h(index.Host,{class:{"icon-only":!!this.state._hideLabel,"hide-label":!!this.state._hideLabel}},this.state._icon.top&&index.h("kol-icon",{class:"icon top",style:this.state._icon.top.style,_label:"",_icon:this.state._icon.top.icon}),index.h("span",null,this.state._icon.left&&index.h("kol-icon",{class:"icon left",style:this.state._icon.left.style,_label:"",_icon:this.state._icon.left.icon}),!this.state._hideLabel&&e?index.h("span",null,this.state._label):"",index.h("span",{"aria-hidden":e?"true":void 0,hidden:e},index.h("slot",{name:"expert"})),this.state._icon.right&&index.h("kol-icon",{class:"icon right",style:this.state._icon.right.style,_label:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&index.h("kol-icon",{class:"icon bottom",style:this.state._icon.bottom.style,_label:"",_icon:this.state._icon.bottom.icon}))}validateHideLabel(e){hideLabel.validateHideLabel(this,e)}validateIcon(e){icon.validateIcon(this,e)}validateIconOnly(e){this.validateHideLabel(e)}validateLabel(e){label.validateLabelWithExpertSlot(this,e)}componentWillLoad(){this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label)}static get watchers(){return{_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"]}}};exports.kol_span_wc=KolSpanWc;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-18912bca.js"),hideLabel=require("./hide-label-edf70971.js"),icon=require("./icon-ccb23476.js"),label=require("./label-dea575c5.js");require("./prop.validators-d3b07c9b.js"),require("./a11y.tipps-410ee075.js"),require("./dev.utils-d6ba8e97.js"),require("./reuse-5fad9b6e.js"),require("./index-6a24b8dc.js");const KolSpanWc=class{constructor(e){index.registerInstance(this,e),this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this.state={_hideLabel:!1,_icon:{},_label:!1}}render(){const e="string"==typeof this.state._label;return index.h(index.Host,{class:{"icon-only":!!this.state._hideLabel,"hide-label":!!this.state._hideLabel}},this.state._icon.top&&index.h("kol-icon",{class:"icon top",style:this.state._icon.top.style,_label:"",_icon:this.state._icon.top.icon}),index.h("span",null,this.state._icon.left&&index.h("kol-icon",{class:"icon left",style:this.state._icon.left.style,_label:"",_icon:this.state._icon.left.icon}),!this.state._hideLabel&&e?index.h("span",null,this.state._label):"",index.h("span",{"aria-hidden":e?"true":void 0,hidden:e},index.h("slot",{name:"expert"})),this.state._icon.right&&index.h("kol-icon",{class:"icon right",style:this.state._icon.right.style,_label:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&index.h("kol-icon",{class:"icon bottom",style:this.state._icon.bottom.style,_label:"",_icon:this.state._icon.bottom.icon}))}validateHideLabel(e){hideLabel.validateHideLabel(this,e)}validateIcon(e){icon.validateIcon(this,e)}validateIconOnly(e){this.validateHideLabel(e)}validateLabel(e){label.validateLabelWithExpertSlot(this,e)}componentWillLoad(){this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label)}static get watchers(){return{_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"]}}};exports.kol_span_wc=KolSpanWc;

package/dist/cjs/kol-span-wc.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-span-wc.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;MAgBa,SAAS;;;sBA2BiB,KAAK;;;;iBAkBA;MAC1C,UAAU,EAAE,KAAK;MACjB,KAAK,EAAE,EAAE;MACT,MAAM,EAAE,KAAK;KACb;;EAhDM,MAAM;IACZ,MAAM,cAAc,GAAY,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC;IACtE,QACCA,QAACC,UAAI,IACJ,KAAK,EAAE;QACN,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;QACpC,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;OACrC,IAEA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,IAAID,sBAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,GAAI,EACrIA,sBACE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAIA,sBAAU,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAI,EACxI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,cAAc,GAAGA,sBAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ,GAAG,EAAE,EACjFA,iCAAmB,cAAc,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,cAAc,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,EACN,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,IAAIA,sBAAU,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,GAAI,CACvI,EACN,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,IAAIA,sBAAU,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAI,CAC3I,EACN;GACF;EA8BM,iBAAiB,CAAC,KAAe;IACvCE,2BAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,YAAY,CAAC,KAAuB;IAC1CC,iBAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC1B;EAMM,gBAAgB,CAAC,KAAe;IACtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;GAC9B;EAGM,aAAa,CAAC,KAAmC;IACvDC,iCAA2B,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACzC;EAEM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IAC1D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;","names":["h","Host","validateHideLabel","validateIcon","validateLabelWithExpertSlot"],"sources":["src/components/span/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { validateHideLabel } from '../../types/props/hide-label';\nimport { validateIcon } from '../../types/props/icon';\nimport { LabelWithExpertSlotPropType, validateLabelWithExpertSlot } from '../../types/props/label';\nimport { KolibriSpanAPI, KolibriSpanStates } from './types';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements KolibriSpanAPI {\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot: boolean = typeof this.state._label === 'string';\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': !!this.state._hideLabel, // @deprecated in v2\n\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && <kol-icon class=\"icon top\" style={this.state._icon.top.style} _label=\"\" _icon={this.state._icon.top.icon} />}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && <kol-icon class=\"icon left\" style={this.state._icon.left.style} _label=\"\" _icon={this.state._icon.left.icon} />}\n\t\t\t\t\t{!this.state._hideLabel && hideExpertSlot ? <span>{this.state._label}</span> : ''}\n\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && <kol-icon class=\"icon right\" style={this.state._icon.right.style} _label=\"\" _icon={this.state._icon.right.icon} />}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && <kol-icon class=\"icon bottom\" style={this.state._icon.bottom.style} _label=\"\" _icon={this.state._icon.bottom.icon} />}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t@State() public state: KolibriSpanStates = {\n\t\t_hideLabel: false,\n\t\t_icon: {},\n\t\t_label: false, // ⚠ required\n\t};\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}
+{"file":"kol-span-wc.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;MAgBa,SAAS;;;sBA2B2B,KAAK;;;;iBAkBV;MAC1C,UAAU,EAAE,KAAK;MACjB,KAAK,EAAE,EAAE;MACT,MAAM,EAAE,KAAK;KACb;;EAhDM,MAAM;IACZ,MAAM,cAAc,GAAY,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC;IACtE,QACCA,QAACC,UAAI,IACJ,KAAK,EAAE;QACN,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;QACpC,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;OACrC,IAEA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,IAAID,sBAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,GAAI,EACrIA,sBACE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAIA,sBAAU,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAI,EACxI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,cAAc,GAAGA,sBAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ,GAAG,EAAE,EACjFA,iCAAmB,cAAc,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,cAAc,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,EACN,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,IAAIA,sBAAU,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,GAAI,CACvI,EACN,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,IAAIA,sBAAU,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAC,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAI,CAC3I,EACN;GACF;EA8BM,iBAAiB,CAAC,KAAyB;IACjDE,2BAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,YAAY,CAAC,KAAuB;IAC1CC,iBAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC1B;EAMM,gBAAgB,CAAC,KAAe;IACtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;GAC9B;EAGM,aAAa,CAAC,KAAmC;IACvDC,iCAA2B,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACzC;EAEM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IAC1D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;","names":["h","Host","validateHideLabel","validateIcon","validateLabelWithExpertSlot"],"sources":["src/components/span/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { HideLabelPropType, validateHideLabel } from '../../types/props/hide-label';\nimport { validateIcon } from '../../types/props/icon';\nimport { LabelWithExpertSlotPropType, validateLabelWithExpertSlot } from '../../types/props/label';\nimport { KolibriSpanAPI, KolibriSpanStates } from './types';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements KolibriSpanAPI {\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot: boolean = typeof this.state._label === 'string';\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': !!this.state._hideLabel, // @deprecated in v2\n\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && <kol-icon class=\"icon top\" style={this.state._icon.top.style} _label=\"\" _icon={this.state._icon.top.icon} />}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && <kol-icon class=\"icon left\" style={this.state._icon.left.style} _label=\"\" _icon={this.state._icon.left.icon} />}\n\t\t\t\t\t{!this.state._hideLabel && hideExpertSlot ? <span>{this.state._label}</span> : ''}\n\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && <kol-icon class=\"icon right\" style={this.state._icon.right.style} _label=\"\" _icon={this.state._icon.right.icon} />}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && <kol-icon class=\"icon bottom\" style={this.state._icon.bottom.style} _label=\"\" _icon={this.state._icon.bottom.icon} />}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Hides the label and shows the description in a Tooltip instead.\n\t */\n\t@Prop() public _hideLabel?: HideLabelPropType = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t@State() public state: KolibriSpanStates = {\n\t\t_hideLabel: false,\n\t\t_icon: {},\n\t\t_label: false, // ⚠ required\n\t};\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}",KolSpan=class{constructor(e){index.registerInstance(this,e),this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0}render(){return index.h("kol-span-wc",{_icon:this._icon,_hideLabel:this._hideLabel,_label:this._label},index.h("slot",{name:"expert",slot:"expert"}))}};KolSpan.style={default:defaultStyleCss},exports.kol_span=KolSpan;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-18912bca.js"),defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}",KolSpan=class{constructor(e){index.registerInstance(this,e),this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0}render(){return index.h("kol-span-wc",{_icon:this._icon,_hideLabel:this._hideLabel,_label:this._label},index.h("slot",{name:"expert",slot:"expert"}))}};KolSpan.style={default:defaultStyleCss},exports.kol_span=KolSpan;

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

@@ -1 +1 @@
-{"file":"kol-span.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,srBAAsrB;;MCcjsB,OAAO;;;sBAYmB,KAAK;;;;;EAXpC,MAAM;IACZ,QACCA,yBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAC/EA,kBAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC5B,EACb;GACF;;;;;;;;","names":["h"],"sources":["src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { KolibriSpanProps } from './types';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements KolibriSpanProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _hideLabel={this._hideLabel} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n}\n"],"version":3}
+{"file":"kol-span.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,srBAAsrB;;MCejsB,OAAO;;;sBAY6B,KAAK;;;;;EAX9C,MAAM;IACZ,QACCA,yBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAC/EA,kBAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC5B,EACb;GACF;;;;;;;;","names":["h"],"sources":["src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { KolibriSpanProps } from './types';\nimport { HideLabelPropType } from '../../types/props/hide-label';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements KolibriSpanProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _hideLabel={this._hideLabel} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Hides the label and shows the description in a Tooltip instead.s\n\t */\n\t@Prop() public _hideLabel?: HideLabelPropType = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),i18n=require("./i18n-8adcb694.js"),prop_validators=require("./prop.validators-8eed6b45.js");require("./index-68e17b5d.js"),require("./index-6a24b8dc.js"),require("./a11y.tipps-8660049e.js"),require("./dev.utils-f772f088.js"),require("./reuse-5fad9b6e.js");const validateSpinVariant=(i,e)=>{prop_validators.watchValidator(i,"_variant",(i=>"cycle"===i||"dot"===i||"none"===i),new Set(["cycle","dot","none"]),e)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin.cycle{width:3rem;height:3rem}.spin.cycle>.loader{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:2s linear infinite rotate}.spin.cycle>.loader::before{content:'';box-sizing:border-box;position:absolute;inset:0px;border-radius:50%;border:5px solid #333;animation:3s linear infinite prixClipFix}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes prixClipFix{0%{border-color:#fff;clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{border-color:#666;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{border-color:#fc0;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{border-color:red;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{border-color:#000;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@media (prefers-reduced-motion){.spin.cycle>.loader{animation-duration:4s}.spin.cycle>.loader::before{animation-duration:6s}}.spin.dot{height:1rem;width:3rem}.spin.dot>span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin.dot>span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin.dot>span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin.dot>span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin.dot>span:nth-child(4){background-color:#666;z-index:0;animation:1s infinite spin3;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)}}@media (prefers-reduced-motion){.spin.dot>span:first-child,.spin.dot>span:nth-child(2),.spin.dot>span:nth-child(3),.spin.dot>span:nth-child(4){animation-duration:2s}}.spin{display:block;padding:0.125rem;position:relative}";function renderSpin(i){switch(i){case"cycle":return index.h("span",{class:"loader"});case"none":return index.h("slot",{name:"expert"});default:return index.h(index.Fragment,null,index.h("span",{class:"bg-spin-1"}),index.h("span",{class:"bg-spin-2"}),index.h("span",{class:"bg-spin-3"}),index.h("span",{class:"bg-neutral"}))}}const KolSpin=class{constructor(i){index.registerInstance(this,i),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return index.h(index.Host,null,this.state._show?index.h("span",{"aria-busy":"true","aria-label":i18n.translate("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},renderSpin(this.state._variant)):this.showToggled&&index.h("span",{"aria-label":i18n.translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,prop_validators.watchBoolean(this,"_show",i)}validateVariant(i){validateSpinVariant(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};KolSpin.style={default:defaultStyleCss},exports.kol_spin=KolSpin;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-18912bca.js"),i18n=require("./i18n-ea77a601.js"),prop_validators=require("./prop.validators-d3b07c9b.js"),show=require("./show-e15f52b3.js");require("./index-68e17b5d.js"),require("./index-6a24b8dc.js"),require("./a11y.tipps-410ee075.js"),require("./dev.utils-d6ba8e97.js"),require("./reuse-5fad9b6e.js");const validateSpinVariant=(i,e)=>{prop_validators.watchValidator(i,"_variant",(i=>"cycle"===i||"dot"===i||"none"===i),new Set(["cycle","dot","none"]),e)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin.cycle{width:3rem;height:3rem}.spin.cycle>.loader{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:2s linear infinite rotate}.spin.cycle>.loader::before{content:'';box-sizing:border-box;position:absolute;inset:0px;border-radius:50%;border:5px solid #333;animation:3s linear infinite prixClipFix}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes prixClipFix{0%{border-color:#fff;clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{border-color:#666;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{border-color:#fc0;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{border-color:red;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{border-color:#000;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@media (prefers-reduced-motion){.spin.cycle>.loader{animation-duration:4s}.spin.cycle>.loader::before{animation-duration:6s}}.spin.dot{height:1rem;width:3rem}.spin.dot>span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin.dot>span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin.dot>span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin.dot>span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin.dot>span:nth-child(4){background-color:#666;z-index:0;animation:1s infinite spin3;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)}}@media (prefers-reduced-motion){.spin.dot>span:first-child,.spin.dot>span:nth-child(2),.spin.dot>span:nth-child(3),.spin.dot>span:nth-child(4){animation-duration:2s}}.spin{display:block;padding:0.125rem;position:relative}";function renderSpin(i){switch(i){case"cycle":return index.h("span",{class:"loader"});case"none":return index.h("slot",{name:"expert"});default:return index.h(index.Fragment,null,index.h("span",{class:"bg-spin-1"}),index.h("span",{class:"bg-spin-2"}),index.h("span",{class:"bg-spin-3"}),index.h("span",{class:"bg-neutral"}))}}const KolSpin=class{constructor(i){index.registerInstance(this,i),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return index.h(index.Host,null,this.state._show?index.h("span",{"aria-busy":"true","aria-label":i18n.translate("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},renderSpin(this.state._variant)):this.showToggled&&index.h("span",{"aria-label":i18n.translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,show.validateShow(this,i)}validateVariant(i){validateSpinVariant(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};KolSpin.style={default:defaultStyleCss},exports.kol_spin=KolSpin;

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

@@ -1 +1 @@
-{"file":"kol-spin.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAsBO,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAAmB;EAC5FA,8BAAc,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AACtJ,CAAC;;ACxBD,MAAM,eAAe,GAAG,ynFAAynF;;ACOjpF,SAAS,UAAU,CAAC,OAAoB;EACvC,QAAQ,OAAO;IACd,KAAK,OAAO;MACX,OAAOC,kBAAM,KAAK,EAAC,QAAQ,GAAQ,CAAC;IACrC,KAAK,MAAM;MACV,OAAOA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;IACpC;MACC,QACCA,QAACC,cAAQ,QACRD,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,YAAY,GAAQ,CACtB,EACV;GACH;AACF,CAAC;MASY,OAAO;;;IACX,gBAAW,GAAG,KAAK,CAAC;iBA6BK,KAAK;oBAKE,KAAK;iBAEF;MAC1C,QAAQ,EAAE,KAAK;KACf;;EApCM,MAAM;IACZ,QACCA,QAACE,UAAI,QACH,IAAI,CAAC,KAAK,CAAC,KAAK,IAChBF,+BACW,MAAM,gBACJG,cAAS,CAAC,oBAAoB,CAAC,eACjC,QAAQ,EAClB,KAAK,EAAE;QACN,IAAI,EAAE,IAAI;QACV,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;OAE3B,EACD,IAAI,EAAC,OAAO,IAEX,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC1B,KAEP,IAAI,CAAC,WAAW,IAAIH,gCAAkBG,cAAS,CAAC,iBAAiB,CAAC,eAAY,OAAO,eAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC7H,CACK,EACN;GACF;EAiBM,YAAY,CAAC,KAAe;IAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;IACrEC,4BAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAGM,eAAe,CAAC,KAAmB;IACzC,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACjC;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;;;;;;","names":["watchValidator","h","Fragment","Host","translate","watchBoolean"],"sources":["src/types/props/variant/spin.ts","src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types */\n/**\n * Loadingspinner\n * - https://github.com/vineethtrv/css-loader\n */\nexport type SpinVariant = 'cycle' | 'dot' | 'none';\n\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariant;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariant): void => {\n\twatchValidator(component, '_variant', (value) => value === 'cycle' || value === 'dot' || value === 'none', new Set(['cycle', 'dot', 'none']), value);\n};\n","@import url(../style.css);\n@import url(cycle.css);\n@import url(dot.css);\n.spin {\n\tdisplay: block;\n\tpadding: 0.125rem;\n\tposition: relative;\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { SpinVariant, validateSpinVariant } from '../../types/props/variant/spin';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { KoliBriSpinAPI, KoliBriSpinStates } from './types';\n\nfunction renderSpin(variant: SpinVariant): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<Fragment>\n\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t</Fragment>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements KoliBriSpinAPI {\n\tprivate showToggled = false;\n\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\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\tspin: true,\n\t\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t\t/* [`spin--${this.state._variant}`]: true, witch benefit have this notation? */\n\t\t\t\t\t\t}}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\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 Komponente entweder ein- oder ausgeblendet ist.\n\t */\n\t@Prop() public _show?: boolean = false;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: SpinVariant = 'dot';\n\n\t@State() public state: KoliBriSpinStates = {\n\t\t_variant: 'dot',\n\t};\n\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@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariant): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"version":3}
+{"file":"kol-spin.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;AAmBO,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAA2B;EACpGA,8BAAc,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AACtJ,CAAC;;ACrBD,MAAM,eAAe,GAAG,ynFAAynF;;ACOjpF,SAAS,UAAU,CAAC,OAA4B;EAC/C,QAAQ,OAAO;IACd,KAAK,OAAO;MACX,OAAOC,kBAAM,KAAK,EAAC,QAAQ,GAAQ,CAAC;IACrC,KAAK,MAAM;MACV,OAAOA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;IACpC;MACC,QACCA,QAACC,cAAQ,QACRD,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,YAAY,GAAQ,CACtB,EACV;GACH;AACF,CAAC;MASY,OAAO;;;IACX,gBAAW,GAAG,KAAK,CAAC;iBA6BU,KAAK;oBAKK,KAAK;iBAEV;MAC1C,QAAQ,EAAE,KAAK;KACf;;EApCM,MAAM;IACZ,QACCA,QAACE,UAAI,QACH,IAAI,CAAC,KAAK,CAAC,KAAK,IAChBF,+BACW,MAAM,gBACJG,cAAS,CAAC,oBAAoB,CAAC,eACjC,QAAQ,EAClB,KAAK,EAAE;QACN,IAAI,EAAE,IAAI;QACV,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;OAE3B,EACD,IAAI,EAAC,OAAO,IAEX,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC1B,KAEP,IAAI,CAAC,WAAW,IAAIH,gCAAkBG,cAAS,CAAC,iBAAiB,CAAC,eAAY,OAAO,eAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC7H,CACK,EACN;GACF;EAiBM,YAAY,CAAC,KAAoB;IACvC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;IACrEC,iBAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC1B;EAGM,eAAe,CAAC,KAA2B;IACjD,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GACjC;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;;;;;;","names":["watchValidator","h","Fragment","Host","translate","validateShow"],"sources":["src/types/props/variant/spin.ts","src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types */\n/**\n * Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n */\nexport type SpinVariantPropType = 'cycle' | 'dot' | 'none';\n\n/**\n * Defines the variant of spin navigation.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(component, '_variant', (value) => value === 'cycle' || value === 'dot' || value === 'none', new Set(['cycle', 'dot', 'none']), value);\n};\n","@import url(../style.css);\n@import url(cycle.css);\n@import url(dot.css);\n.spin {\n\tdisplay: block;\n\tpadding: 0.125rem;\n\tposition: relative;\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { SpinVariantPropType, validateSpinVariant } from '../../types/props/variant/spin';\nimport { KoliBriSpinAPI, KoliBriSpinStates } from './types';\nimport { ShowPropType, validateShow } from '../../types/props/show';\n\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<Fragment>\n\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t</Fragment>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements KoliBriSpinAPI {\n\tprivate showToggled = false;\n\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\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\tspin: true,\n\t\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t\t/* [`spin--${this.state._variant}`]: true, witch benefit have this notation? */\n\t\t\t\t\t\t}}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\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 * Makes the element show up.\n\t */\n\t@Prop() public _show?: ShowPropType = false;\n\n\t/**\n\t * Defines the variant of spin navigation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: KoliBriSpinStates = {\n\t\t_variant: 'dot',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"version":3}